{{ 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">
      <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">{{"Un document ?" | 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">{{ "Maintenant c’est une webapp." | t }}</span></h4>
              
              <p class="my-4 max-w-xl text-sm font-normal md:text-lg">{{ "Brandé pour vous. Hébergé chez nous. Visible par tous." | t }}<br/>{{ "Aucune application à installer." | t }}</p>
              {{ template "hero-btns.html" . }}
              <div class="container h-[50px]"></div>
              <div class="container h-[50px]"></div>
          </div>

          <div class="holder block relative py-4 md:block" style="mask-image: url('/cdn/apps/doc/illus1.webp'); -webkit-mask-image: url('/cdn/apps/doc/illus1.webp')">
              <img src="/cdn/apps/doc/illus1.webp" class="hidden mx-auto dark:inline-block" alt="">
              <img src="/cdn/apps/doc/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>

</section>

</main>



{{ template "footer.html" . }}