{{ template "headersMenu.html" . }}
{{ $isMobile := .isMobile }}

<section class="flex relative justify-center items-center py-40 lg:h-screen" id="home">
    <div class="container">
        <div class="col-span-12 lg:col-span-4 hover:col-span-6">
            <div class="text-xl">{{ "Créer..." | t }}</div>
        </div>
        <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] mt-10 items-center">
			<div class="col-span-6 lg:col-span-4">
				<a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/create/code" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-400 hover:border-black shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 hover:bg-indigo-600 hover:text-white dark:border-white hover:border-indigo-700">
					<i class="mt-5 fa-thin fa-4x fa-qrcode"></i>
					<div class="mt-3 content">
						<h2 class="text-xl font-semibold title">{{ "Un tag NFC" | t }}</h2>
					</div>
				</a>
			</div>
			<div class="col-span-6 lg:col-span-4">
				<a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/create/list" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-400 hover:border-black shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 hover:bg-indigo-600 hover:text-white dark:border-white hover:border-indigo-700">
					<i class="mt-5 fa-thin fa-4x fa-list"></i>
					<div class="mt-3 content">
						<h2 class="text-xl font-semibold title">{{ "Une série de codes" | t }}</h2>
					</div>
				</a>
			</div>
			<div class="col-span-6 lg:col-span-4">
				<a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/shop" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-400 hover:border-black shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 hover:bg-indigo-600 hover:text-white dark:border-white hover:border-indigo-700">
					<i class="mt-5 fa-thin fa-4x fa-cart-shopping"></i>
					<div class="mt-3 content">
						<h2 class="text-xl font-semibold title">{{ "Une commande" | t }}</h2>
					</div>
				</a>
			</div>
        </div>
    </div>
</section>

{{ template "footer.html" . }}