{{ template "headersMenu.html" . }}

<main id="hero" class="pt-20" up-main>

  <!-- Section 1 : Accroche -->
  
<section class="overflow-hidden relative py-2" id="home">

  <div class="container relative mx-auto">
      <div class="grid relative grid-cols-1 items-center min-h-screen-250 md:grid-cols-2">
          <div class="ltr:md:mr-6 rtl:md:ml-6">
              <h4 class="mb-2 text-3xl font-bold text-black md:text-3xl lg:text-4xl dark:text-white">{{"Votre carte de visite a évolué !" | t }}<br/><span class="relative text-indigo-600 after:absolute ltr:after:right-0 rtl:after:left-0 ltr:after:left-0 rtl:after:right-0 after:bottom-3 after:-rotate-6 after:h-2 after:w-auto after:rounded-md after:bg-indigo-600/20">{{ "Gérez désormais votre média personnel." | t }}</span></h4>
              
              <p class="my-4 max-w-xl text-sm font-normal md:text-lg">{{ "Pour les freelances comme les grands groupes." | t }}<br/>{{ "Aucune application à installer." | t }}</p>
              {{ template "hero-btns.html" . }}
          </div>

          <div class="holder block relative py-4 md:block">
              <img src="/cdn/apps/studio/illus1.webp" class="hidden mx-auto dark:inline-block" alt="">
              <img src="/cdn/apps/studio/illus1.webp" class="inline-block mx-auto dark:hidden" alt="">
          </div>
          <!--
          <div class="hidden relative py-12 md:block">
              <img src="//datamix.media/fredj-dark.png" class="hidden mx-auto dark:inline-block" alt="">
              <img src="//datamix.media/fredj-light.png" class="inline-block mx-auto dark:hidden" alt="">
          </div>
          -->
      </div>
      
  </div>
  

  <div class="container h-[50px]"></div>

  <div class="container h-[50px]"></div>

</section>

{{ template "footerMenu.html" . }}