{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-36 pb-16 md:pt-44 md:pb-24">
    <div class="container relative">
        <div class="grid md:grid-cols-2 grid-cols-1 items-center mt-8 gap-[30px] relative">
            <div class="ltr:md:mr-6 rtl:md:ml-6">
                <h4 class="mb-2 text-5xl font-bold text-black dark:text-white">{{ "Ayez votre" | 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">{{ "QR Code" | t }}</span> {{ "toujours sur vous" | t }}</h4>
                <p class="my-4 max-w-xl text-lg text-slate">{{ "Le QR Code est imprimé sur la carte, et le partage de votre lien devient instantané lors d'une rencontre avec un interlocuteur équipé en NFC." | t }}</p>
                <p class="max-w-xl text-sm text-slate-400">{{ "Notre approche est de privilégier l'approche dématérialisée à 100%." | t }}<br/><a href="/start/nfc">{{ "Nous proposons des raccourcis NFC pour les forces majeures." | t }}</a></p>
                <div class="flex mt-4">
                    <a href="/start/nfc" class="flex text-2xl text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700">{{ "Créer" | t }} <i class="uil uil-arrow-right"></i></a>
                </div>
            </div>

            <div class="relative">
                <img src="https://beta.scan.pm/cdn/apps/scan/images/image11.png" class="mx-auto w-full" alt="">

                <div class="overflow-hidden after:content-[''] after:absolute after:h-10 after:w-10 after:bg-indigo-600/20 after:top-0 ltr:after:left-0 rtl:after:right-0 after:-z-1 after:rounded-lg after:animate-[spin_10s_linear_infinite]"></div>

                <div class="flex absolute bottom-16 justify-between items-center p-4 m-3 w-56 bg-white rounded-lg shadow-md ltr:lg:-right-7 ltr:-right-5 rtl:lg:-left-7 rtl:-left-5 dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="block"><p class="text-xl font-bold"><span class="counter-value" data-target="256">0</span> {{ "partages" | t }}</p></div>
                    <div class="block text-green-600"><i class="uil uil-arrow-growth"></i> +47%</div>
                </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>

</section>

{{ template "footer.html" . }}