//-div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large
  h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')

  div.segment.lg-two-third.margin-top-small.padding-right-xlarge
    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
      h3.text-color-heading.text-semibold.text-uppercase(data-trans='about.card1.subTitle')
      div
        p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1')
        p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph2')
        a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/

  div.segment.lg-third.margin-top-small.text-top
    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
      div.segment.margin-top-small
        div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
      h3.text-color-heading.text-semibold.text-uppercase.text-medium(data-trans='about.card2.subTitle')
      p(data-trans='about.card2.paragraph1')
      a.button.text-bold.text-uppercase.color-secondary.bordered(href="https://startinblox.com/fr/#home-contact" target="_blank" data-trans='about.card2.link').main-cta



<div class="padding-top-xlarge padding-right-large padding-bottom-xlarge padding-left-large whitespace-normal">
  
  <div class="segment lg-full margin-bottom-xlarge">
    <div class="whitespace-normal shadow padding-medium text-center">
      <h3 class="text-color-heading text-medium text-uppercase text-semibold text-letter-spacing-large">Cette application est interopérable</h3>
      <p class="text-large">Cela signifie qu'à partir de cette même interface, tu peux interagir avec plusieurs collectifs et écosystèmes.</p>
      <div class="segment lg-full">
        <div class="segment lg-third margin-bottom-medium padding-left-small padding-right-small text-top whitespace-normal">
          <p class="text-semibold text-color-secondary">Ici tu es connecté via</p>
          <img class="margin-top-large" src="https://cdn.happy-dev.fr/logos/casaco.JPG" alt="Logo Casaco">
        </div>
        <div class="segment lg-third margin-bottom-medium padding-left-small padding-right-small text-top whitespace-normal">
          <p class="text-semibold text-color-secondary">Mais tu peux aussi te connecter à d'autres écosystèmes interopérables</p>
          <img src="https://cdn.happy-dev.fr/logos/interop.JPG" alt="">
        </div>
        <div class="segment lg-third margin-bottom-medium padding-left-small padding-right-small text-top whitespace-normal">
          <p class="text-semibold text-color-secondary">Et interagir avec tout ton réseau à partir de la même interface</p>
          <div class="margin-top-xlarge">
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="84px" height="85px" viewBox="0 0 84 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="var(--color-secondary)" fill-rule="evenodd">
                <g id="DASHBOARD" transform="translate(-1062.000000, -351.000000)" fill-rule="nonzero">
                  <g id="OFFRES-DE-MISSION-Copy-2" transform="translate(242.000000, 154.000000)">
                    <g id="dashboard" transform="translate(820.000000, 197.000000)">
                      <path d="M79.9354839,0.5 L4.06451613,0.5 C1.8236129,0.5 0,2.32355408 0,4.56438502 L0,64.1753653 C0,66.4161963 1.8236129,68.2397503 4.06451613,68.2397503 L40.6451613,68.2397503 L40.6451613,68.9848876 C40.6451613,70.4399374 40.9865806,71.8990516 41.6341935,73.2023644 L44.7096774,79.3951324 L44.7096774,84.4363246 L69.0967742,84.5 L69.0967742,79.5292571 L71.2645161,76.6394794 C72.4879355,75.0083062 73.1612903,72.9883068 73.1612903,70.9493403 L73.1612903,68.2397503 L79.9354839,68.2397503 C82.1763871,68.2397503 84,66.4161963 84,64.1753653 L84,4.56438502 C84,2.32355408 82.1763871,0.5 79.9354839,0.5 Z M4.06451613,3.20959001 L79.9354839,3.20959001 C80.682,3.20959001 81.2903226,3.81789297 81.2903226,4.56438502 L81.2903226,16.7575401 L2.70967742,16.7575401 L2.70967742,4.56438502 C2.70967742,3.81789297 3.318,3.20959001 4.06451613,3.20959001 Z M52.8387097,33.0150802 C50.5978065,33.0150802 48.7741935,34.8386342 48.7741935,37.0794652 L48.7741935,38.4342602 L32.516129,38.4342602 L32.516129,24.8863101 L75.8709677,24.8863101 L75.8709677,38.4342602 L56.9032258,38.4342602 L56.9032258,37.0794652 C56.9032258,34.8386342 55.0796129,33.0150802 52.8387097,33.0150802 Z M48.7741935,55.0399826 C46.9573548,53.1283668 44.3790968,51.9253089 41.4838065,51.9253089 C39.5287742,51.9253089 37.9368387,53.5158382 37.9354839,55.4721622 C37.9354839,56.0194994 38.0655484,56.5681913 38.3094194,57.0599819 L39.8363226,60.1109803 L32.516129,60.1109803 L32.516129,46.5630302 L48.7741935,46.5630302 L48.7741935,55.0399826 Z M70.4516129,70.9493403 C70.4516129,72.405745 69.9706452,73.8499565 69.0967742,75.0137254 L66.3870968,78.6269636 L66.3870968,81.7849908 L47.4193548,81.7335086 L47.4193548,78.7597336 L44.0607097,71.9965969 C43.5987097,71.0658527 43.3548387,70.0253701 43.3548387,68.9848876 L43.3548387,63.4193897 C43.3548387,61.8938905 42.9944516,60.3670365 42.3129677,59.0041128 L40.7345806,55.8474404 C40.6763226,55.7322828 40.6451613,55.6008677 40.6451613,55.4721622 C40.6451613,55.0101771 41.0218065,54.6348989 41.6125161,54.6348989 C45.561871,54.6348989 48.7741935,57.8484726 48.7741935,61.7977001 L48.7741935,64.1184639 L48.7741935,66.8280539 L51.483871,66.8280539 L51.483871,64.1184639 L51.483871,61.7977001 L51.483871,37.0794652 C51.483871,36.3329731 52.0921935,35.7246702 52.8387097,35.7246702 C53.5852258,35.7246702 54.1935484,36.3329731 54.1935484,37.0794652 L54.1935484,53.3370053 L54.1935484,58.7561853 L56.9032258,58.7561853 L56.9032258,53.3370053 C56.9032258,52.5905132 57.5115484,51.9822103 58.2580645,51.9822103 C59.0045806,51.9822103 59.6129032,52.5905132 59.6129032,53.3370053 L59.6129032,58.7561853 L62.3225806,58.7561853 L62.3225806,53.3370053 C62.3225806,52.5905132 62.9309032,51.9822103 63.6774194,51.9822103 C64.4239355,51.9822103 65.0322581,52.5905132 65.0322581,53.3370053 L65.0322581,56.0465953 L65.0322581,58.7561853 L67.7419355,58.7561853 L67.7419355,56.0465953 C67.7419355,55.3001032 68.3502581,54.6918003 69.0967742,54.6918003 C69.8432903,54.6918003 70.4516129,55.3001032 70.4516129,56.0465953 L70.4516129,70.9493403 Z M69.0967742,51.9822103 C68.5616129,51.9822103 68.0535484,52.0919486 67.5847742,52.2802652 C67.1173548,50.5529015 65.5511613,49.2726202 63.6774194,49.2726202 C62.6328387,49.2726202 61.6885161,49.6804135 60.9677419,50.3293603 C60.2469677,49.6790587 59.3026452,49.2726202 58.2580645,49.2726202 C57.7811613,49.2726202 57.3286452,49.3701655 56.9032258,49.5219025 L56.9032258,46.5630302 L75.8709677,46.5630302 L75.8709677,60.1109803 L73.1612903,60.1109803 L73.1612903,56.0465953 C73.1612903,53.8057643 71.3376774,51.9822103 69.0967742,51.9822103 Z M79.9354839,65.5301603 L73.1612903,65.5301603 L73.1612903,62.8205703 L78.5806452,62.8205703 L78.5806452,43.8534402 L56.9032258,43.8534402 L56.9032258,41.1438502 L78.5806452,41.1438502 L78.5806452,22.1767201 L29.8064516,22.1767201 L29.8064516,41.1438502 L48.7741935,41.1438502 L48.7741935,43.8534402 L29.8064516,43.8534402 L29.8064516,62.8205703 L40.6099355,62.8205703 C40.6275484,63.0197252 40.6451613,63.2202348 40.6451613,63.4193897 L40.6451613,65.5301603 L4.06451613,65.5301603 C3.318,65.5301603 2.70967742,64.9218574 2.70967742,64.1753653 L2.70967742,19.4671301 L81.2903226,19.4671301 L81.2903226,64.1753653 C81.2903226,64.9218574 80.682,65.5301603 79.9354839,65.5301603 Z" id="Shape"></path>
                      <path d="M13,6.5 L5,6.5 L5,14.5 L13,14.5 L13,6.5 Z M10.3333333,11.8333333 L7.66666667,11.8333333 L7.66666667,9.16666667 L10.3333333,9.16666667 L10.3333333,11.8333333 Z" id="Shape"></path>
                      <path d="M24,6.5 L16,6.5 L16,14.5 L24,14.5 L24,6.5 Z M21.3333333,11.8333333 L18.6666667,11.8333333 L18.6666667,9.16666667 L21.3333333,9.16666667 L21.3333333,11.8333333 Z" id="Shape"></path>
                      <path d="M35,6.5 L27,6.5 L27,14.5 L35,14.5 L35,6.5 Z M32.3333333,11.8333333 L29.6666667,11.8333333 L29.6666667,9.16666667 L32.3333333,9.16666667 L32.3333333,11.8333333 Z" id="Shape"></path>
                      <polygon id="Path" points="35 27.5 38 27.5 38 30.5 35 30.5"></polygon>
                      <polygon id="Path" points="40 27.5 73 27.5 73 30.5 40 30.5"></polygon>
                      <polygon id="Path" points="59 33.5 73 33.5 73 36.5 59 36.5"></polygon>
                      <polygon id="Path" points="35 33.5 46 33.5 46 36.5 35 36.5"></polygon>
                      <path d="M8,41.5 L27,41.5 L27,22.5 L8,22.5 L8,41.5 Z M10.7142857,25.2142857 L24.2857143,25.2142857 L24.2857143,38.7857143 L10.7142857,38.7857143 L10.7142857,25.2142857 Z" id="Shape"></path>
                      <polygon id="Path" points="16.5389826 32.5286477 14.8485857 30.7128914 13 32.6985676 16.5389826 36.5 24 28.4856762 22.1514143 26.5"></polygon>
                      <path d="M8,63.5 L27,63.5 L27,44.5 L8,44.5 L8,63.5 Z M10.7142857,47.2142857 L24.2857143,47.2142857 L24.2857143,60.7857143 L10.7142857,60.7857143 L10.7142857,47.2142857 Z" id="Shape"></path>
                      <polygon id="Path" points="16.5389826 54.5286477 14.8485857 52.7128914 13 54.6985676 16.5389826 58.5 24 50.4856762 22.1514143 48.5"></polygon>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>




  <div class="segment lg-half padding-right-small margin-bottom-xlarge">
    <div class="shadow padding-medium">
      <div class="whitespace-normal padding-medium text-center">
        <i class="segment center icon icon-xlarge icon-secondary rounded rounded-third rounded-large icon-magic-wand"></i>
        <h3 class="text-color-heading text-uppercase text-medium text-semibold text-letter-spacing-large">Déploie ton propre Hubl</h3>
        <p>Alors, c'est cool Hubl ?! Tu connais une organisation que l'outil peut intéresser ?<br>Fais-le nous savoir !</p>
        <sib-link class="button text-bold text-xsmall text-uppercase color-secondary bordered" next="admin">Contacte-nous</sib-link>
      </div>
    </div>
  </div>




  <div class="segment lg-half padding-left-small margin-bottom-xlarge">
    <div class="shadow padding-medium">
      <div class="whitespace-normal padding-medium text-center">
        <i class="segment center icon icon-xlarge icon-secondary rounded rounded-third rounded-large icon-globe"></i>
        <h3 class="text-color-heading text-uppercase text-medium text-semibold text-letter-spacing-large">Les groupes d'échange</h3>
        <p>Les cercles d'échanges vivent grâce aux membres du réseau.<br>Tu as toute légitimité de prendre la parole, donner ton avis et intervenir dans les conversations qui t'intéressent.</p>
        <sib-link class="button text-bold text-xsmall text-uppercase color-secondary bordered" next="admin">Rejoindre de nouveaux cercles</sib-link>
      </div>
    </div>
  </div>



  <div class="segment lg-half padding-right-small margin-bottom-xlarge">
    <div class="shadow padding-medium">
      <div class="whitespace-normal padding-medium text-center">
        <i class="segment center icon icon-xlarge icon-secondary rounded rounded-third rounded-large icon-briefcase"></i>
        <h3 class="text-color-heading text-uppercase text-medium text-semibold text-letter-spacing-large">Offres de missions</h3>
        <p>Dans cette rubrique, tu pourras parcourir les offres de mission publiées par les autres membres mais aussi poster les tiennes.</p>
        <sib-link class="button text-bold text-xsmall text-uppercase color-secondary bordered" next="job-offers">Consulter les offres</sib-link>
      </div>
    </div>
  </div>




  <div class="segment lg-half padding-left-small margin-bottom-xlarge">
    <div class="shadow padding-medium">
      <div class="whitespace-normal padding-medium text-center">
        <i class="segment center icon icon-xlarge icon-secondary rounded rounded-third rounded-large icon-people"></i>
        <h3 class="text-color-heading text-uppercase text-medium text-semibold text-letter-spacing-large">Annuaire des membres</h3>
        <p>L’annuaire te permettra de découvrir les autres membres du réseau, trouver des co-équipiers, des compétences ou un capitaine pour un projet.</p>
        <sib-link class="button text-bold text-xsmall text-uppercase color-secondary bordered" next="members">Parcourir les profils</sib-link>
      </div>
    </div>
  </div>
    



  <div class="segment lg-half padding-right-small margin-bottom-xlarge">
    <div class="shadow padding-medium">
      <div class="whitespace-normal padding-medium text-center">
        <i class="segment center icon icon-xlarge icon-secondary rounded rounded-third rounded-large icon-folder-alt"></i>
        <h3 class="text-color-heading text-uppercase text-medium text-semibold text-letter-spacing-large">Projets</h3>
        <p>L’espace projets te permet de collaborer avec d’autres personnes sur un projet, de nombreuses fonctionnalités dédiées viendront enrichir cette div.</p>
        <sib-link class="button text-bold text-xsmall text-uppercase color-secondary bordered" next="admin-project-create">Créer un projet</sib-link>
      </div>
    </div>
  </div>
</div>