{{ 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="mb-2 text-3xl font-bold text-black md:text-3xl lg:text-4xl dark:text-white">{{"Oubliez le papier !" | 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">{{ "Votre carte de visite est votre média personnel." | t }}</span></h4>
                
                <p class="my-4 max-w-xl text-sm font-normal md:text-lg">{{ " Toujours à jour, fini les liens morts et les contacts perdus." | t }}<br/>{{ "Un lien unique. Un contrôle total." | t }}<br/>{{ "Aucune application à installer." | t }}</p>
                <div class="block mt-6">
                    <a href="/about/solo" up-follow class="block px-4 py-2 mb-2 text-xl text-left rounded-xl border-gray-200 dark:border-indigo-600 border-2 dark:text-white dark:bg-black hover:bg-indigo-700 hover:text-white hover:border-indigo-600"><i class="float-right mt-1 fa fa-chevron-right"></i> {{ "Pour les indépendants" | t }}</a>
                    <a href="/about/teams" up-follow class="block px-4 py-2 mb-2 text-xl text-left rounded-xl border-gray-200 dark:border-indigo-600 border-2 dark:text-white dark:bg-black hover:bg-indigo-700 hover:text-white hover:border-indigo-600"><i class="float-right mt-1 fa fa-chevron-right"></i> {{ "Pour les équipes" | t }}</a>
                    <a href="/about/networks" up-follow class="block px-4 py-2 mb-2 text-xl text-left rounded-xl border-gray-200 dark:border-indigo-600 border-2 dark:text-white dark:bg-black hover:bg-indigo-700 hover:text-white hover:border-indigo-600"><i class="float-right mt-1 fa fa-chevron-right"></i> {{ "Pour les réseaux" | t }}</a>
                    <a href="/signup" up-follow class="block px-4 py-2 mb-2 text-xl text-left text-white bg-black rounded-lg border-gray-200 dark:border-indigo-600 border-2 dark:text-black dark:bg-white"><i class="float-right mt-1 fa fa-chevron-right"></i> {{ "Créer ma CARD maintenant" | t }}</a>
                </div>                
            </div>

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

    <div class="container mt-4">
        <ul class="mb-4 ml-2 text-sm list-none text-center text-amber-400 md:block float-dir">
            <li class="inline text-2xl">
                <a href="/reviews" class="font-bold uppercase">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                </a>
            </li>
            <li class="block"><a href="/reviews" class="font-bold uppercase">{{ "Voir les avis client" | t}}</a></li>
        </ul>
        <p>
            <span class="text-sm font-bold text-left md:block md:text-2xl text-slate">{{ "Des millers d'entreprises utilisent nos services" | t }}</span><span class="hidden mb-3 text-sm text-left text-slate md:text-md md:inline-block">, {{ "avec les exigences les plus élevées en matière de protection et de sécurité des données" | t }}</span>.
        </p>
    </div>

    <div class="container my-4">
        <div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[30px]">

            <div class="py-4 mx-auto">
                <a href="/laposte">
                    <img src="https://datamix.media/datamix.io/enseigne/993280b78406d869b0fbaff741bf446d.png" class="h-8" alt="">
                </a>
            </div>

            <div class="py-4 mx-auto">
                <a href="/iad">
                    <img src="https://datamix.media/datamix.io/enseigne/614736951044b71a9fc163e2b1e4ec41.png" class="h-8" alt="">
                </a>
            </div>

            <div class="py-4 mx-auto">
                <a href="/allianz">
                    <img src="https://datamix.media/datamix.io/enseigne/0a0a130954b04c65108c06f502db03da.png" class="block h-8 dark:hidden" alt="">
                    <img src="https://datamix.media/datamix.io/enseigne/0a0a130954b04c65108c06f502db03da.png" style="filter:invert(1) contrast(5) !important" class="hidden h-8 dark:block" alt="">
                </a>
            </div>

            <div class="py-4 mx-auto">
                <a href="/orpi">
                    <img src="https://datamix.media/datamix.io/enseigne/d3b205c430f03536d4f3a4c19877d359.png" class="h-8" alt="">
                </a>
            </div>

            <div class="py-4 mx-auto">
                <a href="/century21">
                    <img src="https://datamix.media/datamix.io/enseigne/c6e164900819cde2aca4a31e904f3dd8.png" class="block h-8 dark:hidden" alt="">
                    <img src="https://datamix.media/datamix.io/enseigne/c6e164900819cde2aca4a31e904f3dd8.png" style="filter:invert(1) !important" class="hidden h-8 dark:block" alt="">
                </a>
            </div>

            <div class="py-4 mx-auto">
                <a href="/optimhome">
                    <img src="https://datamix.media/datamix.io/enseigne/ab678cf3832f7df97ddec2df09f89c88.png" class="h-8" alt="">
                </a>
            </div>

        </div>
        
    </div>

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

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

</section>

{{ template "footerMenuDetails.html" . }}