{{ template "headers.html" . }}


<!-- Start Navbar -->
<nav id="topnav" class="defaultscroll is-sticky" up-nav>
	<div class="{{ if .fluid }}container-fluid{{ else }}container{{ end }}">
		<a class="block fixed lg:hidden logo sub-menu-item" href="/">
			<img src="/cdn/design/logos/{{ .domain }}-black.png" class="inline-block h-5 dark:hidden" alt="">
			<img src="/cdn/design/logos/{{ .domain }}-white.png" class="hidden h-5 dark:inline-block" alt="">
		</a>
		<ul class="navigation">
			{{ if .isConnected }}
			{{ "btns"  | menuauth }}
			{{ else }}
			{{ "btns"  | menu }}
			{{ end }}
		</ul>
		<div id="navigation">
			<ul class="navigation-menu">
				<li class="hidden lg:block logo" style="margin:0 !important">
					<a href="/{{ if .isConnected }}dashboard{{ end }}" class="logo" style="padding:20px 0 0 !important">
						<img src="/cdn/design/logos/{{ .domain }}-black.png" class="inline-block h-6 dark:hidden" alt="">
						<img src="/cdn/design/logos/{{ .domain }}-white.png" class="hidden h-6 dark:inline-block" alt="">
					</a>
				</li>
				<li class="menu-item">
				{{ if .isConnected }}
					{{ .domain | menuauth }}
					{{ else }}
					{{ .domain | menu }}
					{{ end }}
				</li>
				{{ if .isConnected }}
				{{ else }}
				<li class="menu-item">
					<a href="/signin" up-follow>{{ "Démarrer" | t }} </a>
				</li>
				<li class="menu-item">
					<a href="/help" up-follow>{{ "Support" | t }} </a>
				</li>
				{{ end }}
			</ul>
		</div>
	</div>
</nav>

<section class="flex relative justify-center items-center py-32 min-h-screen" id="home">
    <div class="mx-auto mt-12 container-fluid hover:col-span-6">

        <div class="grid grid-cols-1 gap-6 px-8 pt-24 md:grid-cols-2 lg:grid-cols-3">

        <!-- Carte stats dynamique -->
        <a href="/list?v=cards" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-3xl font-bold">45 149</h2>
        <p class="mt-1 text-sm text-gray-500 uppercase group-hover:text-white">Cartes de visite</p>
        <p class="mt-4 text-xs">Consulter, éditer, livrer</p>
        </a>
    
        <a href="/list/trash" class="p-6 text-red-700 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-2xl font-bold">1 849</h2>
        <p class="mt-1 text-sm uppercase group-hover:text-white">Cartes dans la corbeille</p>
        <p class="mt-4 text-xs">Restaurer ou supprimer</p>
        </a>
    
        <a href="/go/to/track" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Statistiques</h2>
        <p class="mt-2 text-xs">Consultations & téléchargements</p>
        </a>
    
        <!-- Groupe Personnalisation -->
        <a href="/design" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Gabarits</h2>
        <p class="mt-2 text-xs">Éditez vos chartes graphiques</p>
        </a>
    
        <a href="/go/to/studio" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Enseignes</h2>
        <p class="mt-2 text-xs">Options marque blanche</p>
        </a>
    
        <!-- NFC -->
        <a href="/go/to/scan" class="p-6 text-green-800 bg-green-100 rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-green-700 hover:text-white">
        <h2 class="text-xl font-semibold">NFC Activé</h2>
        <p class="mt-2 text-xs">Suivi de vos tags</p>
        </a>
    
        <!-- CRM -->
        <a href="/go/to/helpdesk" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Messagerie</h2>
        <p class="mt-2 text-xs">Messages reçus</p>
        </a>
    
        <a href="/go/to/leads" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Leads</h2>
        <p class="mt-2 text-xs">Contacts collectés</p>
        </a>
    
        <!-- Data -->
        <a href="/go/to/builders" class="p-6 bg-white rounded-xl shadow-md transition-colors duration-300 cursor-pointer group hover:bg-black hover:text-white">
        <h2 class="text-xl font-semibold">Vos données</h2>
        <p class="mt-2 text-xs">Importer, Exporter, API</p>
        </a>
    
    </main>
    

        <div class="text-center ltr:md:text-left rtl:md:text-right">
            <div id="searchbar" class="container mt-6 mb-3 border-b-[3px] bg-white dark:bg-gray-800">
                <form up-submit class="relative w-full" method="get" action="/list">
                    <span class="absolute top-6"><i class="fa fa-search"></i></span>
                    <input type="text" name="q" value="{{ .q }}" class="p-6 w-full font-bold text-black bg-transparent border-0 outline-none dark:text-white" placeholder="{{ "Rechercher..." | t }}" />
                    <button type="submit" class="absolute top-6 text-black rounded-full border-black btn ltr:right-0 rtl:left-0 btn-icon dark:border-white dark:text-white hover:bg-indigo-600 hover:text-white"><i class="fa fa-refresh"></i></button>
                </form>
            </div>
        </div>
    </div>
