{% set profilePics = collections.profiles %}

<section class="[ presentation ]">
  <div class="[ wrapper ]">
    <article>
      <div class="content">
        <h2>Qui sommes-nous ?</h2>
        <p>
          Astrolabe CAE est une scop spécialisée dans le développement de <strong>projets</strong> ou de prestation de <strong>services</strong> autour des métiers du <strong>numérique</strong>. 
          Notre objectif est de favoriser l’<strong>autonomie</strong> et l’<strong>émancipation</strong> de nos membres sur un modèle d’économie sociale et <strong>solidaire</strong> (ESS).
        </p>
      </div>
      <div class="side-info">
        {# <figure> #}
          <img src="/images/crew-join.svg" alt="équipage astrolabe" loading="lazy" style="width: 22rem;">
        {# </figure> #}
        <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre 
          <svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
        </a>
      </div>
    </article>
    <article>
      <div class="content">
        <h2>Communs numérique</h2>
        <p>
          Chez Astrolabe nous aimons et faisons la promotion du <b>logiciel libre</b>. Nos sommes membres d’<a href="http://www.alliance-libre.org/" target="_blank" rel="noreferrer noopener">Alliance Libre</a>
          et nous mettons nos documents et projets internes à disposition sur notre gitlab.
        </p>
      </div>
      <div class="side-info">
        <figure>
          <img src="/images/gitlab.svg" alt="logo Gitlab" loading="lazy" width="110" height="101">
        </figure>
         <a role="button" href="https://framagit.org/astrolabe" class="btn btn-primary btn-icon" target="_blank" rel="noreferrer noopener">Gitlab</a>
      </div>
    </article>
    <article>
      <div class="content">
        <h2>Des profils variés</h2>
        <p>
          Nos coopérateurs possèdent des compétences propres allant de développement linux embarqué au web design et créent ainsi la <b>pluralité</b> de nos prestations.
          <br><br>
          Nous sommes également <b>distributeurs</b> de la solution logicielle <a href="https://www.crealead.com/naega#bootstrap-fieldgroup-nav-item--prsentation" target="_blank" rel="noreferrer noopener">Naega</a>.
        </p>
      </div>
      <div class="side-info">
        <ul class="profile-preview">
          {% for profile in profilePics %}
          <li>
            <a href="{{ profile.data.url }}" title="{{ profile.data.name }}">
              <img src="{{ profile.data.profile }}" alt="photo de {{ profile.data.name }}">
            </a>
          </li>
          {% endfor %}
        </ul>
        <a role="button" href="/equipe" class="btn btn-primary">Voir l'équipe</a>
      </div>
    </article>
  </div>
</section>