{{ template "headersMenu.html" . }}


<style>
.border-2x {
border-width: 2px;
}
@media (max-width: 1023px) {
    body, main {
        background: #fff !important;
        text-align: center !important;
    }
    #desktop-playground {
        padding: 96px 0 64px !important;
    }
    #desktop-playground, .desktop-layout, .max-w-md {
        text-align: center !important;
        margin: 0 auto;
        width: 100%;
    }
}
@media (min-width: 1024px) {
    body, main {
        background: #f8f5f1 !important;
    }
    .desktop-sidebar {
        width: 50%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .desktop-main {
        width: 50%;
        margin-left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
}
</style>

<!-- Contenu principal -->
<main id="desktop-playground" class="flex-grow">
    <div class="desktop-layout">
    <!-- Sidebar pour desktop -->
    <div class="flex p-8 text-black bg-white border-r-2 border-black desktop-sidebar">
        <div class="max-w-md">
        <h1 class="mb-4 text-3xl font-bold">{{ "Que souhaitez-vous créer ?" | t }}</h1>
        <p class="mb-4 text-xl">{{ "Choisissez entre créer une nouvelle carte de visite ou un nouveau gabarit." | t }}</p>
        <p class="text-lg">{{ "Sélectionnez l'option qui correspond le mieux à vos besoins actuels." | t }}</p>
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="desktop-main">
        <div class="px-4 w-full max-w-md">
        
        <!-- Boutons de choix -->
        <a href="/create/card" class="block flex flex-col items-center px-6 py-8 mb-4 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
        <i class="mb-4 fas fa-address-card fa-4x"></i>
        <span class="text-xl font-semibold">{{ "Créer une carte" | t }}</span>
        </a>
        <a href="/create/template" class="block flex flex-col items-center px-6 py-8 w-full text-black bg-white rounded-lg border-2 border-black transition duration-300 hover:bg-gray-100">
        <i class="mb-4 fas fa-palette fa-4x"></i>
        <span class="text-xl font-semibold">{{ "Créer un gabarit" | t }}</span>
        </a>
        </div>
    </div>
    </div>
</main>


{{ template "footer.html" . }}