feat: Ajouter un bouton de démo dans l'en-tête et améliorer la gestion des classes CSS pour la réactivité

This commit is contained in:
Boris Waaub
2026-03-10 11:26:24 +01:00
parent 65813b6520
commit 45b6edadf9
3 changed files with 52 additions and 23 deletions
+15 -21
View File
@@ -8,7 +8,7 @@
<!-- Logo and Title -->
<a href="{{ "/" | relLangURL }}" class="flex items-center space-x-4">
{{ with $headerConfig.logo }}
<img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-12{{ end }}">
<img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-12{{ end }} w-auto object-contain">
{{ else }}
<span class="text-3xl font-bold text-gray-900">{{ .Site.Title }}</span>
{{ end }}
@@ -18,7 +18,7 @@
</a>
<!-- Navigation -->
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
<div class="hidden ml-8 lg:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
{{ range .Site.Menus.main }}
{{ if .Params.has_submenu }}
<div class="relative group">
@@ -47,23 +47,20 @@
<!-- CTA Buttons -->
{{ if not $headerConfig.hideButtons }}
<div class="hidden md:flex items-center space-x-4">
{{ with $headerConfig.buttons.signIn }}
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
{{ .text | default "Sign in" }}
<div class="hidden ml-8 lg:flex items-center space-x-4">
{{ with $headerConfig.buttons.demo }}
<a href="{{ .url | default "#" }}"
class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-400 hover:scale-105{{ end }}"
{{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
{{ .text | default "Démo" }}
</a>
{{ end }}
{{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }}
</a>
{{ end }}
</div>
{{ end }}
<!-- Mobile Menu Toggle -->
<div class="md:hidden">
<div class="lg:hidden">
<label for="nav-toggle" class="p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors cursor-pointer">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
@@ -74,7 +71,7 @@
</div>
<!-- Mobile Menu -->
<div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg max-h-[calc(100vh-5rem)] overflow-y-auto">
<div class="nav-content lg:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg max-h-[calc(100vh-5rem)] overflow-y-auto">
<div class="w-full px-6 py-4">
{{ range .Site.Menus.main }}
{{ if .Params.has_submenu }}
@@ -110,17 +107,14 @@
{{ if not $headerConfig.hideButtons }}
<div class="pt-4 space-y-4">
{{ with $headerConfig.buttons.signIn }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
{{ .text | default "Sign in" }}
{{ with $headerConfig.buttons.demo }}
<a href="{{ .url | default "#" }}"
class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-400 hover:scale-105{{ end }}"
{{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
{{ .text | default "Démo" }}
</a>
{{ end }}
{{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }}
</a>
{{ end }}
</div>
{{ end }}
</div>