From 6d95f02dee7fbb47628c52e226c4e54f87de8f66 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane.baali99@gmail.com>
Date: Tue, 18 Nov 2025 23:49:25 +0100
Subject: [PATCH] feat: redesign header and footer with green/orange theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated Header:
- Dark green gradient background (#1a4d2e to #2d5a3d)
- White text with orange hover (#f59e0b)
- Orange "Participer" button instead of green
- Updated menu labels to match homepage design

Updated Footer:
- Dark green gradient background matching header
- Orange section titles (#f59e0b)
- Added trust badges (Paiement sécurisé, Livraison rapide, RGPD)
- Consistent branding with homepage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/Footer.tsx | 19 ++++++++++++-------
 components/Header.tsx | 34 ++++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 46b8c96..60232df 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -8,7 +8,7 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary-700 text-white">
+    <footer className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] text-white">
       {/* Main Footer */}
       <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -49,8 +49,8 @@ export default function Footer() {
 
           {/* Quick Links */}
           <div>
-            <h3 className="text-lg font-semibold text-white mb-4">
-              Liens rapides
+            <h3 className="text-lg font-semibold text-[#f59e0b] mb-4">
+              NAVIGATION
             </h3>
             <ul className="space-y-2">
               <li>
@@ -98,7 +98,7 @@ export default function Footer() {
 
           {/* Legal */}
           <div>
-            <h3 className="text-lg font-semibold text-white mb-4">Légal</h3>
+            <h3 className="text-lg font-semibold text-[#f59e0b] mb-4">LÉGAL</h3>
             <ul className="space-y-2">
               <li>
                 <Link
@@ -145,7 +145,7 @@ export default function Footer() {
 
           {/* Contact */}
           <div>
-            <h3 className="text-lg font-semibold text-white mb-4">Contact</h3>
+            <h3 className="text-lg font-semibold text-[#f59e0b] mb-4">CONTACT</h3>
             <ul className="space-y-3 text-sm text-white/80">
               <li className="flex items-start gap-2">
                 <span className="mt-1">📍</span>
@@ -183,12 +183,17 @@ export default function Footer() {
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-white/10 bg-primary-700">
+      <div className="border-t border-white/10 bg-[#1a4d2e]/50">
         <div className="container mx-auto px-4 py-6">
-          <div className="flex items-center justify-center text-sm">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
             <p className="text-white/80">
               © {currentYear} Thé Tip Top. Tous droits réservés.
             </p>
+            <div className="flex gap-4 text-white/60 text-xs">
+              <span>🔒 Paiement sécurisé</span>
+              <span>📦 Livraison rapide</span>
+              <span>✓ Certifié RGPD</span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/Header.tsx b/components/Header.tsx
index 5c67fa9..7c1b5bf 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -44,7 +44,7 @@ export default function Header() {
   };
 
   return (
-    <header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
+    <header className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] sticky top-0 z-50 shadow-lg">
       {/* Main Header */}
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-18">
@@ -57,50 +57,56 @@ export default function Header() {
           <nav className="hidden md:flex items-center gap-6">
             <Link
               href={ROUTES.HOME}
-              className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
             >
               Accueil
             </Link>
             <Link
               href={ROUTES.GAME}
-              className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
             >
-              Jeu
+              Loto à gagner
             </Link>
             <Link
               href={ROUTES.LOTS}
-              className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
             >
-              Gains
+              Règlement
+            </Link>
+            <Link
+              href="/faq"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
+            >
+              FAQ
             </Link>
             <Link
               href="/about"
-              className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
             >
-              À propos
+              Gagnants
             </Link>
             <Link
               href="/contact"
-              className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
+              className="text-white hover:text-[#f59e0b] font-medium transition-colors"
             >
               Contact
             </Link>
 
-            {/* Participer with Dropdown - Green Button */}
+            {/* Participer with Dropdown - Orange Button */}
             {isAuthenticated ? (
               <Link
                 href={ROUTES.GAME}
-                className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg transition-all hover:shadow-lg"
+                className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl"
               >
-                🎯 Participer
+                Participer
               </Link>
             ) : (
               <div className="relative" ref={dropdownRef}>
                 <button
                   onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
-                  className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg transition-all hover:shadow-lg flex items-center gap-2"
+                  className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl flex items-center gap-2"
                 >
-                  🎯 Participer
+                  Participer
                   <svg
                     className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
                     fill="none"