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

hugo.toml

@@ -82,6 +82,12 @@ pagination = { pagerSize = 6, path = "page" }
     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

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%;
   }

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">
+                <div class="hidden ml-8 lg:flex items-center space-x-4">
-                    {{ with $headerConfig.buttons.signIn }}
+                    {{ with $headerConfig.buttons.demo }}
-                    <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 }}">
+                    <a href="{{ .url | default "#" }}"
-                        {{ .text | default "Sign in" }}
+                       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 }}
+                    {{ 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 border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
+                    <a href="{{ .url | default "#" }}"
-                        {{ .text | default "Sign in" }}
+                       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>