{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-20" id="home">

    <div class="container relative py-2">
        <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="font-bold mb-2 text-3xl text-black md:text-3xl lg:text-4xl dark:text-white">{{"Un seul abonnement" | t }} <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">{{ "pour tous vos besoins numériques quotidiens." | t }}</span></h4>
                
                <p class="my-4 max-w-xl text-lg md:text-2xl">{{ " Une alternative souveraine, modulaire et sans commission pour tous, de l'enseigne multi-agence à l'indépendant." | t }}</p>
            </div>

            <div class="holder block relative py-4 md:block" style="mask-image: url('/cdn/apps/card/illus2.webp'); -webkit-mask-image: url('/cdn/apps/card/illus2.webp')">
                <img src="/cdn/apps/card/illus2.webp" class="hidden mx-auto dark:inline-block" alt="">
                <img src="/cdn/apps/card/illus2.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 class="relative animate-[spin_30s_linear_infinite] -z-1">
            <span class="relative after:absolute ltr:after:left-0 rtl:after:right-0 after:bottom-1/2 after:translate-y-1/2 after:h-2 after:w-8 after:rounded-md after:bg-indigo-600/20 after:z-10"></span>
            <span class="relative after:absolute ltr:after:left-0 rtl:after:right-0 after:bottom-1/2 after:translate-y-1/2 after:rotate-90 after:h-2 after:w-8 after:rounded-md after:bg-indigo-600/20 after:z-10"></span>
        </div>
        
    </div>

</section>

{{ template "footerMenu.html" . }}