{{ template "headersMenu.html" . }}

<section class="relative mt-8 pb-24">
    <div class="container">
        <div class="grid grid-cols-1 pb-8 text-center py-36">
            <h3 class="md:text-3xl text-2xl font-bold">{{ "Votre tarification" | t }}</h3>

            <p class="text-sm max-w-xl mx-auto"><a href="/{{ if .isConnected }}signout{{ else }}signin{{ end }}">{{ "Pour obtenir un tarif prenant en compte une remise réseau, veuillez vous connecter." | t }}</a></p>
        </div>
        

        <div class="grid grid-cols-1">
            <ul class="inline-block w-fit mx-auto flex-wrap justify-center text-center p-2 bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-full" id="myTab" data-tabs-toggle="#StarterContent" role="tablist">
                <li role="presentation" class="inline-block">
                    <button class="px-4 py-1 text-sm font-semibold rounded-full w-full hover:text-indigo-600 transition-all duration-500 ease-in-out" id="start-month-tab" data-tabs-target="#start-month" type="button" role="tab" aria-controls="start-month" aria-selected="true">Annuel</button>
                </li>
                <li role="presentation" class="inline-block">
                    <button class="px-4 py-1 text-sm font-semibold rounded-full w-full transition-all duration-500 ease-in-out" id="start-year-tab" data-tabs-target="#start-year" type="button" role="tab" aria-controls="start-year" aria-selected="false">Engagement <span class="bg-amber-500 text-white text-xs font-bold px-2.5 py-0.5 rounded-full h-5 ltr:ml-1 rtl:mr-1">Jusqu'à -30%</span></button>
                </li>
            </ul>

            <div id="StarterContent" class="mt-6">
                <div class="" id="start-month" role="tabpanel" aria-labelledby="start-month-tab">
                    <div class="grid lg:grid-cols-3 md:grid-cols-3 mt-8 gap-[30px]">

                        <div class="group border-b-[3px] dark:border-gray-700 p-6 py-8 hover:border-indigo-600 dark:hover:border-indigo-600 transition-all duration-500 ease-in-out hover:scale-105 relative overflow-hidden shadow dark:shadow-gray-800 rounded-md bg-gray-50 dark:bg-slate-900 hover:bg-white dark:hover:bg-slate-800 h-fit">
                            <span class="absolute ltr:-right-11 rtl:-left-11 -top-[10px] ltr:rotate-[45deg] rtl:-rotate-[45deg] w-32 h-16 pt-4 px-2 pb-0 flex items-center justify-center text-white bg-amber-500 font-semibold text-lg">NFC</span>
                            <h6 class="font-bold uppercase mb-5 text-indigo-600">{{ "Carte physique NFC" | t }}</h6>

                            <div class="flex mb-5">
                                <span class="price text-4xl font-semibold mb-0">30</span>
                                <span class="text-xl font-semibold">€</span>
                                <span class="text-xl font-semibold self-end mb-1"> {{ "par carte physique" | t }}</span>
                            </div>

                            <ul class="list-none text-slate-400">
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Accès simplifié sans smartphone" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Compatible iOS 10.7+ et Android 8+" | t }}</li>
                            </ul>
                            <a href="" class="btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">{{ "Commander" | t }}</a>
                        </div>

                        

                        <div class="group p-6 py-8 transition-all duration-500 relative overflow-hidden rounded-md h-fit">
                            <h6 class="font-bold uppercase mb-5 text-indigo-600">{{ "Explication légitime" | t }}</h6>

                            <ul class="list-none text-slate-400">
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Modifications illimitées" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Free Appointments" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Enhanced Security" | t }}</li>
                            </ul>
                        </div>

                        
                    </div>
                    
                </div>

                <div class="hidden" id="start-year" role="tabpanel" aria-labelledby="start-year-tab">
                    <div class="grid lg:grid-cols-3 md:grid-cols-3 mt-8 gap-[30px]">
                        <div class="group border-b-[3px] dark:border-gray-700 p-6 py-8 hover:border-indigo-600 dark:hover:border-indigo-600 transition-all duration-500 ease-in-out hover:scale-105 relative overflow-hidden shadow dark:shadow-gray-800 rounded-md bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-900 h-fit">
                            <h6 class="font-bold uppercase mb-5 text-indigo-600">{{ "Free" | t }}</h6>

                            <div class="flex mb-5">
                                <span class="price text-4xl font-semibold mb-0">30</span>
                                <span class="text-xl font-semibold">€</span>
                                <span class="text-xl font-semibold self-end mb-1">/AN</span>
                            </div>

                            <ul class="list-none text-slate-400">
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                            </ul>
                            <a href="" class="btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">{{ "Signup" | t }}</a>
                        </div>

                        <div class="group border-b-[3px] dark:border-gray-700 p-6 py-8 hover:border-indigo-600 dark:hover:border-indigo-600 transition-all duration-500 ease-in-out hover:scale-105 relative overflow-hidden shadow dark:shadow-gray-800 rounded-md bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-900 h-fit">
                            <h6 class="font-bold uppercase mb-5 text-indigo-600">{{ "Starter" | t }}</h6>

                            <div class="flex mb-5">
                                <span class="text-xl font-semibold">$</span>
                                <span class="price text-4xl font-semibold mb-0">39</span>
                                <span class="text-xl font-semibold self-end mb-1">/mo</span>
                            </div>

                            <ul class="list-none text-slate-400">
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Enhanced Security" | t }}</li>
                            </ul>
                            <a href="" class="btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">{{ "Buy Now" | t }}</a>
                        </div>

                        <div class="group border-b-[3px] border-indigo-600 p-6 py-8 transition-all duration-500 ease-in-out hover:scale-105 relative overflow-hidden shadow dark:shadow-gray-800 rounded-md bg-white dark:bg-slate-900 h-fit">
                            <span class="absolute ltr:-right-11 rtl:-left-11 -top-[10px] ltr:rotate-[45deg] rtl:-rotate-[45deg] w-32 h-16 pt-4 px-2 pb-0 flex items-center justify-center text-white bg-amber-500 font-semibold text-lg">{{ "Best" | t }}</span>
                            <h6 class="font-bold uppercase mb-5 text-indigo-600">{{ "Business" | t }}</h6>

                            <div class="flex mb-5">
                                <span class="text-xl font-semibold">$</span>
                                <span class="price text-4xl font-semibold mb-0">274</span>
                                <span class="text-xl font-semibold self-end mb-1">/mo</span>
                            </div>

                            <ul class="list-none text-slate-400">
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Free Appointments" | t }}</li>
                                <li class="mb-1 flex"><i class="uil uil-check-circle text-indigo-600 text-xl ltr:mr-2 rtl:ml-2"></i> {{ "Enhanced Security" | t }}</li>
                            </ul>
                            <a href="" class="btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">{{ "Try it Now" | t }}</a>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    

    <div class="container md:mt-24 mt-16">
        <div class="grid grid-cols-1 text-center">
            <h6 class="text-indigo-600 text-sm font-bold uppercase">{{ "Projets spécifiques - plus de 10 cartes" | t }}</h6>
            <h3 class="mb-1 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">{{ "Contactez-nous pour toute question !" | t }}</h3>
            <div class="mb-6 uppercase">
                <a href="//calendly.com/_pm" class="btn bg-indigo-600 hover:bg-indigo-600 border-emerald-600 hover:border-emerald-600 text-white rounded-md  mt-4"><i class="uil uil-phone"></i> {{ "Prendre RDV" | t }}</a>
                <a href="mailto:support@card.pm" class="btn bg-orange-600 hover:bg-orange-600 border-orange-600 hover:border-orange-600 text-white rounded-md mt-4"><i class="uil uil-envelope"></i> {{ "Envoyez un email" | t }}</a>
                <a href="/start" class="btn hover:border-indigo-600 bg-white rounded-md mt-4">{{ "Commander" | t }} <i class="uil uil-arrow-right"></i></a>

            </div>
        </div>
        
    </div>
    
    <div class="container mt-24">
        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
            <div class="flex">
                <div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
                    <i class="uil uil-water"></i>
                </div>

                <div class="content ltr:ml-6 rtl:mr-6">
                    <a href="" class="text-lg font-medium hover:text-indigo-600">{{ "Serveurs sécurisés" | t }}</a>
                    <p class="text-slate-400 mt-3">{{ "Nous opérons notre propre infrastructure au sein d'OVH" | t }}</p>
                </div>
            </div>
            <!--end feature content-->

            <div class="flex">
                <div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
                    <i class="uil uil-dropbox"></i>
                </div>

                <div class="content ltr:ml-6 rtl:mr-6">
                    <a href="" class="text-lg font-medium hover:text-indigo-600">{{ "Confidentialité garantie" | t }}</a>
                    <p class="text-slate-400 mt-3">{{ "Vos données restent les vôtres du début à la fin du processus" | t }}</p>
                </div>
            </div>
            <!--end feature content-->

            <div class="flex">
                <div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
                    <i class="uil uil-focus-target"></i>
                </div>

                <div class="content ltr:ml-6 rtl:mr-6">
                    <a href="" class="text-lg font-medium hover:text-indigo-600">{{ "Personnalisation granulaire" | t }}</a>
                    <p class="text-slate-400 mt-3">{{ "Gestion dédiée aux organisations complexes, réseaux, pluri-enseigne" | t }}</p>
                </div>
            </div>
            <!--end feature content-->
        </div>
        
    </div>
</section>

{{ template "footer.html" . }}