{{ template "headersMenu.html" . }}

<section class="relative pt-28 min-h-screen " id="home">

    <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 relative grid-cols-1 items-center mb-24 md:grid-cols-2 min-h-screen-250">
            <div class="px-2">
				<div>
					<h4 class="mb-2 text-3xl font-bold text-black md:text-3xl lg:text-4xl dark:text-white">
					<span class="block text-sm font-semibold uppercase">{{ "Nouveau" | t }}</span>
					{{ "Découvrez 'SPOT'" | t }}</h4>
		
					<p class="mb-0 text-3xl font-bold text-indigo-600">{{ "Mettez votre carte de visite en évidence chez vos commerçants et partenaires locaux !" | t }}</p>
				</div>
				<div class="relative pb-12">
					<img src="https://next.card.pm/images/spot.png" class="inline-block mx-auto" alt="">
				</div>
            </div>

			<div class="relative px-2 py-12">
				<ul class="mb-6" style="list-style:square;list-style-position: outside;list-style-type: disclosure-closed;margin: 0 0 0 16px;">
					<li class="text-xl">{{ "'SPOT' remplace les tas de cartes de visite en papier chez vos commerçants !" | t }}</li>
					<li>{{ "Dynamisez votre présence locale" | t }}</li>
					<li>{{ "Des cartes personnalisées avec votre logo et vos couleurs" | t }}</li>
					<li>{{ "Un adhésif puissant au verso pour éviter qu’on ne la retire facilement" | t }}</li>
					<li>{{ "Une puce NFC verrouillée en écriture et un QR code réaffectable" | t }}</li>
					<li class="mt-2 text-xl">{{ "Des statistiques par commerçant" | t }}</li>
					<li>{{ "Une interface pour gérer vos 'SPOTs'" | t }}</li>
					<li class="mt-2 text-xl">{{ "Un tarif dégressif au volume" | t }}</li>
					<li class="mt-2 text-xl"><a href="#" class="text-blue-600 underline">{{ "'SPOT' en vidéo cliquez ici" | t }}</a></li>
				</ul>
				<div class="mb-6">
					<label for="spotCount" class="block mb-2 text-lg">{{ "Combien de spots ?" | t }}</label>
					<input type="number" id="spotCount" name="spotCount" min="0" value="0" class="p-2 text-lg text-center text-black bg-white rounded-md border-2 border-gray-300 dark:bg-black dark:text-white">
				</div>
			</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>
    
</section>

{{ template "footer.html" . }}