From 98efdb44aca0d78f811dc7637ad13e5f533375ff Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Sat, 23 Aug 2025 22:04:21 +0200
Subject: [PATCH] Modify theme for light one

---
 app/views/components/_header.html.erb  | 218 +++++++++++++------------
 app/views/layouts/application.html.erb |   6 +-
 app/views/pages/home.html.erb          |  16 +-
 3 files changed, 120 insertions(+), 120 deletions(-)

diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb
index 329b0bb..5c87f7e 100644
--- a/app/views/components/_header.html.erb
+++ b/app/views/components/_header.html.erb
@@ -1,118 +1,122 @@
-<nav x-data="{ open: false }" class="border-b border-purple-700">
-  <!-- Primary Navigation Menu -->
-  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex justify-between h-16">
-      <div class="flex">
-        <!-- Logo -->
-        <div class="shrink-0 flex items-center">
-          <%= link_to Rails.application.config.app_name, "/", class: "text-xl font-bold text-white" %>
-        </div>
-
-        <!-- Navigation Links -->
-        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
-          <%= link_to "Soirées et afterworks", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-          <%= link_to "Concerts", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-        </div>
-      </div>
-
-      <!-- Authentication Links -->
-      <% if user_signed_in? %>
-        <!-- Settings Dropdown -->
-        <div class="hidden sm:flex sm:items-center sm:ms-6">
-          <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
-            <div @click="open = ! open">
-              <button class="bg-purple-700 text-white border border-purple-800 font-medium py-2 px-4 rounded-lg hover:bg-purple-800 transition-colors duration-200 focus-ring">
-                <div><%= current_user.email %></div>
-                <div class="ms-1">
-                  <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                  </svg>
+<header class="shadow-sm border-b border-neutral-200">
+    <div class="bg-gray-800">
+        <nav x-data="{ open: false }" class="bg-blue border-b border-purple-700">
+        <!-- Primary Navigation Menu -->
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+            <div class="flex">
+                <!-- Logo -->
+                <div class="shrink-0 flex items-center">
+                <%= link_to Rails.application.config.app_name, "/", class: "text-xl font-bold text-white" %>
+                </div>
+
+                <!-- Navigation Links -->
+                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
+                <%= link_to "Soirées et afterworks", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+                <%= link_to "Concerts", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
                 </div>
-              </button>
             </div>
 
-            <div x-show="open"
-                 x-transition:enter="transition ease-out duration-200"
-                 x-transition:enter-start="opacity-0 scale-95"
-                 x-transition:enter-end="opacity-100 scale-100"
-                 x-transition:leave="transition ease-in duration-75"
-                 x-transition:leave-start="opacity-100 scale-100"
-                 x-transition:leave-end="opacity-0 scale-95"
-                 class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0"
-                 style="display: none;"
-                 @click="open = false">
-              <div class="rounded-md ring-1 ring-purple-700 py-1 bg-purple-600">
-                <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
-                <%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+            <!-- Authentication Links -->
+            <% if user_signed_in? %>
+                <!-- Settings Dropdown -->
+                <div class="hidden sm:flex sm:items-center sm:ms-6">
+                <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+                    <div @click="open = ! open">
+                    <button class="bg-purple-700 text-white border border-purple-800 font-medium py-2 px-4 rounded-lg hover:bg-purple-800 transition-colors duration-200 focus-ring">
+                        <div><%= current_user.email %></div>
+                        <div class="ms-1">
+                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                        </div>
+                    </button>
+                    </div>
+
+                    <div x-show="open"
+                        x-transition:enter="transition ease-out duration-200"
+                        x-transition:enter-start="opacity-0 scale-95"
+                        x-transition:enter-end="opacity-100 scale-100"
+                        x-transition:leave="transition ease-in duration-75"
+                        x-transition:leave-start="opacity-100 scale-100"
+                        x-transition:leave-end="opacity-0 scale-95"
+                        class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0"
+                        style="display: none;"
+                        @click="open = false">
+                    <div class="rounded-md ring-1 ring-purple-700 py-1 bg-purple-600">
+                        <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+                        <%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+
+                        <%= link_to "Déconnexion", destroy_user_session_path,
+                            data: {
+                            controller: "logout",
+                            action: "click->logout#signOut",
+                            logout_url_value: destroy_user_session_path,
+                            login_url_value: new_user_session_path,
+                            turbo: false
+                            },
+                            class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            <% else %>
+                <!-- Login/Register Links -->
+                <div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
+                <%= link_to "S'inscrire", new_user_registration_path, class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+                <%= link_to "Se connecter", new_user_session_path, class: "bg-white text-purple-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-purple-100 transition-all duration-200" %>
+                </div>
+            <% end %>
+
+            <!-- Hamburger -->
+            <div class="-me-2 flex items-center sm:hidden">
+                <button @click="open = ! open" class="p-2 rounded-md text-purple-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                </button>
+            </div>
+            </div>
+        </div>
+
+        <!-- Responsive Navigation Menu -->
+        <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
+            <div class="pt-2 pb-3 space-y-1 bg-purple-600">
+            <%= link_to "Soirées et afterworks", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+            <%= link_to "Concerts", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+            </div>
+
+            <!-- Responsive Settings Options -->
+            <div class="pt-4 pb-1 border-t border-purple-700 bg-purple-600">
+            <% if user_signed_in? %>
+                <div class="px-4">
+                <div class="font-medium text-base text-white"><%= current_user.email %></div>
+                <div class="font-medium text-sm text-purple-200"><%= current_user.email %></div>
+                </div>
+
+                <div class="mt-3 space-y-1">
+                <%= link_to "Mon profil", edit_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+                <%= link_to "Mes réservations", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
 
                 <%= link_to "Déconnexion", destroy_user_session_path,
                     data: {
-                      controller: "logout",
-                      action: "click->logout#signOut",
-                      logout_url_value: destroy_user_session_path,
-                      login_url_value: new_user_session_path,
-                      turbo: false
+                        controller: "logout",
+                        action: "click->logout#signOut",
+                        logout_url_value: destroy_user_session_path,
+                        login_url_value: new_user_session_path,
+                        turbo: false
                     },
