{{ template "headersMenu.html" . }}

<section class="flex relative justify-center items-center py-28 min-h-screen" id="home">
    <div class="container">
          
        <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] mt-10 items-center">
            <div class="col-span-12 lg:col-span-12">
                <div class="grid md:grid-cols-12 gap-[30px] items-center">
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/import" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-4x fa-file-plus"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Importer" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Importer" | t }}</span>
                                    <p class="p-3 text-white">{{ "Fichiers Excel ou CSV" | t }}<br/>{{ "Fichiers ZIP de données" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/api" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-4x fa-server"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "API" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "API" | t }}</span>
                                    <p class="p-3 text-white">{{ "Automatisez votre workflow" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/webhooks" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-robot fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Webhooks" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Webhooks" | t }}</span>
                                    <p class="p-3 text-white">{{ "Contrôle des événements" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/export" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-file-download fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Exporter" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Exporter" | t }}</span>
                                    <p class="p-3 text-white">{{ "Télécharger vos données" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/users" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-users fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Utilisateurs" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Utilisateurs" | t }}</span>
                                    <p class="p-3 text-white">{{ "Profils, livraisons, droits et permissions, logs" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/deploy" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-magnifying-glass-chart fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Déploiement" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Déploiement" | t }}</span>
                                    <p class="p-3 text-white">{{ "Suivi de l'adoption par les utilisateurs" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/stats" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-chart-line fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Statistiques" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Statistiques" | t }}</span>
                                    <p class="p-3 text-white">{{ "Déploiement, vues, téléchargements" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/admin" up-follow class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 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-gray-800 dark:border-white hover:border-indigo-700">
                            <i class="mt-5 fa-thin fa-file-invoice fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Facturation" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <div class="absolute inset-0 bg-indigo-600"></div>
                                </div>
                                <div class="absolute top-0 right-0 left-0 mt-12">
                                    <span class="text-xl font-bold text-white">{{ "Facturation" | t }}</span>
                                    <p class="p-3 text-white">{{ "Licences, devis, factures" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

{{ template "footer.html" . }}