{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-28 lg:pt-12">
    <div class="container relative">
        <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 class="grid md:grid-cols-2 grid-cols-1 items-center mb-24 min-h-screen-250 gap-[30px] relative">
            <div class="ltr:md:mr-6 rtl:md:ml-6">
                <h4 class="mb-2 text-2xl font-bold text-black md:text-3xl lg:text-4xl dark:text-white">{{"Scannez" | 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">{{ "tout" | t }}</span> {{ "et laissez faire." | t }}</h4>
                <p class="my-4 max-w-xl text-sm md:text-lg text-slate">{{ "Cartes de visite, flyers, infos sur un mur... Aucune application à installer, vous scannez, le robot regarde ce que c'est et vous digère le résultat !" | t }}</p>
                <div class="flex pb-5">
                    <a href="/signin" up-follow class="flex rounded-lg border-gray-200 dark:border-indigo-600 dark:text-white dark:bg-black text-md backstretch animated btn hover:bg-indigo-600 hover:text-white hover:border-indigo-600">{{ "se connecter" | t }}</a>
                </div>
            </div>

            <div class="hidden relative py-12 md:block">
                <img src="/cdn/design/pics/illustration2.png" 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 mt-12 md:mt-0">
        <li class="block my-1 text-xl text-amber-400 md:hidden">
            <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>
        <ul class="hidden mb-4 text-sm list-none text-center text-amber-400 md:block ltr:float-right rtl:float-left">
            <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="mb-3 text-sm text-left text-slate md:text-md">{{ "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 mt-4 md:mt-8">
        <div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[0px]">

            <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>
    

</section>

{{ template "footerMenu.html" . }}