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

2026-03-10 11:26:24 +01:00
parent 65813b6520
commit 45b6edadf9
3 changed files with 52 additions and 23 deletions
--- a/hugo.toml
+++ b/hugo.toml
@@ -81,7 +81,13 @@ pagination = { pagerSize = 6, path = "page" }
    background = "header backdrop-blur-sm"
    border = "none"
    menu.linkClass = "text-white hover:text-primary font-bold transition duration-200"
-    
+
+  [params.header.buttons.demo]
+    text = "Démo"
+    url = "http://demo.chill.social/"
+    mobileClass = "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"
+    open_tab = false
+
  # Header Logo
  [params.header.logo]
    src = "/images/logo-darkmode.png"
@@ -114,7 +120,6 @@ pagination = { pagerSize = 6, path = "page" }

  # Social Media Links (optional)
  [params.social]
-    mastodon = "https://mastodon.libre-entreprise.com/@Chill"
    gitlab = "https://gitlab.com/Chill-Projet/chill-bundles"

 # Navigation Menu
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2395,6 +2395,14 @@ body {
  margin-top: auto;
 }

+.mr-8 {
+  margin-right: 2rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
+}
+
 .line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
@@ -2551,6 +2559,10 @@ body {
  width: 100%;
 }

+.w-auto {
+  width: auto;
+}
+
 .\!max-w-none {
  max-width: none !important;
 }
@@ -2615,6 +2627,10 @@ body {
  flex-shrink: 0;
 }

+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
  flex-grow: 1;
 }
@@ -2796,6 +2812,12 @@ body {
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }

+.space-x-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(3rem * var(--tw-space-x-reverse));
+  margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .overflow-hidden {
  overflow: hidden;
 }
@@ -4738,6 +4760,14 @@ body {
    margin-top: 6rem;
  }

+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
  .lg\:w-1\/4 {
    width: 25%;
  }
--- a/themes/chill-theme/layouts/partials/header.html
+++ b/themes/chill-theme/layouts/partials/header.html
@@ -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>