ajout CGU CGV, bandeau cookie, font

2026-03-06 17:38:09 +01:00
parent e1c137686f
commit 6a4a5ab543
19 changed files with 706 additions and 72 deletions
--- a/src/components/CookieBanner.tsx
+++ b/src/components/CookieBanner.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { X, ShieldCheck } from 'lucide-react';
+
+export const CookieBanner = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const consent = localStorage.getItem('cookie-consent');
+        if (!consent) {
+            setIsVisible(true);
+        }
+    }, []);
+
+    const handleAccept = () => {
+        localStorage.setItem('cookie-consent', 'accepted');
+        setIsVisible(false);
+        // Dispatch an event so Analytics component can react immediately without refresh
+        window.dispatchEvent(new Event('cookie-consent-updated'));
+    };
+
+    const handleDecline = () => {
+        localStorage.setItem('cookie-consent', 'declined');
+        setIsVisible(false);
+        window.dispatchEvent(new Event('cookie-consent-updated'));
+    };
+
+    if (!isVisible) return null;
+
+    return (
+        <div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 bg-slate-900/95 backdrop-blur shadow-2xl border-t border-slate-700/50 transform transition-transform duration-500 ease-out translate-y-0">
+            <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                <div className="flex items-start gap-4">
+                    <div className="p-3 bg-blue-500/20 text-blue-400 rounded-full shrink-0">
+                        <ShieldCheck size={24} />
+                    </div>
+                    <div>
+                        <h3 className="text-white font-bold text-lg mb-1">
+                            Nous respectons votre vie privée
+                        </h3>
+                        <p className="text-slate-300 text-sm leading-relaxed max-w-3xl">
+                            Nous utilisons des cookies (via Umami Analytics) exclusivement pour analyser le trafic de manière anonymisée et améliorer votre expérience sur l'application. Aucun parcours n'est lié à votre identité.
+                        </p>
+                    </div>
+                </div>
+
+                <div className="flex flex-col sm:flex-row w-full md:w-auto items-center gap-3 shrink-0">
+                    <button
+                        onClick={handleDecline}
+                        className="w-full sm:w-auto px-6 py-2.5 rounded-xl border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 transition-colors text-sm"
+                    >
+                        Continuer sans accepter
+                    </button>
+                    <button
+                        onClick={handleAccept}
+                        className="w-full sm:w-auto px-6 py-2.5 rounded-xl bg-blue-600 text-white font-bold shadow-lg shadow-blue-600/20 hover:bg-blue-500 hover:-translate-y-0.5 transition-all text-sm"
+                    >
+                        Accepter
+                    </button>
+                    <button
+                        onClick={() => setIsVisible(false)}
+                        className="absolute top-4 right-4 md:hidden text-slate-400 p-2"
+                        aria-label="Fermer"
+                    >
+                        <X size={20} />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};