<%- include('../partials/header') -%>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }

  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  .column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
  }

  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 8px;
  }

  .about-section {
    padding: 50px;
    text-align: center;
    background-color: #474e5d;
    color: white;
  }

  .container {
    padding: 0 16px;
  }

  .avatar_pic {
    height: 30vh;
    width: auto;
    margin: 0 auto;
    display: block;
    object-fit: cover;
    object-position: 50% 50;
    margin-top: 1vh;
    margin-bottom: 1vh;
  }

  .container::after,
  .row::after {
    content: '';
    clear: both;
    display: table;
  }

  .title {
    color: grey;
  }

  .button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
  }

  .button:hover {
    background-color: #555;
  }

  .btn_contact {
    color: white !important;
  }

  @media screen and (max-width: 650px) {
    .column {
      width: 100%;
      display: block;
    }
  }
</style>

<div class="about-section">
  <h1>À propos de nous</h1>
  <p>
    Notre objectif est de fournir aux nos clients les matériels informatique et
    services dont ils ont besoin, des ordinateurs portables et des composants et
    plus encore nous sommes deux jeunes partenaires dans ce projet. Notre
    service est pas ciblé uniquement pour un type spécifique de personnes car
    maintenant la technologie est partout, mais en général nous pouvons dire que
    nous ciblons toute personne qui utilise la technologie dans sa routine, nous
    voulons faire grandir ce projet pour plusieurs raisons nous sommes des
    Entrepreneurs ambitieux qui veulent avoir un impact dans cette domain.
  </p>
  <ul class="list-unstyled">
    <li>Produits haute qualité</li>
    <li>Service client inégalé</li>
    <li>Remboursement garanti pendant 30 jours</li>
  </ul>
</div>

<br />

<h2 style="text-align: center">Notre Equipe</h2>
<div style="margin-bottom: 10%" class="row">
  <div class="column">
    <div class="card">
      <img src="/images/redone.jpg" alt="Jane" class="avatar_pic" />
      <div class="container">
        <h2>Mohamed Redouane</h2>
        <p class="title">Employee</p>
        <p>
          Vendeur de bonne réputation, bien sélectionné avec expertise et bonne
          communication avec les clients.
        </p>
        <p>odeersal222@gmail.com</p>
        <p>
          <a
            target="_blank"
            href="mailto:odeersal222@gmail.com"
            class="button btn_contact"
            >Contact</a
          >
        </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="/images/me.jpg" alt="Mike" class="avatar_pic" />
      <div class="container">
        <h2>Mohamed M'nari</h2>
        <p class="title">Co-Founder</p>
        <p>
          Responsable de magasin et ingénieur logiciel. professionnalisme,
          qualité et ponctualité sont mes maîtres mots.
        </p>
        <p>medmnari99@gmail.com</p>
        <p>
          <a
            target="_blank"
            href="mailto:medmnari99@gmail.com"
            class="button btn_contact"
            >Contact</a
          >
        </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img
        class="avatar_pic"
        src="/images/photo-avatar-profil.png"
        alt="John"
      />
      <div class="container">
        <h2>Mohamed Naji</h2>
        <p class="title">Co-Founder</p>
        <p>
          Avec ses stratégies sur le marché, nous fournissons les meilleurs
          produits disponibles aux meilleurs prix, un fournisseur formidable.
        </p>
        <p>naji82290@gmail.com</p>
        <p>
          <a
            target="_blank"
            href="mailto:naji82290@gmail.com"
            class="button btn_contact"
            >Contact</a
          >
        </p>
      </div>
    </div>
  </div>
</div>

<%- include('../partials/footer') -%>