</section>

<section class="flex relative justify-center items-center py-32 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="/list" 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-id-card"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Cartes de visite" | 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">{{ "Cartes de visite" | t }}</span>
                                    <p class="p-3 text-white">{{ "Consultez, partagez, annotez, éditez" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/design" 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-pen-paintbrush fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Gabarits" | 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">{{ "Gabarits" | t }}</span>
                                    <p class="p-3 text-white">{{ "Editez vos chartes graphiques" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="md:col-span-6 lg:col-span-3">
                        <a href="/branding" 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-arrow-right-to-city fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Enseignes" | 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">{{ "Enseignes" | t }}</span>
                                    <p class="p-3 text-white">{{ "Options de marque blanche" | 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="/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="/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="/data" 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-server fa-4x"></i>
                            <div class="mt-3 content">
                                <h2 class="text-xl font-semibold title">{{ "Données" | 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">{{ "Données" | t }}</span>
                                    <p class="p-3 text-white">{{ "Importer, Exporter, API" | 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>
    <section class="flex relative justify-center items-center py-32 min-h-screen" id="home">
        <style>
            .card {
                transition: transform 0.3s ease-in-out;
            }
            .card:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
        </style>
        <div class="container mx-auto my-6">
            <div class="p-5 mb-6 bg-white rounded-lg shadow">
                <div class="flex items-center space-x-4">
                    <img src="https://source.unsplash.com/100x60/?technology" alt="Card Logo" class="rounded">
                    <div>
                        <h2 class="text-lg font-semibold">Cédric Languin</h2>
                        <p class="text-gray-600">{{ "Direction technique" | t }}</p>
                    </div>
                </div>
            </div>
    
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Statistiques" | t }}</h3>
                    <p class="text-gray-600">{{ "Vues, téléchargements" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">59545 {{ "Utilisateurs" | t }}</h3>
                    <p class="text-gray-600">{{ "Profils, droits et permissions, logs" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">42153 {{ "Cartes de Visite" | t }}</h3>
                    <p class="text-gray-600">{{ "Consulter, éditer, livrer" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">6762 {{ "Gabarits" | t }}</h3>
                    <p class="text-gray-600">{{ "Editez vos chartes graphiques" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">237 {{ "Enseignes" | t }}</h3>
                    <p class="text-gray-600">{{ "Options de marque blanche" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Facturation" | t }}</h3>
                    <p class="text-gray-600">{{ "Licences, devis, factures" | t }}</p>
                </div>
                <div class="p-5 bg-white rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Vos Données" | t }}</h3>
                    <p class="text-gray-600">{{ "Importer, Exporter, API" | t }}</p>
                </div>
                <div class="p-5 bg-green-200 rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Opportunités" | t }}</h3>
                    <p class="text-gray-600">{{ "Devis en attente" | t }}</p>
                </div>
                <div class="p-5 bg-green-200 rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Activité" | t }}</h3>
                    <p class="text-gray-600">{{ "Suivi des commandes, etc..." | t }}</p>
                </div>
                <div class="p-5 bg-gray-200 rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">{{ "Technique" | t }}</h3>
                    <p class="text-gray-600">{{ "Automatisations, chantiers en cours" | t }}</p>
                </div>
                <div class="p-5 bg-yellow-300 rounded-lg shadow card">
                    <h3 class="font-semibold text-gray-900">La Poste</h3>
                    <p class="text-gray-600">{{ "Aucune expédition NFC" | t }}</p>
                </div>
            </div>
        </div>



</section>

{{ template "footer.html" . }}