{{ template "headersMenu.html" . }}

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

            <p class="mx-auto max-w-xl text-sm"><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 flex-wrap justify-center p-2 mx-auto text-center bg-white rounded-full shadow w-fit dark:bg-slate-900 dark:shadow-gray-800" id="myTab" data-tabs-toggle="#StarterContent" role="tablist">
                <li role="presentation" class="inline-block">
                    <button class="px-4 py-1 w-full text-sm font-semibold rounded-full transition-all duration-500 ease-in-out hover:text-indigo-600" 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 w-full text-sm font-semibold rounded-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="px-2.5 py-0.5 h-5 text-xs font-bold text-white bg-amber-500 rounded-full 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 grid-flow-row-dense grid-cols-3 grid-rows-3 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-sky-600 font-semibold text-lg">WEB</span>
                            <h6 class="mb-5 font-bold text-indigo-600 uppercase">{{ "100% DIGITAL" | t }}</h6>

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

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Carte de visite" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Modifications illimitées" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Marque blanche à 100%" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Sécurité renforcée" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "RGPD inclus" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | t }}</a>
                        </div>

                        <div class="col-span-2 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="mb-5 font-bold text-indigo-600 uppercase">{{ "Carte physique NFC" | t }}</h6>

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

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Accès simplifié sans smartphone" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Compatible iOS 10.7+ et Android 8+" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | 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-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">SPOT</span>
                            <h6 class="mb-5 font-bold text-indigo-600 uppercase">{{ "100% DIGITAL" | t }}</h6>

                            <div class="flex mt-0 text-3xl">+</div>
                            <div class="flex mb-5">
                                <span class="mb-0 text-4xl font-semibold price">30</span>
                                <span class="text-xl font-semibold">€</span>
                                <span class="self-end pl-1 mx-1 text-xl font-semibold"> {{ "pour le duo de cartes NFC" | t }}</span>
                            </div>

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "La deuxième carte duplicata à -50%" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Pour parer à toutes les situations" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | t }}</a>
                        </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="mb-5 font-bold text-indigo-600 uppercase">{{ "Free" | t }}</h6>

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

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | 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="mb-5 font-bold text-indigo-600 uppercase">{{ "Starter" | t }}</h6>

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

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Enhanced Security" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | 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="mb-5 font-bold text-indigo-600 uppercase">{{ "Business" | t }}</h6>

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

                            <ul class="list-none text-slate-400">
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Full Access" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Source Files" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Free Appointments" | t }}</li>
                                <li class="flex mb-1"><i class="text-xl text-indigo-600 uil uil-check-circle ltr:mr-2 rtl:ml-2"></i> {{ "Enhanced Security" | t }}</li>
                            </ul>
                            <a up-follow href="/start" class="mt-5 text-gray-400 bg-gray-100 rounded-md border-gray-200 hover:bg-black hover:text-black btn hover:border-black dark:bg-slate-900 dark:hover:bg-white dark:hover:text-indigo-600 dark:hover:border-white dark:border-slate-800">{{ "Démarrer" | t }}</a>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    

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

            </div>
        </div>
        
    </div>
</section>

{{ template "footerMenuDetails.html" . }}