-                    class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+                    class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
                 </div>
-              </div>
+            <% else %>
+                <div class="mt-3 space-y-1">
+                <%= link_to "S'inscrire", new_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+                <%= link_to "Se connecter", new_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+                </div>
+            <% end %>
             </div>
         </div>
-      <% else %>
-        <!-- Login/Register Links -->
-        <div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
-          <%= link_to "S'inscrire", new_user_registration_path, class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-          <%= link_to "Se connecter", new_user_session_path, class: "bg-white text-purple-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-purple-100 transition-all duration-200" %>
-        </div>
-      <% end %>
-
-      <!-- Hamburger -->
-      <div class="-me-2 flex items-center sm:hidden">
-        <button @click="open = ! open" class="p-2 rounded-md text-purple-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-            <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-            <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
+        </nav>
     </div>
-  </div>
-
-  <!-- Responsive Navigation Menu -->
-  <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
-    <div class="pt-2 pb-3 space-y-1 bg-purple-600">
-      <%= link_to "Soirées et afterworks", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-      <%= link_to "Concerts", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-    </div>
-
-    <!-- Responsive Settings Options -->
-    <div class="pt-4 pb-1 border-t border-purple-700 bg-purple-600">
-      <% if user_signed_in? %>
-        <div class="px-4">
-          <div class="font-medium text-base text-white"><%= current_user.email %></div>
-          <div class="font-medium text-sm text-purple-200"><%= current_user.email %></div>
-        </div>
-
-        <div class="mt-3 space-y-1">
-          <%= link_to "Mon profil", edit_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-          <%= link_to "Mes réservations", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-
-          <%= link_to "Déconnexion", destroy_user_session_path,
-              data: {
-                controller: "logout",
-                action: "click->logout#signOut",
-                logout_url_value: destroy_user_session_path,
-                login_url_value: new_user_session_path,
-                turbo: false
-              },
-              class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-        </div>
-      <% else %>
-        <div class="mt-3 space-y-1">
-          <%= link_to "S'inscrire", new_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-          <%= link_to "Se connecter", new_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</nav>
+</header>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 71f7476..c78f65a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -25,11 +25,7 @@
 
   <body class="h-full font-sans text-neutral-900 antialiased">
     <div class="min-h-full">
-      <header class="bg-purple shadow-sm border-b border-neutral-200">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-          <%= render "components/header" %>
-        </div>
-      </header>
+        <%= render "components/header" %>
 
       <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <%= yield %>
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index 032ca65..6dc15b2 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -1,5 +1,5 @@
 <!-- Hero Section -->
-<section class="relative bg-gradient-to-br from-purple-100 via-pink-50 to-indigo-100 min-h-[70vh] flex items-center">
+<section class="relative bg-neutral-50 min-h-[70vh] flex items-center">
   <div class="absolute inset-0 bg-white bg-opacity-60"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
     <h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
@@ -88,21 +88,21 @@
         </div>
         <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
       </div>
-      
+
       <div class="text-center">
         <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
         </div>
         <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
       </div>
-      
+
       <div class="text-center">
         <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
         </div>
         <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
       </div>
-      
+
       <div class="text-center">
         <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
@@ -118,13 +118,13 @@
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="bg-gradient-to-br from-neutral-50 to-white border border-neutral-200 rounded-2xl p-8 shadow-lg">
       <h2 class="text-3xl font-bold text-neutral-900 text-center mb-8">Trouvez votre prochaine soirée</h2>
-      
+
       <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
         <div>
           <label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
           <input type="date" class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
         </div>
-        
+
         <div>
           <label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
           <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
@@ -135,7 +135,7 @@
             <option value="vip">Événements VIP</option>
           </select>
         </div>
-        
+
         <div>
           <label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
           <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
@@ -147,7 +147,7 @@
             <option value="electro">Électro</option>
           </select>
         </div>
-        
+
         <button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
           Rechercher
         </button>