add bg

src/components/AnimatedSvBackground.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../hooks/useTheme';
+
+export const AnimatedSvgBackground: React.FC = () => {
+  const { isDark } = useTheme();
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    let ticking = false;
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setScrollY(window.scrollY);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Couleurs réactives selon le mode clair/sombre
+  const strokePrimary = isDark ? "rgba(59, 130, 246, 0.25)" : "rgba(37, 99, 235, 0.18)"; // Bleu Google
+  const strokeSuccess = isDark ? "rgba(16, 185, 129, 0.3)" : "rgba(16, 185, 129, 0.22)"; // Vert Émeraude
+  const strokeSubtle = isDark ? "rgba(148, 163, 184, 0.1)" : "rgba(100, 116, 139, 0.08)";
+  const fillGlow = isDark ? "rgba(59, 130, 246, 0.03)" : "rgba(37, 99, 235, 0.02)";
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden bg-[#f8f9fa] dark:bg-[#0f172a] transition-colors duration-500">
+      
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 1 : GRILLE TECHNIQUE & FLUX LENTS (Vitesse: -0.1x)    */}
+      {/* ------------------------------------------------------------- */}
+      <svg
+        className="absolute inset-0 w-full h-[200vh] transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.1}px)` }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <pattern id="gise-grid" width="80" height="80" patternUnits="userSpaceOnUse">
+            <path d="M 80 0 L 0 0 0 80" fill="none" stroke={strokeSubtle} strokeWidth="1" />
+            <circle cx="80" cy="0" r="1.5" fill={strokePrimary} />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#gise-grid)" />
+
+        {/* Lignes de flux de données sinusoïdales */}
+        <path
+          d="M -100 200 C 300 100, 600 500, 1200 300 T 2000 600"
+          fill="none"
+          stroke={strokePrimary}
+          strokeWidth="1.5"
+          strokeDasharray="8 6"
+        />
+        <path
+          d="M -100 800 C 400 600, 800 1100, 1500 900 T 2200 1200"
+          fill="none"
+          stroke={strokeSuccess}
+          strokeWidth="1.5"
+          strokeDasharray="12 8"
+        />
+      </svg>
+
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 2 : SYMBOLES CLÉS GISE (BOUCLIER, SERVEUR, CADENAS)    */}
+      {/* Vitesse intermédiaire: -0.28x                                */}
+      {/* ------------------------------------------------------------- */}
+      <svg
+        className="absolute inset-0 w-full h-[250vh] transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.28}px)` }}
+        viewBox="0 0 1200 1800"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+        {/* --- DESSIN 1 : LE BOUCLIER SOUVERAIN (AEGIS) en haut à droite --- */}
+        <g transform="translate(850, 120) scale(1.2)">
+          {/* Contour externe du Bouclier */}
+          <path
+            d="M100 20 L180 50 V120 C180 170 100 210 100 210 C100 210 20 170 20 120 V50 L100 20 Z"
+            stroke={strokePrimary}
+            strokeWidth="2.5"
+            fill={fillGlow}
+          />
+          {/* Maillage interne Zero-Trust */}
+          <path d="M100 20 V210 M20 50 L180 120 M180 50 L20 120" stroke={strokePrimary} strokeWidth="1" />
+          <circle cx="100" cy="115" r="25" stroke={strokeSuccess} strokeWidth="2" fill="none" />
+          <circle cx="100" cy="115" r="6" fill={isDark ? "#10b981" : "#059669"} />
+        </g>
+
+        {/* --- DESSIN 2 : BAIE DE SERVEURS (CLOUD BELGE) au milieu à gauche --- */}
+        <g transform="translate(80, 650) scale(0.9)">
+          {/* Armoire Serveur */}
+          <rect x="0" y="0" width="160" height="240" rx="16" stroke={strokePrimary} strokeWidth="2" fill={fillGlow} />
+          {/* Serveur Lame 1 */}
+          <rect x="15" y="20" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="37.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
+          <line x1="55" y1="37.5" x2="125" y2="37.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
+          
+          {/* Serveur Lame 2 */}
+          <rect x="15" y="70" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="87.5" r="3" fill={isDark ? "#3b82f6" : "#2563eb"} />
+          <line x1="55" y1="87.5" x2="125" y2="87.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="6 3" />
+
+          {/* Serveur Lame 3 */}
+          <rect x="15" y="120" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="137.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
+          <line x1="55" y1="137.5" x2="125" y2="137.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
+
+          {/* Base & Connexion terre */}
+          <path d="M80 160 V220 M40 220 H120" stroke={strokeSuccess} strokeWidth="2" />
+        </g>
+
+        {/* --- DESSIN 3 : CADENAS DE SÉCURITÉ / VAULT en bas à droite --- */}
+        <g transform="translate(900, 1250) scale(1.1)">
+          {/* Anse du cadenas */}
+          <path d="M30 60 V35 C30 18 43 5 60 5 C77 5 90 18 90 35 V60" stroke={strokeSuccess} strokeWidth="3" fill="none" />
+          {/* Corps du cadenas */}
+          <rect x="10" y="60" width="100" height="80" rx="16" stroke={strokeSuccess} strokeWidth="2.5" fill={fillGlow} />
+          {/* Serrure */}
+          <circle cx="60" cy="92" r="8" fill={isDark ? "#10b981" : "#059669"} />
+          <path d="M60 100 V115" stroke={isDark ? "#10b981" : "#059669"} strokeWidth="3" strokeLinecap="round" />
+        </g>
+
+        {/* --- DESSIN 4 : NŒUDS DE RÉSEAU INTERCONNECTÉS (Réseau Zero-Trust) --- */}
+        <g transform="translate(450, 950)">
+          <line x1="0" y1="0" x2="120" y2="-60" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="120" y1="-60" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="0" y1="0" x2="100" y2="80" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="100" y1="80" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
+
+          <circle cx="0" cy="0" r="8" fill={isDark ? "#3b82f6" : "#2563eb"} />
+          <circle cx="120" cy="-60" r="6" fill={isDark ? "#10b981" : "#059669"} />
+          <circle cx="240" cy="20" r="10" stroke={strokePrimary} strokeWidth="2" fill={isDark ? "#0f172a" : "#ffffff"} />
+          <circle cx="100" cy="80" r="7" fill={isDark ? "#6366f1" : "#4f46e5"} />
+        </g>
+
+      </svg>
+
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 3 : HALOS LUMINEUX EN ACCENTUATION (Vitesse: -0.4x)   */}
+      {/* ------------------------------------------------------------- */}
+      <div
+        className="absolute top-20 left-1/2 -translate-x-1/2 w-175 h-87.5 bg-blue-500/10 dark:bg-blue-600/15 blur-[140px] rounded-full transition-transform duration-75 ease-out"
+        style={{ transform: `translate(-50%, ${scrollY * -0.4}px)` }}
+      />
+      <div
+        className="absolute top-200 -left-20 w-125 h-125 bg-emerald-500/10 dark:bg-emerald-500/15 blur-[150px] rounded-full transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.2}px)` }}
+      />
+
+    </div>
+  );
+};
+
+export default AnimatedSvgBackground;

src/pages/GiseLandingPage.tsx

@@ -25,6 +25,7 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme';
+import AnimatedSvgBackground from '../components/AnimatedSvBackground';
 
 export default function GiseLandingPage() {
   const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
@@ -74,6 +75,10 @@ export default function GiseLandingPage() {
   return (
     <div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
 
+      <AnimatedSvgBackground />
+
+      <div className="relative z-10">
+
         {/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
         <header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
           <div className="max-w-7xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
@@ -158,7 +163,7 @@ export default function GiseLandingPage() {
               href="#contact"
               className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
             >
-            <span>Obtenir un diagnostic gratuit</span>
+              <span>Obtenir un diagnostic</span>
               <ChevronRight className="w-4 h-4" />
             </a>
             <a
@@ -191,7 +196,7 @@ export default function GiseLandingPage() {
         </section>
 
         {/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
-      <section id="engagements" className="py-20 bg-white dark:bg-slate-900/40 border-y border-slate-200/80 dark:border-slate-800/80">
+        <section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
             <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
@@ -673,5 +678,6 @@ export default function GiseLandingPage() {
         )}
 
       </div>
+    </div>
   );
 }