From 34531fd2cf664a7b1944cfa7dad9ebdba775c85e Mon Sep 17 00:00:00 2001
From: Arthur Wambst <your-username@users.noreply.github.com>
Date: Wed, 18 Jun 2025 03:37:04 +0200
Subject: [PATCH 1/5] init

---
 banquise-website/src/App.tsx                  | 170 +++---------------
 .../components/sections/ServicesSection.tsx   |  24 ++-
 .../src/components/ui/LanguageSwitcher.tsx    |  37 ++++
 banquise-website/src/data/translations/en.tsx | 153 ++++++++++++++++
 banquise-website/src/data/translations/fr.ts  | 153 ++++++++++++++++
 .../src/data/translations/index.ts            |  14 ++
 banquise-website/src/hooks/useTranslation.tsx |  31 ++++
 banquise-website/src/types/i18n.ts            |  23 +++
 banquise-website/src/types/service.ts         |   8 +
 9 files changed, 455 insertions(+), 158 deletions(-)
 create mode 100644 banquise-website/src/components/ui/LanguageSwitcher.tsx
 create mode 100644 banquise-website/src/data/translations/en.tsx
 create mode 100644 banquise-website/src/data/translations/fr.ts
 create mode 100644 banquise-website/src/data/translations/index.ts
 create mode 100644 banquise-website/src/hooks/useTranslation.tsx
 create mode 100644 banquise-website/src/types/i18n.ts
 create mode 100644 banquise-website/src/types/service.ts

diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx
index 8afd2d1..21bb3b6 100644
--- a/banquise-website/src/App.tsx
+++ b/banquise-website/src/App.tsx
@@ -8,148 +8,12 @@ import { Footer } from './components/layout/Footer';
 import { Popup } from './components/ui/Popup';
 import { ScrollToTopButton } from './components/ui/ScrollToTopButton';
 import { ParallaxBackground } from './components/ui/ParallaxBackground';
-import { URLS } from './config/constants';
-
-interface Service {
-  name: string;
-  url: string;
-  image: string;
-  icon: string;
-  description: string;
-  features: string[];
-}
-
-const services = [
-  {
-    name: "Wiki",
-    url: URLS.services.wiki,
-    image: "/path/to/wiki-image.jpg",
-    icon: "📚",
-    description: "Plateforme collaborative de documentation technique et de partage de connaissances. Créez, modifiez et organisez vos guides, tutoriels et documentations en équipe avec un système de versioning intégré.",
-    features: [
-      "Éditeur markdown avancé avec prévisualisation en temps réel",
-      "Système de versioning pour suivre les modifications",
-      "Collaboration en temps réel avec plusieurs contributeurs",
-      "Recherche intelligente dans tous les documents",
-      "Templates prédéfinis pour différents types de documentation",
-      "Système de commentaires et de révisions",
-      "Export PDF et HTML pour partage externe",
-      "Intégration avec Git pour la sauvegarde"
-    ]
-  },
-  {
-    name: "Gitea",
-    url: URLS.services.gitea,
-    image: "/path/to/gitea-image.jpg",
-    icon: "🔧",
-    description: "Service Git auto-hébergé lightweight et performant pour vos projets de développement. Alternative open-source à GitHub avec toutes les fonctionnalités essentielles pour gérer vos repositories.",
-    features: [
-      "Repositories Git illimités publics et privés",
-      "Interface web intuitive pour la gestion des projets",
-      "Issues et pull requests avec système de review",
-      "Wiki intégré pour chaque projet",
-      "Actions CI/CD pour l'automatisation",
-      "Gestion fine des permissions et des équipes",
-      "API REST complète pour l'intégration",
-      "Webhooks pour les notifications externes"
-    ]
-  },
-  {
-    name: "Panel Gaming",
-    url: URLS.services.panel,
-    image: "/path/to/panel-image.jpg",
-    icon: "🎮",
-    description: "Interface de gestion centralisée pour tous vos serveurs de jeux. Déployez, configurez et surveillez facilement vos serveurs Minecraft, CS2, Garry's Mod et bien d'autres.",
-    features: [
-      "Support de 20+ jeux populaires (Minecraft, CS2, GMod...)",
-      "Déploiement en un clic avec templates préconfigurés",
-      "Console d'administration en temps réel",
-      "Gestion des fichiers avec éditeur intégré",
-      "Monitoring des performances et ressources",
-      "Système de sauvegarde automatique",
-      "Planificateur de tâches automatisées"
-    ]
-  },
-  {
-    name: "Pelican",
-    url: URLS.services.pelican,
-    image: "/path/to/pelican-image.jpg",
-    icon: "🐧",
-    description: "Pelican is the ultimate, free game server control panel offering high flying security.",
-    features: [
-      "Gestion de serveurs de jeux avec serveurs dedies (Minecraft, CS2, Palworld...)",
-      "Déploiement en un clic avec templates préconfigurés",
-      "Console d'administration en temps réel",
-      "Gestion des fichiers avec éditeur intégré",
-      "Monitoring des performances et ressources",
-      "Système de sauvegarde automatique",
-      "Planificateur de tâches automatisées"         
-    ]
-  },
-  {
-    name: "Intranet",
-    url: URLS.services.intra,
-    image: "/path/to/intra-image.jpg",
-    icon: "🏢",
-    description: "Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres.",
-    features: [
-      "Tableau de bord personnalisé pour chaque membre",
-      "Calendrier des événements et réunions",
-      "Partage de fichiers sécurisé",
-      "Forums de discussion privés",
-      "Annuaire des membres avec profils",
-      "Système de notifications internes",
-      "Gestion des projets et tâches",
-      "Archive des décisions et procès-verbaux"
-    ]
-  },
-  {
-    name: "Mails",
-    url: URLS.services.mails,
-    image: "/path/to/mails-image.jpg",
-    icon: "📧",
-    description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
-    features: [
-      "Adresses email personnalisées @la-banquise.fr",
-      "Interface webmail moderne et responsive",
-      "Filtres anti-spam et antivirus intégrés",
-      "Contacts et calendrier synchronisés",
-      "Support IMAP/SMTP pour clients externes",
-      "Stockage généreux avec archivage",
-      "Chiffrement des communications",
-      "Sauvegarde automatique des données"
-    ]
-  },
-  {
-    name: "Password change",
-    url: URLS.services.ssp,
-    image: "/path/to/mails-image.jpg",
-    icon: "📧",
-    description: "Password reset.",
-    features: [
-      "Interface pour changer votre mot de passe"
-    ]
-  },
-  {
-    name: "Opencloud",
-    url: URLS.services.opencloud,
-    image: "/path/to/opencloud-image.jpg",
-    icon: "☁️",
-    description: "Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers. Alternative libre à Google Drive avec contrôle total sur vos données.",
-    features: [
-      "Stockage cloud sécurisé et chiffré",
-      "Synchronisation multi-appareils",
-      "Partage de fichiers avec liens sécurisés",
-      "Édition collaborative de documents",
-      "Versioning automatique des fichiers",
-      "Applications mobiles natives",
-      "Intégration avec outils externes",
-      "Sauvegarde géoredondante des données"
-    ]
-  }
-];
+import { LanguageSwitcher } from './components/ui/LanguageSwitcher';
+import { useTranslation } from './hooks/useTranslation';
+import type { Service } from './types/service';
 
 const App: React.FC = () => {
+  const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
   const [selectedService, setSelectedService] = useState<Service | null>(null);
   const [openAccordion, setOpenAccordion] = useState<string | null>(null);
 
@@ -164,9 +28,26 @@ const App: React.FC = () => {
       
       {/* Main Content */}
       <div className="relative z-10">
-        <Navigation />
-        <HeroSection />
-        <ServicesSection services={services} onServiceClick={setSelectedService} />
+        {/* Navigation avec sélecteur de langue */}
+        <Navigation 
+          translations={t.navigation}
+          languageSwitcher={
+            <LanguageSwitcher 
+              currentLanguage={currentLanguage}
+              onLanguageChange={changeLanguage}
+              availableLanguages={availableLanguages}
+            />
+          }
+        />
+        
+        <HeroSection translations={t.hero} />
+        
+        <ServicesSection 
+          services={t.services} 
+          onServiceClick={setSelectedService}
+          translations={t.common}
+        />
+        
         <TechFeaturesSection />
         <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
         <Footer />
@@ -178,7 +59,8 @@ const App: React.FC = () => {
       {selectedService && (
         <Popup 
           service={selectedService} 
-          onClose={() => setSelectedService(null)} 
+          onClose={() => setSelectedService(null)}
+          translations={t.common}
         />
       )}
     </div>
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
index 5b1f386..b8868c9 100644
--- a/banquise-website/src/components/sections/ServicesSection.tsx
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -1,23 +1,19 @@
 import React from 'react';
+import type { Service } from '../../types/service';
 
-// Update the Service interface to match your actual service objects
-interface Service {
-  name: string;
-  url: string;
-  image: string;
-  icon: string;
-  description: string;
-  features: string[];
-}
-
-// Define interface directly in the component file
 interface ServicesSectionProps {
   services: Service[];
-
   onServiceClick: (service: Service) => void;
+  translations: {
+    discoverFeatures: string;
+  };
 }
 
-export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => (
+export const ServicesSection: React.FC<ServicesSectionProps> = ({ 
+  services, 
+  onServiceClick, 
+  translations 
+}) => (
   <section id="services" className="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
     <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
     <h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
@@ -51,7 +47,7 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onSe
           
           {/* CTA */}
           <div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300 text-sm sm:text-base">
-            <span className="text-center">Découvrir toutes les fonctionnalités</span>
+            <span className="text-center">{translations.discoverFeatures}</span>
             <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
           </div>
           
diff --git a/banquise-website/src/components/ui/LanguageSwitcher.tsx b/banquise-website/src/components/ui/LanguageSwitcher.tsx
new file mode 100644
index 0000000..73e97fc
--- /dev/null
+++ b/banquise-website/src/components/ui/LanguageSwitcher.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Language } from '../../types/i18n';
+
+interface LanguageSwitcherProps {
+  currentLanguage: Language;
+  onLanguageChange: (language: Language) => void;
+  availableLanguages: Language[];
+}
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  currentLanguage,
+  onLanguageChange,
+  availableLanguages
+}) => {
+  const languageNames: Record<Language, string> = {
+    fr: '🇫🇷 Français',
+    en: '🇬🇧 English',
+    //es: '🇪🇸 Español',
+    //de: '🇩🇪 Deutsch'
+  };
+
+  return (
+    <div className="relative inline-block">
+      <select
+        value={currentLanguage}
+        onChange={(e) => onLanguageChange(e.target.value as Language)}
+        className="bg-banquise-blue-dark/20 border border-banquise-blue-lightest/30 text-banquise-gray rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-banquise-blue-light"
+      >
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang} className="bg-banquise-blue-dark text-banquise-gray">
+            {languageNames[lang]}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
diff --git a/banquise-website/src/data/translations/en.tsx b/banquise-website/src/data/translations/en.tsx
new file mode 100644
index 0000000..62e98ad
--- /dev/null
+++ b/banquise-website/src/data/translations/en.tsx
@@ -0,0 +1,153 @@
+import type { Translation } from '../../types/i18n';
+import { URLS } from '../../config/constants';
+
+export const en: Translation = {
+  services: [
+    {
+      name: "Wiki",
+      url: URLS.services.wiki,
+      image: "/path/to/wiki-image.jpg",
+      icon: "📚",
+      description: "Collaborative technical documentation and knowledge sharing platform. Create, edit and organize your guides, tutorials and documentation as a team with integrated versioning system.",
+      features: [
+        "Advanced markdown editor with real-time preview",
+        "Versioning system to track changes",
+        "Real-time collaboration with multiple contributors",
+        "Smart search across all documents",
+        "Predefined templates for different documentation types",
+        "Comment and revision system",
+        "PDF and HTML export for external sharing",
+        "Git integration for backup"
+      ]
+    },
+    {
+      name: "Gitea",
+      url: URLS.services.gitea,
+      image: "/path/to/gitea-image.jpg",
+      icon: "🔧",
+      description: "Lightweight and performant self-hosted Git service for your development projects. Open-source alternative to GitHub with all essential features for managing your repositories.",
+      features: [
+        "Unlimited public and private Git repositories",
+        "Intuitive web interface for project management",
+        "Issues and pull requests with review system",
+        "Integrated wiki for each project",
+        "CI/CD actions for automation",
+        "Fine-grained permissions and team management",
+        "Complete REST API for integration",
+        "Webhooks for external notifications"
+      ]
+    },
+    {
+      name: "Gaming Panel",
+      url: URLS.services.panel,
+      image: "/path/to/panel-image.jpg",
+      icon: "🎮",
+      description: "Centralized management interface for all your game servers. Easily deploy, configure and monitor your Minecraft, CS2, Garry's Mod and many other servers.",
+      features: [
+        "Support for 20+ popular games (Minecraft, CS2, GMod...)",
+        "One-click deployment with pre-configured templates",
+        "Real-time administration console",
+        "File management with integrated editor",
+        "Performance and resource monitoring",
+        "Automatic backup system",
+        "Automated task scheduler"
+      ]
+    },
+    {
+      name: "Pelican",
+      url: URLS.services.pelican,
+      image: "/path/to/pelican-image.jpg",
+      icon: "🐧",
+      description: "Ultra-fast and flexible Python static site generator. Create blogs, portfolios or documentation sites with optimal performance and simplified deployment.",
+      features: [
+        "Game server management with dedicated servers (Minecraft, CS2, Palworld...)",
+        "One-click deployment with pre-configured templates",
+        "Real-time administration console",
+        "File management with integrated editor",
+        "Performance and resource monitoring",
+        "Automatic backup system",
+        "Automated task scheduler"
+      ]
+    },
+    {
+      name: "Intranet",
+      url: URLS.services.intra,
+      image: "/path/to/intra-image.jpg",
+      icon: "🏢",
+      description: "Secure private space for the association to centralize internal resources, communications and collaboration tools between members.",
+      features: [
+        "Personalized dashboard for each member",
+        "Event and meeting calendar",
+        "Secure file sharing",
+        "Private discussion forums",
+        "Member directory with profiles",
+        "Internal notification system",
+        "Project and task management",
+        "Archive of decisions and minutes"
+      ]
+    },
+    {
+      name: "Mails",
+      url: URLS.services.mails,
+      image: "/path/to/mails-image.jpg",
+      icon: "📧",
+      description: "Professional email service with modern web interface. Benefit from a personalized @la-banquise.fr email address with all advanced features.",
+      features: [
+        "Personalized @la-banquise.fr email addresses",
+        "Modern and responsive webmail interface",
+        "Integrated anti-spam and antivirus filters",
+        "Synchronized contacts and calendar",
+        "IMAP/SMTP support for external clients",
+        "Generous storage with archiving",
+        "Communication encryption",
+        "Automatic data backup"
+      ]
+    },
+    {
+      name: "Password Change",
+      url: URLS.services.ssp,
+      image: "/path/to/ssp-image.jpg",
+      icon: "🔐",
+      description: "Secure interface for autonomous password management. Easily change your credentials safely.",
+      features: [
+        "Secure interface to change your password",
+        "Password complexity validation",
+        "Email notifications of changes",
+        "Modification history"
+      ]
+    },
+    {
+      name: "OpenCloud",
+      url: URLS.services.opencloud,
+      image: "/path/to/opencloud-image.jpg",
+      icon: "☁️",
+      description: "Open-source collaborative cloud platform for file storage, sharing and synchronization. Free alternative to Google Drive with full control over your data.",
+      features: [
+        "Secure and encrypted cloud storage",
+        "Multi-device synchronization",
+        "File sharing with secure links",
+        "Collaborative document editing",
+        "Automatic file versioning",
+        "Native mobile applications",
+        "Integration with external tools",
+        "Geo-redundant data backup"
+      ]
+    }
+  ],
+  hero: {
+    title: "Welcome to La Banquise",
+    subtitle: "Your trusted technology partner",
+    cta: "Discover our services"
+  },
+  navigation: {
+    home: "Home",
+    services: "Services",
+    about: "About",
+    contact: "Contact"
+  },
+  common: {
+    discoverFeatures: "Discover all features",
+    close: "Close",
+    loading: "Loading..."
+  }
+};
diff --git a/banquise-website/src/data/translations/fr.ts b/banquise-website/src/data/translations/fr.ts
new file mode 100644
index 0000000..9c5e223
--- /dev/null
+++ b/banquise-website/src/data/translations/fr.ts
@@ -0,0 +1,153 @@
+import type { Translation } from '../../types/i18n';
+import { URLS } from '../../config/constants';
+
+export const fr: Translation = {
+  services: [
+    {
+      name: "Wiki",
+      url: URLS.services.wiki,
+      image: "/path/to/wiki-image.jpg",
+      icon: "📚",
+      description: "Plateforme collaborative de documentation technique et de partage de connaissances. Créez, modifiez et organisez vos guides, tutoriels et documentations en équipe avec un système de versioning intégré.",
+      features: [
+        "Éditeur markdown avancé avec prévisualisation en temps réel",
+        "Système de versioning pour suivre les modifications",
+        "Collaboration en temps réel avec plusieurs contributeurs",
+        "Recherche intelligente dans tous les documents",
+        "Templates prédéfinis pour différents types de documentation",
+        "Système de commentaires et de révisions",
+        "Export PDF et HTML pour partage externe",
+        "Intégration avec Git pour la sauvegarde"
+      ]
+    },
+    {
+      name: "Gitea",
+      url: URLS.services.gitea,
+      image: "/path/to/gitea-image.jpg",
+      icon: "🔧",
+      description: "Service Git auto-hébergé lightweight et performant pour vos projets de développement. Alternative open-source à GitHub avec toutes les fonctionnalités essentielles pour gérer vos repositories.",
+      features: [
+        "Repositories Git illimités publics et privés",
+        "Interface web intuitive pour la gestion des projets",
+        "Issues et pull requests avec système de review",
+        "Wiki intégré pour chaque projet",
+        "Actions CI/CD pour l'automatisation",
+        "Gestion fine des permissions et des équipes",
+        "API REST complète pour l'intégration",
+        "Webhooks pour les notifications externes"
+      ]
+    },
+    {
+      name: "Panel Gaming",
+      url: URLS.services.panel,
+      image: "/path/to/panel-image.jpg",
+      icon: "🎮",
+      description: "Interface de gestion centralisée pour tous vos serveurs de jeux. Déployez, configurez et surveillez facilement vos serveurs Minecraft, CS2, Garry's Mod et bien d'autres.",
+      features: [
+        "Support de 20+ jeux populaires (Minecraft, CS2, GMod...)",
+        "Déploiement en un clic avec templates préconfigurés",
+        "Console d'administration en temps réel",
+        "Gestion des fichiers avec éditeur intégré",
+        "Monitoring des performances et ressources",
+        "Système de sauvegarde automatique",
+        "Planificateur de tâches automatisées"
+      ]
+    },
+    {
+      name: "Pelican",
+      url: URLS.services.pelican,
+      image: "/path/to/pelican-image.jpg",
+      icon: "🐧",
+      description: "Générateur de sites statiques Python ultra-rapide et flexible. Créez des blogs, portfolios ou sites de documentation avec une performance optimale et un déploiement simplifié.",
+      features: [
+        "Gestion de serveurs de jeux avec serveurs dédiés (Minecraft, CS2, Palworld...)",
+        "Déploiement en un clic avec templates préconfigurés",
+        "Console d'administration en temps réel",
+        "Gestion des fichiers avec éditeur intégré",
+        "Monitoring des performances et ressources",
+        "Système de sauvegarde automatique",
+        "Planificateur de tâches automatisées"
+      ]
+    },
+    {
+      name: "Intranet",
+      url: URLS.services.intra,
+      image: "/path/to/intra-image.jpg",
+      icon: "🏢",
+      description: "Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres.",
+      features: [
+        "Tableau de bord personnalisé pour chaque membre",
+        "Calendrier des événements et réunions",
+        "Partage de fichiers sécurisé",
+        "Forums de discussion privés",
+        "Annuaire des membres avec profils",
+        "Système de notifications internes",
+        "Gestion des projets et tâches",
+        "Archive des décisions et procès-verbaux"
+      ]
+    },
+    {
+      name: "Mails",
+      url: URLS.services.mails,
+      image: "/path/to/mails-image.jpg",
+      icon: "📧",
+      description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
+      features: [
+        "Adresses email personnalisées @la-banquise.fr",
+        "Interface webmail moderne et responsive",
+        "Filtres anti-spam et antivirus intégrés",
+        "Contacts et calendrier synchronisés",
+        "Support IMAP/SMTP pour clients externes",
+        "Stockage généreux avec archivage",
+        "Chiffrement des communications",
+        "Sauvegarde automatique des données"
+      ]
+    },
+    {
+      name: "Changement de mot de passe",
+      url: URLS.services.ssp,
+      image: "/path/to/ssp-image.jpg",
+      icon: "🔐",
+      description: "Interface sécurisée pour la gestion autonome de vos mots de passe. Changez facilement vos identifiants en toute sécurité.",
+      features: [
+        "Interface sécurisée pour changer votre mot de passe",
+        "Validation de la complexité des mots de passe",
+        "Notifications par email des changements",
+        "Historique des modifications"
+      ]
+    },
+    {
+      name: "OpenCloud",
+      url: URLS.services.opencloud,
+      image: "/path/to/opencloud-image.jpg",
+      icon: "☁️",
+      description: "Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers. Alternative libre à Google Drive avec contrôle total sur vos données.",
+      features: [
+        "Stockage cloud sécurisé et chiffré",
+        "Synchronisation multi-appareils",
+        "Partage de fichiers avec liens sécurisés",
+        "Édition collaborative de documents",
+        "Versioning automatique des fichiers",
+        "Applications mobiles natives",
+        "Intégration avec outils externes",
+        "Sauvegarde géoredondante des données"
+      ]
+    }
+  ],
+  hero: {
+    title: "Bienvenue chez La Banquise",
+    subtitle: "Votre partenaire technologique de confiance",
+    cta: "Découvrir nos services"
+  },
+  navigation: {
+    home: "Accueil",
+    services: "Services",
+    about: "À propos",
+    contact: "Contact"
+  },
+  common: {
+    discoverFeatures: "Découvrir toutes les fonctionnalités",
+    close: "Fermer",
+    loading: "Chargement..."
+  }
+};
diff --git a/banquise-website/src/data/translations/index.ts b/banquise-website/src/data/translations/index.ts
new file mode 100644
index 0000000..4f2a11c
--- /dev/null
+++ b/banquise-website/src/data/translations/index.ts
@@ -0,0 +1,14 @@
+import { fr } from './fr';
+import { en } from './en';
+import type { Language, Translation } from '../../types/i18n';
+
+export const translations: Record<Language, Translation> = {
+  fr,
+  en,
+  // Ajoutez d'autres langues ici :
+  // es,
+  // de,
+};
+
+export const defaultLanguage: Language = 'fr';
+export const availableLanguages: Language[] = ['fr', 'en'];
diff --git a/banquise-website/src/hooks/useTranslation.tsx b/banquise-website/src/hooks/useTranslation.tsx
new file mode 100644
index 0000000..a9454ef
--- /dev/null
+++ b/banquise-website/src/hooks/useTranslation.tsx
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import type { Language, Translation } from '../types/i18n';
+import { translations, defaultLanguage } from '../data/translations';
+
+export const useTranslation = () => {
+  const [currentLanguage, setCurrentLanguage] = useState<Language>(() => {
+    // Récupérer la langue depuis localStorage ou utiliser la langue par défaut
+    const saved = localStorage.getItem('language') as Language;
+    return saved && translations[saved] ? saved : defaultLanguage;
+  });
+
+  const [t, setT] = useState<Translation>(translations[currentLanguage]);
+
+  useEffect(() => {
+    setT(translations[currentLanguage]);
+    localStorage.setItem('language', currentLanguage);
+  }, [currentLanguage]);
+
+  const changeLanguage = (language: Language) => {
+    if (translations[language]) {
+      setCurrentLanguage(language);
+    }
+  };
+
+  return {
+    t,
+    currentLanguage,
+    changeLanguage,
+    availableLanguages: Object.keys(translations) as Language[]
+  };
+};
diff --git a/banquise-website/src/types/i18n.ts b/banquise-website/src/types/i18n.ts
new file mode 100644
index 0000000..d7b959a
--- /dev/null
+++ b/banquise-website/src/types/i18n.ts
@@ -0,0 +1,23 @@
+import type { Service } from './service';
+
+export interface Translation {
+  services: Service[];
+  hero: {
+    title: string;
+    subtitle: string;
+    cta: string;
+  };
+  navigation: {
+    home: string;
+    services: string;
+    about: string;
+    contact: string;
+  };
+  common: {
+    discoverFeatures: string;
+    close: string;
+    loading: string;
+  };
+}
+
+export type Language = 'fr' | 'en'; //| 'es' | 'de';
diff --git a/banquise-website/src/types/service.ts b/banquise-website/src/types/service.ts
new file mode 100644
index 0000000..f5d7923
--- /dev/null
+++ b/banquise-website/src/types/service.ts
@@ -0,0 +1,8 @@
+export interface Service {
+  name: string;
+  url: string;
+  image: string;
+  icon: string;
+  description: string;
+  features: string[];
+}

From 81dad2b6ba80d99eee2af76334f87bb4810557fa Mon Sep 17 00:00:00 2001
From: Arthur Wambst <your-username@users.noreply.github.com>
Date: Wed, 18 Jun 2025 04:01:37 +0200
Subject: [PATCH 2/5] wip: started to add translations

---
 .../src/components/layout/MobileMenu.tsx      | 10 +--
 .../src/components/layout/Navigation.tsx      | 70 +++++++++++--------
 .../src/components/sections/HeroSection.tsx   | 13 ++--
 banquise-website/src/components/ui/Popup.tsx  | 26 +++----
 4 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/banquise-website/src/components/layout/MobileMenu.tsx b/banquise-website/src/components/layout/MobileMenu.tsx
index a233ef8..7467c3a 100644
--- a/banquise-website/src/components/layout/MobileMenu.tsx
+++ b/banquise-website/src/components/layout/MobileMenu.tsx
@@ -2,13 +2,15 @@ import React, { useEffect } from 'react';
 import banquiseServer from '../../assets/banquise_server.svg'
 import { URLS, SITE_CONFIG } from '../../config/constants';
 import { commonStyles } from '../../styles/components';
+import type { Translation } from '../../types/i18n';
 
 interface MobileMenuProps {
   isOpen: boolean;
   onClose: () => void;
+  translations: Translation['navigation'];
 }
 
-export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
+export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, translations }) => {
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -76,7 +78,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
                   </svg>
                 </div>
                 <div>
-                  <span className="font-semibold text-lg">Nos Services</span>
+                  <span className="font-semibold text-lg">{translations.services}</span>
                   <p className="text-white/60 text-sm">Découvrir notre offre</p>
                 </div>
               </div>
@@ -93,7 +95,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
                   </svg>
                 </div>
                 <div>
-                  <span className="font-semibold text-lg">À propos</span>
+                  <span className="font-semibold text-lg">{translations.about}</span>
                   <p className="text-white/60 text-sm">En savoir plus sur nous</p>
                 </div>
               </div>
@@ -106,7 +108,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
               <div className="flex items-center space-x-4">
                 <div className={`${commonStyles.icons.small} ${commonStyles.gradients.discord} group-hover:scale-110 transition-transform duration-200`}>
                   <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.30z"/>
                   </svg>
                 </div>
                 <div>
diff --git a/banquise-website/src/components/layout/Navigation.tsx b/banquise-website/src/components/layout/Navigation.tsx
index 70935b2..c00ce5c 100644
--- a/banquise-website/src/components/layout/Navigation.tsx
+++ b/banquise-website/src/components/layout/Navigation.tsx
@@ -3,8 +3,14 @@ import { MobileMenu } from './MobileMenu';
 import banquiseServer from '/src/assets/banquise_server.svg'
 import { URLS, SITE_CONFIG } from '../../config/constants';
 import { commonStyles } from '../../styles/components';
+import type { Translation } from '../../types/i18n';
 
-export const Navigation: React.FC = () => {
+interface NavigationProps {
+  translations: Translation['navigation'];
+  languageSwitcher: React.ReactElement;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({ translations, languageSwitcher }) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
 
@@ -13,7 +19,6 @@ export const Navigation: React.FC = () => {
       const isScrolled = window.scrollY > 20;
       setScrolled(isScrolled);
     };
-
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
@@ -24,7 +29,6 @@ export const Navigation: React.FC = () => {
         setMobileMenuOpen(false);
       }
     };
-
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
@@ -32,22 +36,21 @@ export const Navigation: React.FC = () => {
   return (
     <>
       <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-        scrolled 
-          ? 'bg-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30' 
+        scrolled
+          ? 'bg-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30'
           : 'bg-banquise-blue-dark/95 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20'
       }`}>
         <div className={commonStyles.layout.container}>
           <div className="flex justify-between items-center h-16 sm:h-18 lg:h-20 px-4 sm:px-6 lg:px-8">
-            
             {/* Logo section */}
             <div className="flex items-center space-x-3 sm:space-x-4 group">
               <div className="relative">
                 <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                <img 
+                <img
                   src={banquiseServer}
-                  alt="Logo La Banquise" 
-                  className="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-110" 
-                  style={{ filter: 'drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))' }} 
+                  alt="Logo La Banquise"
+                  className="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-110"
+                  style={{ filter: 'drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))' }}
                 />
               </div>
               <div className="hidden sm:block">
@@ -62,20 +65,30 @@ export const Navigation: React.FC = () => {
 
             {/* Navigation links desktop */}
             <div className="hidden md:flex items-center space-x-1 lg:space-x-2">
-              <a href="#services" className={commonStyles.nav.link}>
-                <span className="relative z-10">Services</span>
+              <a href="#home" className={commonStyles.nav.link}>
+                <span className="relative z-10">{translations.home}</span>
+                <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              </a>
+              <a href="#services" className={commonStyles.nav.link}>
+                <span className="relative z-10">{translations.services}</span>
                 <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
               </a>
-              
               <a href="#about" className={commonStyles.nav.link}>
-                <span className="relative z-10">À propos</span>
+                <span className="relative z-10">{translations.about}</span>
+                <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              </a>
+              <a href="#contact" className={commonStyles.nav.link}>
+                <span className="relative z-10">{translations.contact}</span>
                 <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
               </a>
             </div>
 
             {/* Action buttons desktop */}
             <div className="hidden md:flex items-center space-x-3 lg:space-x-4">
-              <a 
+              {/* Language switcher */}
+              {languageSwitcher}
+              
+              <a
                 href={URLS.social.discord}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -89,20 +102,19 @@ export const Navigation: React.FC = () => {
                   <span>Discord</span>
                 </div>
               </a>
-              
-              <a 
+              <a
                 href={URLS.services.auth}
                 target="_blank"
                 rel="noopener noreferrer"
                 className={`${commonStyles.buttons.auth} ${
-                  scrolled 
-                    ? `${commonStyles.gradients.primary} border border-banquise-blue-lightest/30 hover:shadow-banquise-blue/25` 
+                  scrolled
+                    ? `${commonStyles.gradients.primary} border border-banquise-blue-lightest/30 hover:shadow-banquise-blue/25`
                     : 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue border-2 border-white/20 hover:shadow-banquise-blue-light/25'
                 }`}
               >
                 <div className={`absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 ${
-                  scrolled 
-                    ? 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue' 
+                  scrolled
+                    ? 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue'
                     : 'bg-gradient-to-r from-white/10 to-banquise-blue-lightest/20'
                 }`}></div>
                 <div className="relative z-10 flex items-center space-x-2">
@@ -115,32 +127,32 @@ export const Navigation: React.FC = () => {
             </div>
 
             {/* Mobile menu button */}
-            <button 
+            <button
               className="md:hidden relative p-3 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-300 hover:scale-105 active:scale-95 group"
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
               aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
               aria-expanded={mobileMenuOpen}
             >
               <div className="w-6 h-6 relative">
-                <span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 top-3' : 'top-1'}`}></span>
+                <span className={`absolute block w-6 h-6 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 top-3' : 'top-1'}`}></span>
                 <span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 top-3 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'opacity-100'}`}></span>
                 <span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 top-3' : 'top-5'}`}></span>
               </div>
             </button>
           </div>
         </div>
-
         {/* Glassmorphism effect bar */}
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent"></div>
       </nav>
-
+      
       {/* Spacer pour compenser la navbar fixed */}
       <div className="h-16 sm:h-18 lg:h-20"></div>
-
+      
       {/* Menu mobile */}
-      <MobileMenu 
-        isOpen={mobileMenuOpen} 
-        onClose={() => setMobileMenuOpen(false)} 
+      <MobileMenu
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        translations={translations}
       />
     </>
   );
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
index b6b8eac..57ee13f 100644
--- a/banquise-website/src/components/sections/HeroSection.tsx
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import banquiseServer from '/src/assets/banquise_server.svg'
+import type { Translation } from '../../types/i18n';
 
-export const HeroSection: React.FC = () => (
+interface HeroSectionProps {
+  translations: Translation['hero'];
+}
+
+export const HeroSection: React.FC<HeroSectionProps> = ({ translations }) => (
   <section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
     <div className="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border border-banquise-blue-lightest/30 relative group">
       <img 
@@ -15,15 +20,15 @@ export const HeroSection: React.FC = () => (
     </div>
     
     <h1 className="text-banquise-gray text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 sm:mb-7 md:mb-8 font-extrabold leading-tight max-w-4xl font-heading px-2 relative z-10" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
-      Bienvenue sur La Banquise
+      {translations.title}
     </h1>
     
     <p className="text-banquise-gray text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 max-w-3xl font-normal opacity-90 leading-relaxed px-2 relative z-10" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
-      Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA !
+      {translations.subtitle}
     </p>
     
     <a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-4 sm:py-5 px-8 sm:px-10 md:px-12 rounded-2xl text-base sm:text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-48 sm:min-w-56 md:min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20 mx-4 group relative z-10">
-      <span className="text-center text-banquise-blue-dark">Découvrir nos services</span>
+      <span className="text-center text-banquise-blue-dark">{translations.cta}</span>
       <span className="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1 text-banquise-blue-dark">→</span>
     </a>
   </section>
diff --git a/banquise-website/src/components/ui/Popup.tsx b/banquise-website/src/components/ui/Popup.tsx
index 8ed8158..1e9aac4 100644
--- a/banquise-website/src/components/ui/Popup.tsx
+++ b/banquise-website/src/components/ui/Popup.tsx
@@ -1,25 +1,19 @@
 import React, { useEffect } from 'react';
 import { URLS } from '../../config/constants';
-
-interface Service {
-  name: string;
-  url: string;
-  image: string;
-  icon: string;
-  description: string;
-  features: string[];
-}
+import type { Service } from '../../types/service';
+import type { Translation } from '../../types/i18n';
 
 interface PopupProps {
   service: Service;
   onClose: () => void;
+  translations: Translation['common'];
 }
 
-export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
+export const Popup: React.FC<PopupProps> = ({ service, onClose, translations }) => {
   // Empêcher le scroll du body quand la popup est ouverte
   useEffect(() => {
     document.body.style.overflow = 'hidden';
-    
+
     return () => {
       document.body.style.overflow = 'unset';
     };
@@ -28,18 +22,18 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
   return (
     <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
       <div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20 overflow-hidden">
-        
+
         {/* Bouton de fermeture fixe au-dessus du contenu */}
         <div className="absolute top-4 right-4 z-50">
           <button
             onClick={onClose}
             className="bg-white/90 hover:bg-white border border-banquise-blue/20 text-xl cursor-pointer text-banquise-blue-dark flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 hover:scale-110 active:scale-95 shadow-lg backdrop-blur-sm"
-            aria-label="Fermer la popup"
+            aria-label={translations.close}
           >
             ×
           </button>
         </div>
-        
+
         {/* Contenu avec scroll vertical uniquement */}
         <div className="overflow-y-auto overflow-x-hidden max-h-[90vh] popup-content">
           {/* Header */}
@@ -100,7 +94,7 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
             {/* Fonctionnalités */}
             <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-banquise-blue-dark font-heading font-bold flex items-center">
               <span className="text-xl sm:text-2xl lg:text-3xl mr-3">⚡</span>
-              Fonctionnalités principales
+              {translations.discoverFeatures}
             </h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
               {service.features.map((feature, index) => (
@@ -124,7 +118,7 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
                 <span className="mr-3 text-xl lg:text-2xl">🚀</span>
                 <span>Accéder à {service.name}</span>
               </a>
-              
+
               <p className="text-center text-sm text-banquise-blue-dark/60 mt-4">
                 Besoin d'aide ? Rejoignez notre <a href={URLS.social.discord} className="text-banquise-blue hover:text-banquise-blue-dark transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
               </p>

From 3d0efdb15cb9e13d370b7fb8054cf34a7b6cab27 Mon Sep 17 00:00:00 2001
From: Arthur Wambst <your-username@users.noreply.github.com>
Date: Wed, 18 Jun 2025 19:20:05 +0200
Subject: [PATCH 3/5] fix: discord link to count website joins

---
 banquise-website/src/config/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/banquise-website/src/config/constants.ts b/banquise-website/src/config/constants.ts
index c3d39a6..5ae6a08 100644
--- a/banquise-website/src/config/constants.ts
+++ b/banquise-website/src/config/constants.ts
@@ -11,7 +11,7 @@ export const URLS = {
     ssp: "https://ssp.la-banquise.fr"
   },
   social: {
-    discord: "https://discord.gg/QQWwzX5ptY"
+    discord: "https://discord.gg/bJhM97wans"
   },
   contact: {
     email: "mailto:contact@la-banquise.fr"

From bd42196f547fdc266e533a1724fe8e12f1a84bae Mon Sep 17 00:00:00 2001
From: sahamone <vaudey.sacha@gmail.com>
Date: Thu, 10 Jul 2025 18:35:45 +0200
Subject: [PATCH 4/5] refactoring & UI improvment

---
 banquise-website/package-lock.json            | 853 +++++++++---------
 banquise-website/src/App.tsx                  | 119 ++-
 .../src/components/common/Button.tsx          |  65 ++
 .../src/components/common/Card.tsx            |  40 +
 .../src/components/common/ServiceCard.tsx     |  57 ++
 .../src/components/layout/Footer.tsx          | 147 ++-
 .../src/components/layout/MobileMenu.tsx      | 319 ++++---
 .../components/layout/ModernNavigation.tsx    | 120 +++
 .../layout/navbar/ActionButtons.tsx           |  74 ++
 .../src/components/layout/navbar/Logo.tsx     |  52 ++
 .../layout/navbar/MobileMenuButton.tsx        |  49 +
 .../src/components/layout/navbar/NavLinks.tsx | 174 ++++
 .../src/components/sections/AboutSection.tsx  |   3 +-
 .../src/components/sections/HeroSection.tsx   |   2 +-
 .../components/sections/ServicesSection.tsx   |  35 +-
 .../src/components/ui/AccordionItem.tsx       |   9 +-
 .../components/ui/ModernLanguageSwitcher.tsx  | 110 +++
 .../src/components/ui/ParallaxBackground.tsx  | 146 ---
 .../src/components/ui/ScrollToTopButton.tsx   |  22 +-
 .../src/data/translations/{en.tsx => en.ts}   |   0
 banquise-website/src/hooks/useAccordion.ts    |  33 +
 .../src/hooks/useOceanDepthEffect.ts          |  22 +
 .../src/hooks/useScrollEffects.ts             |  49 +
 banquise-website/src/hooks/useServiceModal.ts |  27 +
 banquise-website/src/hooks/useTranslation.tsx |  11 +-
 banquise-website/src/styles/components.ts     |  23 +-
 banquise-website/src/styles/designSystem.ts   | 176 ++++
 banquise-website/src/types/index.ts           |  10 +-
 banquise-website/src/utils/classNames.ts      |  30 +
 banquise-website/src/vite-env.d.ts            |   2 +
 banquise-website/tailwind.config.js           |  33 +
 31 files changed, 1967 insertions(+), 845 deletions(-)
 create mode 100644 banquise-website/src/components/common/Button.tsx
 create mode 100644 banquise-website/src/components/common/Card.tsx
 create mode 100644 banquise-website/src/components/common/ServiceCard.tsx
 create mode 100644 banquise-website/src/components/layout/ModernNavigation.tsx
 create mode 100644 banquise-website/src/components/layout/navbar/ActionButtons.tsx
 create mode 100644 banquise-website/src/components/layout/navbar/Logo.tsx
 create mode 100644 banquise-website/src/components/layout/navbar/MobileMenuButton.tsx
 create mode 100644 banquise-website/src/components/layout/navbar/NavLinks.tsx
 create mode 100644 banquise-website/src/components/ui/ModernLanguageSwitcher.tsx
 delete mode 100644 banquise-website/src/components/ui/ParallaxBackground.tsx
 rename banquise-website/src/data/translations/{en.tsx => en.ts} (100%)
 create mode 100644 banquise-website/src/hooks/useAccordion.ts
 create mode 100644 banquise-website/src/hooks/useOceanDepthEffect.ts
 create mode 100644 banquise-website/src/hooks/useScrollEffects.ts
 create mode 100644 banquise-website/src/hooks/useServiceModal.ts
 create mode 100644 banquise-website/src/styles/designSystem.ts
 create mode 100644 banquise-website/src/utils/classNames.ts

diff --git a/banquise-website/package-lock.json b/banquise-website/package-lock.json
index 709f8a3..1b30bed 100644
--- a/banquise-website/package-lock.json
+++ b/banquise-website/package-lock.json
@@ -83,9 +83,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.3.tgz",
-      "integrity": "sha512-V42wFfx1ymFte+ecf6iXghnnP8kWTO+ZLXIyZq+1LAXHHvTZdVxicn4yiVYdYMGaCO3tmqub11AorKkv+iodqw==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
+      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -93,22 +93,22 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
-      "integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
+      "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
+        "@babel/generator": "^7.28.0",
         "@babel/helper-compilation-targets": "^7.27.2",
         "@babel/helper-module-transforms": "^7.27.3",
-        "@babel/helpers": "^7.27.4",
-        "@babel/parser": "^7.27.4",
+        "@babel/helpers": "^7.27.6",
+        "@babel/parser": "^7.28.0",
         "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.27.4",
-        "@babel/types": "^7.27.3",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -124,16 +124,16 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.3.tgz",
-      "integrity": "sha512-xnlJYj5zepml8NXtjkG0WquFUv8RskFqyFcVgTBp5k+NaA/8uw/K+OSVf8AMGw5e9HKP2ETd5xpK5MLZQD6b4Q==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
+      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.3",
-        "@babel/types": "^7.27.3",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
+        "@babel/parser": "^7.28.0",
+        "@babel/types": "^7.28.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
       },
       "engines": {
@@ -157,6 +157,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
@@ -230,27 +240,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.4.tgz",
-      "integrity": "sha512-Y+bO6U+I7ZKaM5G5rDUZiYfUvQPUibYmAFe7EnKdnKBbVXDZxvp+MWOH5gYciY0EPk4EScsuFMQBbEfpdRKSCQ==",
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.6.tgz",
+      "integrity": "sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.3"
+        "@babel/types": "^7.27.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.4.tgz",
-      "integrity": "sha512-BRmLHGwpUqLFR2jzx9orBuX/ABDkj2jLKOXrHDTN2aOKL+jFDDKaRNo9nyYsIl9h/UE/7lMKdDjKQQyxKKDZ7g==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
+      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.3"
+        "@babel/types": "^7.28.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -307,38 +317,28 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
-      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
+      "integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
-        "@babel/parser": "^7.27.4",
+        "@babel/generator": "^7.28.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.0",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.3",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
+        "@babel/types": "^7.28.0",
+        "debug": "^4.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/types": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz",
-      "integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.0.tgz",
+      "integrity": "sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -367,9 +367,9 @@
       "optional": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
-      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.6.tgz",
+      "integrity": "sha512-ShbM/3XxwuxjFiuVBHA+d3j5dyac0aEVVq1oluIDf71hUw0aRF59dV/efUsIwFnR6m8JNM2FjZOzmaZ8yG61kw==",
       "cpu": [
         "ppc64"
       ],
@@ -384,9 +384,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
-      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.6.tgz",
+      "integrity": "sha512-S8ToEOVfg++AU/bHwdksHNnyLyVM+eMVAOf6yRKFitnwnbwwPNqKr3srzFRe7nzV69RQKb5DgchIX5pt3L53xg==",
       "cpu": [
         "arm"
       ],
@@ -401,9 +401,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
-      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.6.tgz",
+      "integrity": "sha512-hd5zdUarsK6strW+3Wxi5qWws+rJhCCbMiC9QZyzoxfk5uHRIE8T287giQxzVpEvCwuJ9Qjg6bEjcRJcgfLqoA==",
       "cpu": [
         "arm64"
       ],
@@ -418,9 +418,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
-      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.6.tgz",
+      "integrity": "sha512-0Z7KpHSr3VBIO9A/1wcT3NTy7EB4oNC4upJ5ye3R7taCc2GUdeynSLArnon5G8scPwaU866d3H4BCrE5xLW25A==",
       "cpu": [
         "x64"
       ],
@@ -435,9 +435,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
-      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.6.tgz",
+      "integrity": "sha512-FFCssz3XBavjxcFxKsGy2DYK5VSvJqa6y5HXljKzhRZ87LvEi13brPrf/wdyl/BbpbMKJNOr1Sd0jtW4Ge1pAA==",
       "cpu": [
         "arm64"
       ],
@@ -452,9 +452,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
-      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.6.tgz",
+      "integrity": "sha512-GfXs5kry/TkGM2vKqK2oyiLFygJRqKVhawu3+DOCk7OxLy/6jYkWXhlHwOoTb0WqGnWGAS7sooxbZowy+pK9Yg==",
       "cpu": [
         "x64"
       ],
@@ -469,9 +469,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
-      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.6.tgz",
+      "integrity": "sha512-aoLF2c3OvDn2XDTRvn8hN6DRzVVpDlj2B/F66clWd/FHLiHaG3aVZjxQX2DYphA5y/evbdGvC6Us13tvyt4pWg==",
       "cpu": [
         "arm64"
       ],
@@ -486,9 +486,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
-      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.6.tgz",
+      "integrity": "sha512-2SkqTjTSo2dYi/jzFbU9Plt1vk0+nNg8YC8rOXXea+iA3hfNJWebKYPs3xnOUf9+ZWhKAaxnQNUf2X9LOpeiMQ==",
       "cpu": [
         "x64"
       ],
@@ -503,9 +503,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
-      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.6.tgz",
+      "integrity": "sha512-SZHQlzvqv4Du5PrKE2faN0qlbsaW/3QQfUUc6yO2EjFcA83xnwm91UbEEVx4ApZ9Z5oG8Bxz4qPE+HFwtVcfyw==",
       "cpu": [
         "arm"
       ],
@@ -520,9 +520,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
-      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.6.tgz",
+      "integrity": "sha512-b967hU0gqKd9Drsh/UuAm21Khpoh6mPBSgz8mKRq4P5mVK8bpA+hQzmm/ZwGVULSNBzKdZPQBRT3+WuVavcWsQ==",
       "cpu": [
         "arm64"
       ],
@@ -537,9 +537,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
-      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.6.tgz",
+      "integrity": "sha512-aHWdQ2AAltRkLPOsKdi3xv0mZ8fUGPdlKEjIEhxCPm5yKEThcUjHpWB1idN74lfXGnZ5SULQSgtr5Qos5B0bPw==",
       "cpu": [
         "ia32"
       ],
@@ -554,9 +554,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
-      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.6.tgz",
+      "integrity": "sha512-VgKCsHdXRSQ7E1+QXGdRPlQ/e08bN6WMQb27/TMfV+vPjjTImuT9PmLXupRlC90S1JeNNW5lzkAEO/McKeJ2yg==",
       "cpu": [
         "loong64"
       ],
@@ -571,9 +571,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
-      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.6.tgz",
+      "integrity": "sha512-WViNlpivRKT9/py3kCmkHnn44GkGXVdXfdc4drNmRl15zVQ2+D2uFwdlGh6IuK5AAnGTo2qPB1Djppj+t78rzw==",
       "cpu": [
         "mips64el"
       ],
@@ -588,9 +588,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
-      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.6.tgz",
+      "integrity": "sha512-wyYKZ9NTdmAMb5730I38lBqVu6cKl4ZfYXIs31Baf8aoOtB4xSGi3THmDYt4BTFHk7/EcVixkOV2uZfwU3Q2Jw==",
       "cpu": [
         "ppc64"
       ],
@@ -605,9 +605,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
-      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.6.tgz",
+      "integrity": "sha512-KZh7bAGGcrinEj4qzilJ4hqTY3Dg2U82c8bv+e1xqNqZCrCyc+TL9AUEn5WGKDzm3CfC5RODE/qc96OcbIe33w==",
       "cpu": [
         "riscv64"
       ],
@@ -622,9 +622,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
-      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.6.tgz",
+      "integrity": "sha512-9N1LsTwAuE9oj6lHMyyAM+ucxGiVnEqUdp4v7IaMmrwb06ZTEVCIs3oPPplVsnjPfyjmxwHxHMF8b6vzUVAUGw==",
       "cpu": [
         "s390x"
       ],
@@ -639,9 +639,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
-      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.6.tgz",
+      "integrity": "sha512-A6bJB41b4lKFWRKNrWoP2LHsjVzNiaurf7wyj/XtFNTsnPuxwEBWHLty+ZE0dWBKuSK1fvKgrKaNjBS7qbFKig==",
       "cpu": [
         "x64"
       ],
@@ -656,9 +656,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
-      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.6.tgz",
+      "integrity": "sha512-IjA+DcwoVpjEvyxZddDqBY+uJ2Snc6duLpjmkXm/v4xuS3H+3FkLZlDm9ZsAbF9rsfP3zeA0/ArNDORZgrxR/Q==",
       "cpu": [
         "arm64"
       ],
@@ -673,9 +673,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
-      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.6.tgz",
+      "integrity": "sha512-dUXuZr5WenIDlMHdMkvDc1FAu4xdWixTCRgP7RQLBOkkGgwuuzaGSYcOpW4jFxzpzL1ejb8yF620UxAqnBrR9g==",
       "cpu": [
         "x64"
       ],
@@ -690,9 +690,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
-      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.6.tgz",
+      "integrity": "sha512-l8ZCvXP0tbTJ3iaqdNf3pjaOSd5ex/e6/omLIQCVBLmHTlfXW3zAxQ4fnDmPLOB1x9xrcSi/xtCWFwCZRIaEwg==",
       "cpu": [
         "arm64"
       ],
@@ -707,9 +707,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
-      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.6.tgz",
+      "integrity": "sha512-hKrmDa0aOFOr71KQ/19JC7az1P0GWtCN1t2ahYAf4O007DHZt/dW8ym5+CUdJhQ/qkZmI1HAF8KkJbEFtCL7gw==",
       "cpu": [
         "x64"
       ],
@@ -723,10 +723,27 @@
         "node": ">=18"
       }
     },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.6.tgz",
+      "integrity": "sha512-+SqBcAWoB1fYKmpWoQP4pGtx+pUUC//RNYhFdbcSA16617cchuryuhOCRpPsjCblKukAckWsV+aQ3UKT/RMPcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
-      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.6.tgz",
+      "integrity": "sha512-dyCGxv1/Br7MiSC42qinGL8KkG4kX0pEsdb0+TKhmJZgCUDBGmyo1/ArCjNGiOLiIAgdbWgmWgib4HoCi5t7kA==",
       "cpu": [
         "x64"
       ],
@@ -741,9 +758,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
-      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.6.tgz",
+      "integrity": "sha512-42QOgcZeZOvXfsCBJF5Afw73t4veOId//XD3i+/9gSkhSV6Gk3VPlWncctI+JcOyERv85FUo7RxuxGy+z8A43Q==",
       "cpu": [
         "arm64"
       ],
@@ -758,9 +775,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
-      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.6.tgz",
+      "integrity": "sha512-4AWhgXmDuYN7rJI6ORB+uU9DHLq/erBbuMoAuB4VWJTu5KtCgcKYPynF0YI1VkBNuEfjNlLrFr9KZPJzrtLkrQ==",
       "cpu": [
         "ia32"
       ],
@@ -775,9 +792,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
-      "integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.6.tgz",
+      "integrity": "sha512-NgJPHHbEpLQgDH2MjQu90pzW/5vvXIZ7KOnPyNBm92A6WgZ/7b6fJyUBjoumLqeOQQGqY2QjQxRo97ah4Sj0cA==",
       "cpu": [
         "x64"
       ],
@@ -834,9 +851,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
-      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -849,9 +866,9 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.2.tgz",
-      "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -909,9 +926,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz",
-      "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==",
+      "version": "9.30.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.30.1.tgz",
+      "integrity": "sha512-zXhuECFlyep42KZUhWjfvsmXGX39W8K8LFb8AWXM9gSV9dQB+MrJGLKvW6Zw0Ggnbpw0VHTtrhFXYe3Gym18jg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -932,19 +949,32 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
-      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
+      "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.14.0",
+        "@eslint/core": "^0.15.1",
         "levn": "^0.4.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1030,18 +1060,14 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -1054,27 +1080,17 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1141,16 +1157,16 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz",
-      "integrity": "sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==",
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
+      "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.1.tgz",
-      "integrity": "sha512-NELNvyEWZ6R9QMkiytB4/L4zSEaBC03KIXEghptLGLZWJ6VPrL63ooZQCOnlx36aQPGhzuOMwDerC1Eb2VmrLw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.2.tgz",
+      "integrity": "sha512-g0dF8P1e2QYPOj1gu7s/3LVP6kze9A7m6x0BZ9iTdXK8N5c2V7cpBKHV3/9A4Zd8xxavdhK0t4PnqjkqVmUc9Q==",
       "cpu": [
         "arm"
       ],
@@ -1162,9 +1178,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.1.tgz",
-      "integrity": "sha512-DXdQe1BJ6TK47ukAoZLehRHhfKnKg9BjnQYUu9gzhI8Mwa1d2fzxA1aw2JixHVl403bwp1+/o/NhhHtxWJBgEA==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.44.2.tgz",
+      "integrity": "sha512-Yt5MKrOosSbSaAK5Y4J+vSiID57sOvpBNBR6K7xAaQvk3MkcNVV0f9fE20T+41WYN8hDn6SGFlFrKudtx4EoxA==",
       "cpu": [
         "arm64"
       ],
@@ -1176,9 +1192,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.1.tgz",
-      "integrity": "sha512-5afxvwszzdulsU2w8JKWwY8/sJOLPzf0e1bFuvcW5h9zsEg+RQAojdW0ux2zyYAz7R8HvvzKCjLNJhVq965U7w==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.2.tgz",
+      "integrity": "sha512-EsnFot9ZieM35YNA26nhbLTJBHD0jTwWpPwmRVDzjylQT6gkar+zenfb8mHxWpRrbn+WytRRjE0WKsfaxBkVUA==",
       "cpu": [
         "arm64"
       ],
@@ -1190,9 +1206,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.1.tgz",
-      "integrity": "sha512-egpJACny8QOdHNNMZKf8xY0Is6gIMz+tuqXlusxquWu3F833DcMwmGM7WlvCO9sB3OsPjdC4U0wHw5FabzCGZg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.2.tgz",
+      "integrity": "sha512-dv/t1t1RkCvJdWWxQ2lWOO+b7cMsVw5YFaS04oHpZRWehI1h0fV1gF4wgGCTyQHHjJDfbNpwOi6PXEafRBBezw==",
       "cpu": [
         "x64"
       ],
@@ -1204,9 +1220,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.1.tgz",
-      "integrity": "sha512-DBVMZH5vbjgRk3r0OzgjS38z+atlupJ7xfKIDJdZZL6sM6wjfDNo64aowcLPKIx7LMQi8vybB56uh1Ftck/Atg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.44.2.tgz",
+      "integrity": "sha512-W4tt4BLorKND4qeHElxDoim0+BsprFTwb+vriVQnFFtT/P6v/xO5I99xvYnVzKWrK6j7Hb0yp3x7V5LUbaeOMg==",
       "cpu": [
         "arm64"
       ],
@@ -1218,9 +1234,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.1.tgz",
-      "integrity": "sha512-3FkydeohozEskBxNWEIbPfOE0aqQgB6ttTkJ159uWOFn42VLyfAiyD9UK5mhu+ItWzft60DycIN1Xdgiy8o/SA==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.44.2.tgz",
+      "integrity": "sha512-tdT1PHopokkuBVyHjvYehnIe20fxibxFCEhQP/96MDSOcyjM/shlTkZZLOufV3qO6/FQOSiJTBebhVc12JyPTA==",
       "cpu": [
         "x64"
       ],
@@ -1232,9 +1248,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.1.tgz",
-      "integrity": "sha512-wC53ZNDgt0pqx5xCAgNunkTzFE8GTgdZ9EwYGVcg+jEjJdZGtq9xPjDnFgfFozQI/Xm1mh+D9YlYtl+ueswNEg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.44.2.tgz",
+      "integrity": "sha512-+xmiDGGaSfIIOXMzkhJ++Oa0Gwvl9oXUeIiwarsdRXSe27HUIvjbSIpPxvnNsRebsNdUo7uAiQVgBD1hVriwSQ==",
       "cpu": [
         "arm"
       ],
@@ -1246,9 +1262,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.1.tgz",
-      "integrity": "sha512-jwKCca1gbZkZLhLRtsrka5N8sFAaxrGz/7wRJ8Wwvq3jug7toO21vWlViihG85ei7uJTpzbXZRcORotE+xyrLA==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.44.2.tgz",
+      "integrity": "sha512-bDHvhzOfORk3wt8yxIra8N4k/N0MnKInCW5OGZaeDYa/hMrdPaJzo7CSkjKZqX4JFUWjUGm88lI6QJLCM7lDrA==",
       "cpu": [
         "arm"
       ],
@@ -1260,9 +1276,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.1.tgz",
-      "integrity": "sha512-g0UBcNknsmmNQ8V2d/zD2P7WWfJKU0F1nu0k5pW4rvdb+BIqMm8ToluW/eeRmxCared5dD76lS04uL4UaNgpNA==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.2.tgz",
+      "integrity": "sha512-NMsDEsDiYghTbeZWEGnNi4F0hSbGnsuOG+VnNvxkKg0IGDvFh7UVpM/14mnMwxRxUf9AdAVJgHPvKXf6FpMB7A==",
       "cpu": [
         "arm64"
       ],
@@ -1274,9 +1290,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.1.tgz",
-      "integrity": "sha512-XZpeGB5TKEZWzIrj7sXr+BEaSgo/ma/kCgrZgL0oo5qdB1JlTzIYQKel/RmhT6vMAvOdM2teYlAaOGJpJ9lahg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.2.tgz",
+      "integrity": "sha512-lb5bxXnxXglVq+7imxykIp5xMq+idehfl+wOgiiix0191av84OqbjUED+PRC5OA8eFJYj5xAGcpAZ0pF2MnW+A==",
       "cpu": [
         "arm64"
       ],
@@ -1288,9 +1304,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.1.tgz",
-      "integrity": "sha512-bkCfDJ4qzWfFRCNt5RVV4DOw6KEgFTUZi2r2RuYhGWC8WhCA8lCAJhDeAmrM/fdiAH54m0mA0Vk2FGRPyzI+tw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.44.2.tgz",
+      "integrity": "sha512-Yl5Rdpf9pIc4GW1PmkUGHdMtbx0fBLE1//SxDmuf3X0dUC57+zMepow2LK0V21661cjXdTn8hO2tXDdAWAqE5g==",
       "cpu": [
         "loong64"
       ],
@@ -1302,9 +1318,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.1.tgz",
-      "integrity": "sha512-3mr3Xm+gvMX+/8EKogIZSIEF0WUu0HL9di+YWlJpO8CQBnoLAEL/roTCxuLncEdgcfJcvA4UMOf+2dnjl4Ut1A==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.44.2.tgz",
+      "integrity": "sha512-03vUDH+w55s680YYryyr78jsO1RWU9ocRMaeV2vMniJJW/6HhoTBwyyiiTPVHNWLnhsnwcQ0oH3S9JSBEKuyqw==",
       "cpu": [
         "ppc64"
       ],
@@ -1316,9 +1332,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.1.tgz",
-      "integrity": "sha512-3rwCIh6MQ1LGrvKJitQjZFuQnT2wxfU+ivhNBzmxXTXPllewOF7JR1s2vMX/tWtUYFgphygxjqMl76q4aMotGw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.44.2.tgz",
+      "integrity": "sha512-iYtAqBg5eEMG4dEfVlkqo05xMOk6y/JXIToRca2bAWuqjrJYJlx/I7+Z+4hSrsWU8GdJDFPL4ktV3dy4yBSrzg==",
       "cpu": [
         "riscv64"
       ],
@@ -1330,9 +1346,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.1.tgz",
-      "integrity": "sha512-LdIUOb3gvfmpkgFZuccNa2uYiqtgZAz3PTzjuM5bH3nvuy9ty6RGc/Q0+HDFrHrizJGVpjnTZ1yS5TNNjFlklw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.44.2.tgz",
+      "integrity": "sha512-e6vEbgaaqz2yEHqtkPXa28fFuBGmUJ0N2dOJK8YUfijejInt9gfCSA7YDdJ4nYlv67JfP3+PSWFX4IVw/xRIPg==",
       "cpu": [
         "riscv64"
       ],
@@ -1344,9 +1360,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.1.tgz",
-      "integrity": "sha512-oIE6M8WC9ma6xYqjvPhzZYk6NbobIURvP/lEbh7FWplcMO6gn7MM2yHKA1eC/GvYwzNKK/1LYgqzdkZ8YFxR8g==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.44.2.tgz",
+      "integrity": "sha512-evFOtkmVdY3udE+0QKrV5wBx7bKI0iHz5yEVx5WqDJkxp9YQefy4Mpx3RajIVcM6o7jxTvVd/qpC1IXUhGc1Mw==",
       "cpu": [
         "s390x"
       ],
@@ -1358,9 +1374,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.1.tgz",
-      "integrity": "sha512-cWBOvayNvA+SyeQMp79BHPK8ws6sHSsYnK5zDcsC3Hsxr1dgTABKjMnMslPq1DvZIp6uO7kIWhiGwaTdR4Og9A==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.2.tgz",
+      "integrity": "sha512-/bXb0bEsWMyEkIsUL2Yt5nFB5naLAwyOWMEviQfQY1x3l5WsLKgvZf66TM7UTfED6erckUVUJQ/jJ1FSpm3pRQ==",
       "cpu": [
         "x64"
       ],
@@ -1372,9 +1388,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.1.tgz",
-      "integrity": "sha512-y5CbN44M+pUCdGDlZFzGGBSKCA4A/J2ZH4edTYSSxFg7ce1Xt3GtydbVKWLlzL+INfFIZAEg1ZV6hh9+QQf9YQ==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.2.tgz",
+      "integrity": "sha512-3D3OB1vSSBXmkGEZR27uiMRNiwN08/RVAcBKwhUYPaiZ8bcvdeEwWPvbnXvvXHY+A/7xluzcN+kaiOFNiOZwWg==",
       "cpu": [
         "x64"
       ],
@@ -1386,9 +1402,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.1.tgz",
-      "integrity": "sha512-lZkCxIrjlJlMt1dLO/FbpZbzt6J/A8p4DnqzSa4PWqPEUUUnzXLeki/iyPLfV0BmHItlYgHUqJe+3KiyydmiNQ==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.2.tgz",
+      "integrity": "sha512-VfU0fsMK+rwdK8mwODqYeM2hDrF2WiHaSmCBrS7gColkQft95/8tphyzv2EupVxn3iE0FI78wzffoULH1G+dkw==",
       "cpu": [
         "arm64"
       ],
@@ -1400,9 +1416,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.1.tgz",
-      "integrity": "sha512-+psFT9+pIh2iuGsxFYYa/LhS5MFKmuivRsx9iPJWNSGbh2XVEjk90fmpUEjCnILPEPJnikAU6SFDiEUyOv90Pg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.44.2.tgz",
+      "integrity": "sha512-+qMUrkbUurpE6DVRjiJCNGZBGo9xM4Y0FXU5cjgudWqIBWbcLkjE3XprJUsOFgC6xjBClwVa9k6O3A7K3vxb5Q==",
       "cpu": [
         "ia32"
       ],
@@ -1414,9 +1430,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.1.tgz",
-      "integrity": "sha512-Wq2zpapRYLfi4aKxf2Xff0tN+7slj2d4R87WEzqw7ZLsVvO5zwYCIuEGSZYiK41+GlwUo1HiR+GdkLEJnCKTCw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.2.tgz",
+      "integrity": "sha512-3+QZROYfJ25PDcxFF66UEk8jGWigHJeecZILvkPkyQN7oc5BvFo4YEXFkOs154j3FTMp9mn9Ky8RCOwastduEA==",
       "cpu": [
         "x64"
       ],
@@ -1457,9 +1473,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.79.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.79.0.tgz",
-      "integrity": "sha512-s+epTqqLM0/TbJzMAK7OEhZIzh63P9sWz5HEFc5XHL4FvKQXQkcjI8F3nee+H/xVVn7mrP610nVXwOytTSYd0w==",
+      "version": "5.82.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz",
+      "integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -1467,12 +1483,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.79.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.79.0.tgz",
-      "integrity": "sha512-DjC4JIYZnYzxaTzbg3osOU63VNLP67dOrWet2cZvXgmgwAXNxfS52AMq86M5++ILuzW+BqTUEVMTjhrZ7/XBuA==",
+      "version": "5.82.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz",
+      "integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.79.0"
+        "@tanstack/query-core": "5.82.0"
       },
       "funding": {
         "type": "github",
@@ -1528,9 +1544,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "dev": true,
       "license": "MIT"
     },
@@ -1542,9 +1558,9 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.14",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "devOptional": true,
       "license": "MIT"
     },
@@ -1570,17 +1586,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.33.0.tgz",
-      "integrity": "sha512-CACyQuqSHt7ma3Ns601xykeBK/rDeZa3w6IS6UtMQbixO5DWy+8TilKkviGDH6jtWCo8FGRKEK5cLLkPvEammQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.36.0.tgz",
+      "integrity": "sha512-lZNihHUVB6ZZiPBNgOQGSxUASI7UJWhT8nHyUGCnaQ28XFCw98IfrMCG3rUl1uwUWoAvodJQby2KTs79UTcrAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.33.0",
-        "@typescript-eslint/type-utils": "8.33.0",
-        "@typescript-eslint/utils": "8.33.0",
-        "@typescript-eslint/visitor-keys": "8.33.0",
+        "@typescript-eslint/scope-manager": "8.36.0",
+        "@typescript-eslint/type-utils": "8.36.0",
+        "@typescript-eslint/utils": "8.36.0",
+        "@typescript-eslint/visitor-keys": "8.36.0",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -1594,7 +1610,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.33.0",
+        "@typescript-eslint/parser": "^8.36.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <5.9.0"
       }
@@ -1610,16 +1626,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.33.0.tgz",
-      "integrity": "sha512-JaehZvf6m0yqYp34+RVnihBAChkqeH+tqqhS0GuX1qgPpwLvmTPheKEs6OeCK6hVJgXZHJ2vbjnC9j119auStQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.36.0.tgz",
+      "integrity": "sha512-FuYgkHwZLuPbZjQHzJXrtXreJdFMKl16BFYyRrLxDhWr6Qr7Kbcu2s1Yhu8tsiMXw1S0W1pjfFfYEt+R604s+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.33.0",
-        "@typescript-eslint/types": "8.33.0",
-        "@typescript-eslint/typescript-estree": "8.33.0",
-        "@typescript-eslint/visitor-keys": "8.33.0",
+        "@typescript-eslint/scope-manager": "8.36.0",
+        "@typescript-eslint/types": "8.36.0",
+        "@typescript-eslint/typescript-estree": "8.36.0",
+        "@typescript-eslint/visitor-keys": "8.36.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1635,14 +1651,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.33.0.tgz",
-      "integrity": "sha512-d1hz0u9l6N+u/gcrk6s6gYdl7/+pp8yHheRTqP6X5hVDKALEaTn8WfGiit7G511yueBEL3OpOEpD+3/MBdoN+A==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.36.0.tgz",
+      "integrity": "sha512-JAhQFIABkWccQYeLMrHadu/fhpzmSQ1F1KXkpzqiVxA/iYI6UnRt2trqXHt1sYEcw1mxLnB9rKMsOxXPxowN/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.33.0",
-        "@typescript-eslint/types": "^8.33.0",
+        "@typescript-eslint/tsconfig-utils": "^8.36.0",
+        "@typescript-eslint/types": "^8.36.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1651,17 +1667,20 @@
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.33.0.tgz",
-      "integrity": "sha512-LMi/oqrzpqxyO72ltP+dBSP6V0xiUb4saY7WLtxSfiNEBI8m321LLVFU9/QDJxjDQG9/tjSqKz/E3380TEqSTw==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.36.0.tgz",
+      "integrity": "sha512-wCnapIKnDkN62fYtTGv2+RY8FlnBYA3tNm0fm91kc2BjPhV2vIjwwozJ7LToaLAyb1ca8BxrS7vT+Pvvf7RvqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.33.0",
-        "@typescript-eslint/visitor-keys": "8.33.0"
+        "@typescript-eslint/types": "8.36.0",
+        "@typescript-eslint/visitor-keys": "8.36.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1672,9 +1691,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.33.0.tgz",
-      "integrity": "sha512-sTkETlbqhEoiFmGr1gsdq5HyVbSOF0145SYDJ/EQmXHtKViCaGvnyLqWFFHtEXoS0J1yU8Wyou2UGmgW88fEug==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.36.0.tgz",
+      "integrity": "sha512-Nhh3TIEgN18mNbdXpd5Q8mSCBnrZQeY9V7Ca3dqYvNDStNIGRmJA6dmrIPMJ0kow3C7gcQbpsG2rPzy1Ks/AnA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1689,14 +1708,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.33.0.tgz",
-      "integrity": "sha512-lScnHNCBqL1QayuSrWeqAL5GmqNdVUQAAMTaCwdYEdWfIrSrOGzyLGRCHXcCixa5NK6i5l0AfSO2oBSjCjf4XQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.36.0.tgz",
+      "integrity": "sha512-5aaGYG8cVDd6cxfk/ynpYzxBRZJk7w/ymto6uiyUFtdCozQIsQWh7M28/6r57Fwkbweng8qAzoMCPwSJfWlmsg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.33.0",
-        "@typescript-eslint/utils": "8.33.0",
+        "@typescript-eslint/typescript-estree": "8.36.0",
+        "@typescript-eslint/utils": "8.36.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -1713,9 +1732,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.33.0.tgz",
-      "integrity": "sha512-DKuXOKpM5IDT1FA2g9x9x1Ug81YuKrzf4mYX8FAVSNu5Wo/LELHWQyM1pQaDkI42bX15PWl0vNPt1uGiIFUOpg==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.36.0.tgz",
+      "integrity": "sha512-xGms6l5cTJKQPZOKM75Dl9yBfNdGeLRsIyufewnxT4vZTrjC0ImQT4fj8QmtJK84F58uSh5HVBSANwcfiXxABQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1727,16 +1746,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.33.0.tgz",
-      "integrity": "sha512-vegY4FQoB6jL97Tu/lWRsAiUUp8qJTqzAmENH2k59SJhw0Th1oszb9Idq/FyyONLuNqT1OADJPXfyUNOR8SzAQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.36.0.tgz",
+      "integrity": "sha512-JaS8bDVrfVJX4av0jLpe4ye0BpAaUW7+tnS4Y4ETa3q7NoZgzYbN9zDQTJ8kPb5fQ4n0hliAt9tA4Pfs2zA2Hg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.33.0",
-        "@typescript-eslint/tsconfig-utils": "8.33.0",
-        "@typescript-eslint/types": "8.33.0",
-        "@typescript-eslint/visitor-keys": "8.33.0",
+        "@typescript-eslint/project-service": "8.36.0",
+        "@typescript-eslint/tsconfig-utils": "8.36.0",
+        "@typescript-eslint/types": "8.36.0",
+        "@typescript-eslint/visitor-keys": "8.36.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1756,9 +1775,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1795,16 +1814,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.33.0.tgz",
-      "integrity": "sha512-lPFuQaLA9aSNa7D5u2EpRiqdAUhzShwGg/nhpBlc4GR6kcTABttCuyjFs8BcEZ8VWrjCBof/bePhP3Q3fS+Yrw==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.36.0.tgz",
+      "integrity": "sha512-VOqmHu42aEMT+P2qYjylw6zP/3E/HvptRwdn/PZxyV27KhZg2IOszXod4NcXisWzPAGSS4trE/g4moNj6XmH2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.33.0",
-        "@typescript-eslint/types": "8.33.0",
-        "@typescript-eslint/typescript-estree": "8.33.0"
+        "@typescript-eslint/scope-manager": "8.36.0",
+        "@typescript-eslint/types": "8.36.0",
+        "@typescript-eslint/typescript-estree": "8.36.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1819,14 +1838,14 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.33.0.tgz",
-      "integrity": "sha512-7RW7CMYoskiz5OOGAWjJFxgb7c5UNjTG292gYhWeOAcFmYCtVCSqjqSBj5zMhxbXo2JOW95YYrUWJfU0zrpaGQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.36.0.tgz",
+      "integrity": "sha512-vZrhV2lRPWDuGoxcmrzRZyxAggPL+qp3WzUrlZD+slFueDiYHxeBa34dUXPuC0RmGKzl4lS5kFJYvKCq9cnNDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.33.0",
-        "eslint-visitor-keys": "^4.2.0"
+        "@typescript-eslint/types": "8.36.0",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1837,16 +1856,16 @@
       }
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz",
-      "integrity": "sha512-JuLWaEqypaJmOJPLWwO335Ig6jSgC1FTONCWAxnqcQthLTK/Yc9aH6hr9z/87xciejbQcnP3GnA1FWUSWeXaeg==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
+      "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
-        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
-        "@rolldown/pluginutils": "1.0.0-beta.9",
+        "@babel/core": "^7.27.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.19",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.17.0"
       },
@@ -1854,13 +1873,13 @@
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -2006,9 +2025,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -2037,9 +2056,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2061,9 +2080,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
-      "integrity": "sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==",
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
       "dev": true,
       "funding": [
         {
@@ -2081,8 +2100,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001718",
-        "electron-to-chromium": "^1.5.160",
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
         "node-releases": "^2.0.19",
         "update-browserslist-db": "^1.1.3"
       },
@@ -2127,9 +2146,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001720",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
-      "integrity": "sha512-Ec/2yV2nNPwb4DnTANEV99ZWwm3ZWfdlfkQbWSDDt+PsXEVYwlhPH8tdMaPunYTKKmz7AnHi2oNEi1GcmKCD8g==",
+      "version": "1.0.30001727",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
+      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
       "dev": true,
       "funding": [
         {
@@ -2372,9 +2391,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.161",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.161.tgz",
-      "integrity": "sha512-hwtetwfKNZo/UlwHIVBlKZVdy7o8bIZxxKs0Mv/ROPiQQQmDgdm5a+KvKtBsxM8ZjFzTaCeLoodZ8jiBE3o9rA==",
+      "version": "1.5.181",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.181.tgz",
+      "integrity": "sha512-+ISMj8OIQ+0qEeDj14Rt8WwcTOiqHyAB+5bnK1K7xNNLjBJ4hRCQfUkw8RWtcLbfBzDwc15ZnKH0c7SNOfwiyA==",
       "dev": true,
       "license": "ISC"
     },
@@ -2431,9 +2450,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.25.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
-      "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.6.tgz",
+      "integrity": "sha512-GVuzuUwtdsghE3ocJ9Bs8PNoF13HNQ5TXbEi2AhvVb8xU1Iwt9Fos9FEamfoee+u/TOsn7GUWc04lz46n2bbTg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -2444,31 +2463,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.5",
-        "@esbuild/android-arm": "0.25.5",
-        "@esbuild/android-arm64": "0.25.5",
-        "@esbuild/android-x64": "0.25.5",
-        "@esbuild/darwin-arm64": "0.25.5",
-        "@esbuild/darwin-x64": "0.25.5",
-        "@esbuild/freebsd-arm64": "0.25.5",
-        "@esbuild/freebsd-x64": "0.25.5",
-        "@esbuild/linux-arm": "0.25.5",
-        "@esbuild/linux-arm64": "0.25.5",
-        "@esbuild/linux-ia32": "0.25.5",
-        "@esbuild/linux-loong64": "0.25.5",
-        "@esbuild/linux-mips64el": "0.25.5",
-        "@esbuild/linux-ppc64": "0.25.5",
-        "@esbuild/linux-riscv64": "0.25.5",
-        "@esbuild/linux-s390x": "0.25.5",
-        "@esbuild/linux-x64": "0.25.5",
-        "@esbuild/netbsd-arm64": "0.25.5",
-        "@esbuild/netbsd-x64": "0.25.5",
-        "@esbuild/openbsd-arm64": "0.25.5",
-        "@esbuild/openbsd-x64": "0.25.5",
-        "@esbuild/sunos-x64": "0.25.5",
-        "@esbuild/win32-arm64": "0.25.5",
-        "@esbuild/win32-ia32": "0.25.5",
-        "@esbuild/win32-x64": "0.25.5"
+        "@esbuild/aix-ppc64": "0.25.6",
+        "@esbuild/android-arm": "0.25.6",
+        "@esbuild/android-arm64": "0.25.6",
+        "@esbuild/android-x64": "0.25.6",
+        "@esbuild/darwin-arm64": "0.25.6",
+        "@esbuild/darwin-x64": "0.25.6",
+        "@esbuild/freebsd-arm64": "0.25.6",
+        "@esbuild/freebsd-x64": "0.25.6",
+        "@esbuild/linux-arm": "0.25.6",
+        "@esbuild/linux-arm64": "0.25.6",
+        "@esbuild/linux-ia32": "0.25.6",
+        "@esbuild/linux-loong64": "0.25.6",
+        "@esbuild/linux-mips64el": "0.25.6",
+        "@esbuild/linux-ppc64": "0.25.6",
+        "@esbuild/linux-riscv64": "0.25.6",
+        "@esbuild/linux-s390x": "0.25.6",
+        "@esbuild/linux-x64": "0.25.6",
+        "@esbuild/netbsd-arm64": "0.25.6",
+        "@esbuild/netbsd-x64": "0.25.6",
+        "@esbuild/openbsd-arm64": "0.25.6",
+        "@esbuild/openbsd-x64": "0.25.6",
+        "@esbuild/openharmony-arm64": "0.25.6",
+        "@esbuild/sunos-x64": "0.25.6",
+        "@esbuild/win32-arm64": "0.25.6",
+        "@esbuild/win32-ia32": "0.25.6",
+        "@esbuild/win32-x64": "0.25.6"
       }
     },
     "node_modules/escalade": {
@@ -2495,19 +2515,19 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.28.0.tgz",
-      "integrity": "sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==",
+      "version": "9.30.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.30.1.tgz",
+      "integrity": "sha512-zmxXPNMOXmwm9E0yQLi5uqXHs7uq2UIiqEKo3Gq+3fwo1XrJ+hijAZImyF7hclW3E6oHz43Yk3RP8at6OTKflQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.20.0",
-        "@eslint/config-helpers": "^0.2.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.0",
         "@eslint/core": "^0.14.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.28.0",
+        "@eslint/js": "9.30.1",
         "@eslint/plugin-kit": "^0.3.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -2519,9 +2539,9 @@
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -2596,9 +2616,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -2613,9 +2633,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2626,15 +2646,15 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2852,14 +2872,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -3025,9 +3046,9 @@
       }
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3051,9 +3072,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
-      "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.3.0.tgz",
+      "integrity": "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3803,9 +3824,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz",
-      "integrity": "sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -4155,13 +4176,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.41.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
-      "integrity": "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.44.2.tgz",
+      "integrity": "sha512-PVoapzTwSEcelaWGth3uR66u7ZRo6qhPHc0f2uRO9fX6XDVNrIiGYS0Pj9+R8yIIYSD/mCx2b16Ws9itljKSPg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.7"
+        "@types/estree": "1.0.8"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -4171,26 +4192,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.41.1",
-        "@rollup/rollup-android-arm64": "4.41.1",
-        "@rollup/rollup-darwin-arm64": "4.41.1",
-        "@rollup/rollup-darwin-x64": "4.41.1",
-        "@rollup/rollup-freebsd-arm64": "4.41.1",
-        "@rollup/rollup-freebsd-x64": "4.41.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.41.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.41.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.41.1",
-        "@rollup/rollup-linux-arm64-musl": "4.41.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.41.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.41.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.41.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.41.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.41.1",
-        "@rollup/rollup-linux-x64-gnu": "4.41.1",
-        "@rollup/rollup-linux-x64-musl": "4.41.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.41.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.41.1",
-        "@rollup/rollup-win32-x64-msvc": "4.41.1",
+        "@rollup/rollup-android-arm-eabi": "4.44.2",
+        "@rollup/rollup-android-arm64": "4.44.2",
+        "@rollup/rollup-darwin-arm64": "4.44.2",
+        "@rollup/rollup-darwin-x64": "4.44.2",
+        "@rollup/rollup-freebsd-arm64": "4.44.2",
+        "@rollup/rollup-freebsd-x64": "4.44.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.44.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.44.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.2",
+        "@rollup/rollup-linux-arm64-musl": "4.44.2",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.44.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.44.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.44.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.44.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.44.2",
+        "@rollup/rollup-linux-x64-gnu": "4.44.2",
+        "@rollup/rollup-linux-x64-musl": "4.44.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.44.2",
+        "@rollup/rollup-win32-x64-msvc": "4.44.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -4552,9 +4573,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
-      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -4646,15 +4667,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.33.0.tgz",
-      "integrity": "sha512-5YmNhF24ylCsvdNW2oJwMzTbaeO4bg90KeGtMjUw0AGtHksgEPLRTUil+coHwCfiu4QjVJFnjp94DmU6zV7DhQ==",
+      "version": "8.36.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.36.0.tgz",
+      "integrity": "sha512-fTCqxthY+h9QbEgSIBfL9iV6CvKDFuoxg6bHPNpJ9HIUzS+jy2lCEyCmGyZRWEBSaykqcDPf1SJ+BfCI8DRopA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.33.0",
-        "@typescript-eslint/parser": "8.33.0",
-        "@typescript-eslint/utils": "8.33.0"
+        "@typescript-eslint/eslint-plugin": "8.36.0",
+        "@typescript-eslint/parser": "8.36.0",
+        "@typescript-eslint/utils": "8.36.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4826,9 +4847,9 @@
       }
     },
     "node_modules/vite/node_modules/fdir": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
-      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx
index 21bb3b6..b708336 100644
--- a/banquise-website/src/App.tsx
+++ b/banquise-website/src/App.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Navigation } from './components/layout/Navigation';
+import React from 'react';
+import { ModernNavigation } from './components/layout/ModernNavigation';
 import { HeroSection } from './components/sections/HeroSection';
 import { ServicesSection } from './components/sections/ServicesSection';
 import { TechFeaturesSection } from './components/sections/TechFeaturesSection';
@@ -7,32 +7,102 @@ import { AboutSection } from './components/sections/AboutSection';
 import { Footer } from './components/layout/Footer';
 import { Popup } from './components/ui/Popup';
 import { ScrollToTopButton } from './components/ui/ScrollToTopButton';
-import { ParallaxBackground } from './components/ui/ParallaxBackground';
-import { LanguageSwitcher } from './components/ui/LanguageSwitcher';
+import { ModernLanguageSwitcher } from './components/ui/ModernLanguageSwitcher';
 import { useTranslation } from './hooks/useTranslation';
-import type { Service } from './types/service';
+import { useServiceModal } from './hooks/useServiceModal';
+import { useAccordion } from './hooks/useAccordion';
+import { useOceanDepthEffect } from './hooks/useOceanDepthEffect';
 
 const App: React.FC = () => {
   const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
-  const [selectedService, setSelectedService] = useState<Service | null>(null);
-  const [openAccordion, setOpenAccordion] = useState<string | null>(null);
-
-  const toggleAccordion = (title: string) => {
-    setOpenAccordion(openAccordion === title ? null : title);
-  };
+  const { selectedService, openServiceModal, closeServiceModal } = useServiceModal();
+  const { openAccordion, toggleAccordion } = useAccordion();
+  const scrollDepth = useOceanDepthEffect();
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark text-white overflow-x-hidden relative">
-      {/* Background Effects */}
-      <ParallaxBackground />
+    <div className="min-h-screen relative overflow-x-hidden">
+      {/* Arrière-plan océanique uniforme avec assombrissement progressif basé sur le scroll */}
+      <div className="fixed inset-0 pointer-events-none">
+        {/* Dégradé principal océanique - Surface (clair) vers abysses (très sombre) */}
+        <div className="absolute inset-0 bg-gradient-to-b from-banquise-blue-light via-banquise-blue via-banquise-blue-dark to-banquise-blue-dark"></div>
+        
+        {/* Couche de profondeur progressive basée sur le scroll - Plus intense */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/60 to-banquise-blue-dark transition-opacity duration-500"
+          style={{ opacity: scrollDepth * 0.9 }}
+        ></div>
+        
+        {/* Effet de profondeur supplémentaire pour les moyennes profondeurs - Plus sombre */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/70 to-banquise-blue-dark transition-opacity duration-500"
+          style={{ opacity: Math.max(0, (scrollDepth - 0.2) * 1.5) }}
+        ></div>
+        
+        {/* Assombrissement pour les grandes profondeurs - Plus intense */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/80 to-slate-900 transition-opacity duration-500"
+          style={{ opacity: Math.max(0, (scrollDepth - 0.5) * 2) }}
+        ></div>
+        
+        {/* Assombrissement final pour les abysses - Très sombre */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-b from-banquise-blue-dark/50 to-slate-900 transition-opacity duration-500"
+          style={{ opacity: Math.max(0, (scrollDepth - 0.7) * 2.5) }}
+        ></div>
+        
+        {/* Rayons de lumière subtils qui percent l'eau depuis la surface */}
+        <div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/4 via-transparent to-transparent"></div>
+        <div className="absolute inset-0 bg-gradient-to-bl from-transparent via-banquise-blue-lightest/2 to-transparent"></div>
+        
+        {/* Effet de scintillement subtil avec animations océaniques */}
+        <div className="absolute inset-0">
+          <div className="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/8 to-transparent animate-ocean-shimmer"></div>
+          <div className="absolute top-0 left-2/3 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/15 via-banquise-blue-lightest/6 to-transparent animate-ocean-shimmer delay-1000"></div>
+          <div className="absolute top-0 left-3/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/10 via-banquise-blue-lightest/4 to-transparent animate-ocean-shimmer delay-2000"></div>
+        </div>
+        
+        {/* Particules flottantes (bulles) pour l'effet sous-marin avec animations variées */}
+        <div className="absolute inset-0">
+          {/* Bulles réparties sur toute la hauteur pour l'effet océanique continu */}
+          <div className="absolute top-1/6 left-1/5 w-2 h-2 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float"></div>
+          <div className="absolute top-1/4 left-3/4 w-1 h-1 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-500"></div>
+          <div className="absolute top-1/3 left-1/3 w-3 h-3 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-slow"></div>
+          <div className="absolute top-1/2 left-4/5 w-1.5 h-1.5 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-1000"></div>
+          <div className="absolute top-2/3 left-1/6 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-slow delay-1500"></div>
+          <div className="absolute top-3/4 left-2/3 w-1 h-1 bg-banquise-blue-lightest/22 rounded-full animate-bubble-float-fast delay-700"></div>
+          <div className="absolute top-5/6 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-300"></div>
+          <div className="absolute top-11/12 left-3/5 w-2 h-2 bg-banquise-blue-lightest/6 rounded-full animate-bubble-float-slow delay-2000"></div>
+          
+          {/* Bulles supplémentaires pour un effet plus dense */}
+          <div className="absolute top-1/8 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-800"></div>
+          <div className="absolute top-3/8 left-1/8 w-2 h-2 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-1200"></div>
+          <div className="absolute top-5/8 left-7/8 w-1 h-1 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600"></div>
+          <div className="absolute top-7/8 left-1/4 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-fast delay-1800"></div>
+          <div className="absolute top-1/7 left-5/6 w-1 h-1 bg-banquise-blue-lightest/28 rounded-full animate-bubble-float delay-400"></div>
+          <div className="absolute top-2/7 left-2/5 w-1.5 h-1.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-slow delay-900"></div>
+          <div className="absolute top-4/7 left-3/8 w-2 h-2 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-fast delay-1400"></div>
+          <div className="absolute top-6/7 left-4/5 w-1 h-1 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-200"></div>
+          
+          {/* Bulles très petites pour densité */}
+          <div className="absolute top-1/10 left-3/10 w-0.5 h-0.5 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float-fast delay-100"></div>
+          <div className="absolute top-3/10 left-7/10 w-0.5 h-0.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float delay-1100"></div>
+          <div className="absolute top-7/10 left-1/10 w-0.5 h-0.5 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-1700"></div>
+          <div className="absolute top-9/10 left-9/10 w-0.5 h-0.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-2200"></div>
+          
+          {/* Bulles moyennes pour variation */}
+          <div className="absolute top-1/5 left-4/7 w-3 h-3 bg-banquise-blue-lightest/5 rounded-full animate-bubble-float-slow delay-1600"></div>
+          <div className="absolute top-2/5 left-6/7 w-2.5 h-2.5 bg-banquise-blue-lightest/7 rounded-full animate-bubble-float delay-800"></div>
+          <div className="absolute top-4/5 left-2/7 w-3.5 h-3.5 bg-banquise-blue-lightest/4 rounded-full animate-bubble-float-slow delay-2400"></div>
+        </div>
+      </div>
       
-      {/* Main Content */}
-      <div className="relative z-10">
-        {/* Navigation avec sélecteur de langue */}
-        <Navigation 
+      {/* Contenu principal avec arrière-plan océanique uniforme */}
+      <div className="relative z-10 text-white">
+        {/* Navigation flottante */}
+        <ModernNavigation 
           translations={t.navigation}
           languageSwitcher={
-            <LanguageSwitcher 
+            <ModernLanguageSwitcher 
               currentLanguage={currentLanguage}
               onLanguageChange={changeLanguage}
               availableLanguages={availableLanguages}
@@ -40,16 +110,23 @@ const App: React.FC = () => {
           }
         />
         
+        {/* Section Hero - Surface de l'océan */}
         <HeroSection translations={t.hero} />
         
+        {/* Section Services */}
         <ServicesSection 
           services={t.services} 
-          onServiceClick={setSelectedService}
+          onServiceClick={openServiceModal}
           translations={t.common}
         />
         
+        {/* Section TechFeatures */}
         <TechFeaturesSection />
+        
+        {/* Section About */}
         <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
+        
+        {/* Footer */}
         <Footer />
       </div>
 
@@ -59,7 +136,7 @@ const App: React.FC = () => {
       {selectedService && (
         <Popup 
           service={selectedService} 
-          onClose={() => setSelectedService(null)}
+          onClose={closeServiceModal}
           translations={t.common}
         />
       )}
diff --git a/banquise-website/src/components/common/Button.tsx b/banquise-website/src/components/common/Button.tsx
new file mode 100644
index 0000000..edf80a4
--- /dev/null
+++ b/banquise-website/src/components/common/Button.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { componentStyles, mergeClasses } from '../../styles/designSystem';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'discord' | 'auth' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+const sizeClasses = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 lg:px-6 py-2.5 lg:py-3 text-sm lg:text-base',
+  lg: 'px-6 py-3 text-base lg:text-lg',
+};
+
+const variantClasses = {
+  primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light hover:shadow-banquise-blue/25',
+  discord: 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 hover:shadow-indigo-500/25',
+  auth: 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue hover:shadow-banquise-blue-light/25',
+  secondary: 'bg-white/10 hover:bg-white/20 border border-white/20',
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  loading = false,
+  children,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseClasses = mergeClasses(
+    componentStyles.button.base,
+    sizeClasses[size],
+    variantClasses[variant],
+    fullWidth ? 'w-full' : '',
+    (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '',
+    className
+  );
+
+  return (
+    <button
+      className={baseClasses}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && (
+        <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      )}
+      {leftIcon && !loading && <span className="mr-2">{leftIcon}</span>}
+      {children}
+      {rightIcon && !loading && <span className="ml-2">{rightIcon}</span>}
+    </button>
+  );
+};
diff --git a/banquise-website/src/components/common/Card.tsx b/banquise-website/src/components/common/Card.tsx
new file mode 100644
index 0000000..57bf7c1
--- /dev/null
+++ b/banquise-website/src/components/common/Card.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { componentStyles, mergeClasses } from '../../styles/designSystem';
+
+interface CardProps {
+  variant?: 'default' | 'interactive' | 'service';
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const variantClasses = {
+  default: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
+  interactive: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
+  service: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
+};
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  className = '',
+  children,
+  onClick,
+}) => {
+  const cardClasses = mergeClasses(
+    componentStyles.card.base,
+    variantClasses[variant],
+    className
+  );
+
+  const Component = onClick ? 'button' : 'div';
+
+  return (
+    <Component
+      className={cardClasses}
+      onClick={onClick}
+      {...(onClick ? { type: 'button' } : {})}
+    >
+      {children}
+    </Component>
+  );
+};
diff --git a/banquise-website/src/components/common/ServiceCard.tsx b/banquise-website/src/components/common/ServiceCard.tsx
new file mode 100644
index 0000000..1c4e955
--- /dev/null
+++ b/banquise-website/src/components/common/ServiceCard.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { componentStyles, mergeClasses } from '../../styles/designSystem';
+import type { Service } from '../../types/service';
+
+interface ServiceCardProps {
+  service: Service;
+  onServiceClick: (service: Service) => void;
+  discoverFeaturesText: string;
+  className?: string;
+}
+
+export const ServiceCard: React.FC<ServiceCardProps> = ({
+  service,
+  onServiceClick,
+  discoverFeaturesText,
+  className = '',
+}) => {
+  const cardClasses = mergeClasses(
+    'group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer',
+    componentStyles.card.base,
+    componentStyles.card.gradient,
+    'hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
+    className
+  );
+
+  const handleClick = () => {
+    onServiceClick(service);
+  };
+
+  return (
+    <div className={cardClasses} onClick={handleClick}>
+      {/* Icon */}
+      <div className="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto">
+        {service.icon}
+      </div>
+      
+      {/* Service name */}
+      <h3 className="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">
+        {service.name}
+      </h3>
+      
+      {/* Short description */}
+      <p className="text-banquise-gray/80 leading-relaxed mb-6 sm:mb-8 text-center text-sm sm:text-base">
+        {service.description.split('.')[0]}.
+      </p>
+      
+      {/* CTA */}
+      <div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300 text-sm sm:text-base">
+        <span className="text-center">{discoverFeaturesText}</span>
+        <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
+      </div>
+      
+      {/* Hover effect */}
+      <div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+    </div>
+  );
+};
diff --git a/banquise-website/src/components/layout/Footer.tsx b/banquise-website/src/components/layout/Footer.tsx
index 3d70705..0993647 100644
--- a/banquise-website/src/components/layout/Footer.tsx
+++ b/banquise-website/src/components/layout/Footer.tsx
@@ -2,85 +2,78 @@ import React from 'react';
 import { URLS, SITE_CONFIG } from '../../config/constants';
 
 export const Footer: React.FC = () => (
-  <footer className="bg-banquise-blue-dark text-white py-12 sm:py-16 md:py-20 px-4 sm:px-6 md:px-8 relative z-10 border-t border-banquise-blue-lightest/20 w-full box-border">
-    <div className="flex flex-col md:flex-row justify-between max-w-6xl mx-auto gap-6 sm:gap-8">
-      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
-        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
-          Services
-        </h4>
-        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
-          <li>
-            <a href={URLS.services.wiki} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Wiki
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.gitea} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Gitea
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.panel} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Panel
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.pelican} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Pelican
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.intra} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Intranet
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.mails} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Webmail
-            </a>
-          </li>
-          <li>
-            <a href={URLS.services.opencloud} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              OpenCloud
-            </a>
-          </li>
-        </ul>
+  <footer className="bg-banquise-blue-dark/95 backdrop-blur-sm text-white py-8 px-4 sm:px-6 md:px-8 relative z-10 border-t border-banquise-blue-lightest/10 w-full box-border">
+    <div className="max-w-6xl mx-auto">
+      {/* Main Footer Content */}
+      <div className="flex flex-col md:flex-row justify-between items-center gap-6 mb-6">
+        {/* Logo/Brand */}
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-gradient-to-br from-banquise-blue-light to-banquise-blue rounded-lg flex items-center justify-center">
+            <span className="text-white font-bold text-sm">B</span>
+          </div>
+          <span className="text-banquise-blue-lightest font-semibold text-lg">
+            {SITE_CONFIG.name}
+          </span>
+        </div>
+
+        {/* Quick Links */}
+        <div className="flex flex-wrap items-center gap-6 text-sm">
+          <a 
+            href={URLS.services.wiki} 
+            className="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200"
+          >
+            Wiki
+          </a>
+          <a 
+            href={URLS.services.gitea} 
+            className="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200"
+          >
+            Gitea
+          </a>
+          <a 
+            href={URLS.services.panel} 
+            className="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200"
+          >
+            Panel
+          </a>
+          <a 
+            href={URLS.services.opencloud} 
+            className="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200"
+          >
+            OpenCloud
+          </a>
+        </div>
+
+        {/* Social Links */}
+        <div className="flex items-center gap-4">
+          <a 
+            href={URLS.social.discord} 
+            className="w-10 h-10 bg-banquise-blue/20 hover:bg-banquise-blue/30 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110"
+            aria-label="Discord"
+          >
+            <span className="text-banquise-blue-lightest text-sm">💬</span>
+          </a>
+          <a 
+            href={URLS.contact.email} 
+            className="w-10 h-10 bg-banquise-blue/20 hover:bg-banquise-blue/30 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110"
+            aria-label="Email"
+          >
+            <span className="text-banquise-blue-lightest text-sm">📧</span>
+          </a>
+        </div>
       </div>
-      
-      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
-        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
-          Communauté
-        </h4>
-        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
-          <li>
-            <a href={URLS.social.discord} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Discord
-            </a>
-          </li>
-        </ul>
+
+      {/* Bottom Bar */}
+      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 pt-6 border-t border-banquise-blue-lightest/5">
+        <p className="text-banquise-gray/60 text-xs text-center sm:text-left">
+          © 2024 {SITE_CONFIG.name}. Hébergement communautaire pour développeurs et gamers.
+        </p>
+        <div className="flex items-center gap-4 text-xs text-banquise-gray/60">
+          <span>Fait avec ❤️ par la communauté</span>
+          <div className="w-1 h-1 bg-banquise-gray/40 rounded-full"></div>
+          <span>EPITA 2024</span>
+        </div>
       </div>
-      
-      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
-        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
-          Support
-        </h4>
-        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
-          <li>
-            <a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Documentation
-            </a>
-          </li>
-          <li>
-            <a href={URLS.contact.email} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
-              Contact
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    
-    <div className="border-t border-banquise-blue-lightest/20 pt-6 sm:pt-8 mt-8 sm:mt-12 text-center text-xs sm:text-sm text-banquise-gray/70 max-w-6xl mx-auto">
-      © 2024 {SITE_CONFIG.name}. Tous droits réservés.
     </div>
   </footer>
 );
diff --git a/banquise-website/src/components/layout/MobileMenu.tsx b/banquise-website/src/components/layout/MobileMenu.tsx
index 7467c3a..d67cd64 100644
--- a/banquise-website/src/components/layout/MobileMenu.tsx
+++ b/banquise-website/src/components/layout/MobileMenu.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import banquiseServer from '../../assets/banquise_server.svg'
-import { URLS, SITE_CONFIG } from '../../config/constants';
-import { commonStyles } from '../../styles/components';
+import { Button } from '../common/Button';
+import { mergeClasses as cn } from '../../styles/designSystem';
+import { Logo } from './navbar/Logo';
+import { URLS } from '../../config/constants';
 import type { Translation } from '../../types/i18n';
 
 interface MobileMenuProps {
@@ -10,7 +11,79 @@ interface MobileMenuProps {
   translations: Translation['navigation'];
 }
 
+interface MobileNavItemProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  href: string;
+  isExternal?: boolean;
+  onClick?: () => void;
+}
+
+const MobileNavItem: React.FC<MobileNavItemProps> = ({ 
+  icon, 
+  title, 
+  description, 
+  href, 
+  isExternal = false, 
+  onClick 
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className={cn(
+        'group flex items-center justify-between p-4 rounded-xl transition-all duration-300',
+        'bg-white/5 hover:bg-white/10 active:bg-white/15',
+        'border border-white/10 hover:border-white/20',
+        'hover:scale-[1.02] active:scale-[0.98]',
+        'hover:shadow-lg hover:shadow-banquise-blue/20'
+      )}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noopener noreferrer' : undefined}
+    >
+      <div className="flex items-center space-x-4">
+        <div className={cn(
+          'flex items-center justify-center w-10 h-10 rounded-xl',
+          'bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20',
+          'border border-banquise-blue-lightest/20',
+          'group-hover:scale-110 transition-transform duration-300'
+        )}>
+          {icon}
+        </div>
+        <div className="flex-1">
+          <span className="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">
+            {title}
+          </span>
+          <p className="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">
+            {description}
+          </p>
+        </div>
+      </div>
+      
+      {/* Arrow Icon */}
+      <div className={cn(
+        'flex items-center justify-center w-6 h-6 rounded-full',
+        'text-white/40 group-hover:text-white/80 transition-all duration-300',
+        'group-hover:translate-x-1'
+      )}>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+    </a>
+  );
+};
+
 export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, translations }) => {
+  // Gérer le scroll du body
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -23,133 +96,171 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, transla
     };
   }, [isOpen]);
 
+  const handleNavClick = (sectionId: string) => {
+    if (sectionId === 'home') {
+      // Scroll to top for home section
+      window.scrollTo({ 
+        top: 0, 
+        behavior: 'smooth' 
+      });
+    } else if (sectionId === 'contact') {
+      // Open email client for contact
+      window.location.href = 'mailto:contact@la-banquise.fr';
+    } else {
+      // Scroll to specific section
+      const element = document.getElementById(sectionId);
+      if (element) {
+        element.scrollIntoView({ 
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+    }
+    onClose();
+  };
+
   return (
-    <div className={`md:hidden fixed inset-0 z-[100] transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
-      {/* Overlay */}
+    <div className={cn(
+      'md:hidden fixed inset-0 z-[100] transition-all duration-300',
+      isOpen ? 'visible' : 'invisible'
+    )}>
+      {/* Overlay avec effet de blur moderne */}
       <div 
-        className={`absolute inset-0 bg-gradient-to-br from-black/70 via-banquise-blue-dark/50 to-black/70 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
+        className={cn(
+          'absolute inset-0 transition-all duration-300',
+          'bg-gradient-to-br from-black/80 via-banquise-blue-dark/60 to-black/80',
+          'backdrop-blur-lg',
+          isOpen ? 'opacity-100' : 'opacity-0'
+        )}
         onClick={onClose}
       />
       
-      {/* Menu mobile */}
-      <div className={`absolute top-0 right-0 h-full w-72 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+      {/* Menu Panel */}
+      <div className={cn(
+        'absolute top-0 right-0 h-full w-80 max-w-[90vw]',
+        'bg-gradient-to-b from-banquise-blue-dark/98 via-banquise-blue-dark/95 to-banquise-blue-dark/90',
+        'backdrop-blur-2xl shadow-2xl',
+        'border-l border-banquise-blue-lightest/20',
+        'transition-transform duration-300 ease-out',
+        isOpen ? 'translate-x-0' : 'translate-x-full'
+      )}>
         
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 sm:p-6 pt-6 sm:pt-8 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
-          <div className="flex items-center space-x-3">
-            <div className="relative">
-              <div className="absolute inset-0 bg-banquise-blue-light/20 rounded-full blur-md"></div>
-              <img 
-                src={banquiseServer}
-                alt="Logo" 
-                className="h-8 sm:h-10 w-auto relative z-10" 
-                style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.6))' }} 
-              />
-            </div>
-            <div>
-              <span className={`text-base sm:text-lg font-bold text-white ${commonStyles.text.heading}`}>
-                {SITE_CONFIG.name}
-              </span>
-              <p className="text-banquise-blue-lightest/70 text-xs">Menu Navigation</p>
-            </div>
-          </div>
+        {/* Header avec Logo */}
+        <div className="flex items-center justify-between p-6 pt-8 border-b border-banquise-blue-lightest/20">
+          <Logo scrolled={false} />
           
           <button 
-            className="group relative p-3 bg-white/10 hover:bg-white/20 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
+            className={cn(
+              'group relative p-3 rounded-xl transition-all duration-300',
+              'bg-white/10 hover:bg-white/20 active:bg-white/25',
+              'border border-white/20 hover:border-white/30',
+              'hover:scale-105 active:scale-95',
+              'focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50'
+            )}
             onClick={onClose}
-            aria-label="Fermer"
+            aria-label="Fermer le menu"
           >
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-white">
-              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
 
-        {/* Navigation */}
-        <div className="flex flex-col justify-start px-6 py-8 space-y-6 overflow-y-auto" style={{ height: 'calc(100vh - 120px)' }}>
+        {/* Navigation Items */}
+        <div className="flex flex-col h-full overflow-y-auto p-6 space-y-4">
           
-          {/* Navigation Links */}
+          {/* Section Navigation */}
           <div className="space-y-3">
-            <a href="#services" className={commonStyles.nav.mobileItem} onClick={onClose}>
-              <div className="flex items-center space-x-4">
-                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} group-hover:scale-110 transition-transform duration-200`}>
-                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                  </svg>
-                </div>
-                <div>
-                  <span className="font-semibold text-lg">{translations.services}</span>
-                  <p className="text-white/60 text-sm">Découvrir notre offre</p>
-                </div>
-              </div>
-              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </a>
+            <MobileNavItem
+              icon={
+                <svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+              }
+              title={translations.home}
+              description="Retour à l'accueil"
+              href="#home"
+              onClick={() => handleNavClick('home')}
+            />
 
-            <a href="#about" className={commonStyles.nav.mobileItem} onClick={onClose}>
-              <div className="flex items-center space-x-4">
-                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} group-hover:scale-110 transition-transform duration-200`}>
-                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
-                <div>
-                  <span className="font-semibold text-lg">{translations.about}</span>
-                  <p className="text-white/60 text-sm">En savoir plus sur nous</p>
-                </div>
-              </div>
-              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </a>
+            <MobileNavItem
+              icon={
+                <svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+              }
+              title={translations.services}
+              description="Découvrir notre offre"
+              href="#services"
+              onClick={() => handleNavClick('services')}
+            />
 
-            <a href={URLS.social.discord} className={commonStyles.nav.mobileItem} onClick={onClose}>
-              <div className="flex items-center space-x-4">
-                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.discord} group-hover:scale-110 transition-transform duration-200`}>
-                  <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.30z"/>
-                  </svg>
-                </div>
-                <div>
-                  <span className="font-semibold text-lg">Discord</span>
-                  <p className="text-white/60 text-sm">Rejoindre la communauté</p>
-                </div>
-              </div>
-              <svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-              </svg>
-            </a>
+            <MobileNavItem
+              icon={
+                <svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              }
+              title={translations.about}
+              description="En savoir plus sur nous"
+              href="#about"
+              onClick={() => handleNavClick('about')}
+            />
+
+            <MobileNavItem
+              icon={
+                <svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+              }
+              title={translations.contact}
+              description="Nous envoyer un email"
+              href="mailto:contact@la-banquise.fr"
+              onClick={() => handleNavClick('contact')}
+            />
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-banquise-blue-lightest/20 my-6" />
+
+          {/* Social & External Links */}
+          <div className="space-y-3">
+            <MobileNavItem
+              icon={
+                <svg className="w-5 h-5 text-[#5865F2]" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+                </svg>
+              }
+              title="Discord"
+              description="Rejoindre la communauté"
+              href={URLS.social.discord}
+              isExternal={true}
+            />
           </div>
 
           {/* CTA Button */}
-          <div className="pt-6 border-t border-banquise-blue-lightest/20">
-            <a 
-              href={URLS.services.auth}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`w-full ${commonStyles.buttons.primary} ${commonStyles.gradients.primary} py-4 px-6 text-lg shadow-xl border border-banquise-blue-lightest/20`}
-              onClick={onClose}
+          <div className="mt-8 pb-6">
+            <Button
+              variant="primary"
+              size="lg"
+              leftIcon={
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                </svg>
+              }
+              onClick={() => {
+                window.open(URLS.services.auth, '_blank');
+                onClose();
+              }}
+              className="w-full shadow-xl"
             >
-              <svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
               Se connecter
-            </a>
+            </Button>
           </div>
         </div>
 
-        {/* Footer */}
-        <div className="absolute bottom-6 left-6 right-6">
-          <div className="text-center py-4 border-t border-banquise-blue-lightest/20">
-            <p className="text-white/50 text-sm">
-              © 2024 {SITE_CONFIG.name}
-            </p>
-          </div>
-        </div>
-
-        {/* Effet glassmorphism */}
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/20 pointer-events-none"></div>
+        {/* Effet de gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/10 pointer-events-none" />
       </div>
     </div>
   );
diff --git a/banquise-website/src/components/layout/ModernNavigation.tsx b/banquise-website/src/components/layout/ModernNavigation.tsx
new file mode 100644
index 0000000..64f660e
--- /dev/null
+++ b/banquise-website/src/components/layout/ModernNavigation.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { useScrollEffects } from '../../hooks/useScrollEffects';
+import { mergeClasses as cn } from '../../styles/designSystem';
+import { Logo } from './navbar/Logo';
+import { NavLinks } from './navbar/NavLinks';
+import { ActionButtons } from './navbar/ActionButtons';
+import { MobileMenuButton } from './navbar/MobileMenuButton';
+import { MobileMenu } from './MobileMenu';
+import type { Translation } from '../../types/i18n';
+
+interface ModernNavigationProps {
+  translations: Translation['navigation'];
+  languageSwitcher: React.ReactElement;
+}
+
+export const ModernNavigation: React.FC<ModernNavigationProps> = ({ 
+  translations, 
+  languageSwitcher 
+}) => {
+  const { scrolled } = useScrollEffects();
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+
+  // Fermer le menu mobile lors du redimensionnement
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setMobileMenuOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Empêcher le scroll du body quand le menu mobile est ouvert
+  React.useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [mobileMenuOpen]);
+
+  return (
+    <>
+      {/* Navigation Bar */}
+      <nav 
+        className={cn(
+          'fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out',
+          // Background adaptatif selon le scroll
+          scrolled 
+            ? 'bg-banquise-blue-dark/95 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30' 
+            : 'bg-banquise-blue-dark/90 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20',
+          // Animation de hauteur
+          'will-change-auto'
+        )}
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className={cn(
+            'flex justify-between items-center px-4 sm:px-6 lg:px-8 transition-all duration-300',
+            scrolled ? 'h-16' : 'h-18 lg:h-20'
+          )}>
+            
+            {/* Logo Section */}
+            <Logo scrolled={scrolled} />
+
+            {/* Navigation Links (Desktop) */}
+            <NavLinks 
+              translations={translations}
+              scrolled={scrolled}
+              className="flex-1 justify-center ml-8"
+            />
+
+            {/* Action Buttons (Desktop) */}
+            <ActionButtons 
+              scrolled={scrolled}
+              languageSwitcher={languageSwitcher}
+            />
+
+            {/* Mobile Menu Button */}
+            <MobileMenuButton
+              isOpen={mobileMenuOpen}
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            />
+          </div>
+        </div>
+
+        {/* Effet de bordure dégradée moderne */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent" />
+          <div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-light/20 to-transparent blur-sm" />
+        </div>
+
+        {/* Effet de glow subtil */}
+        <div className={cn(
+          'absolute inset-0 pointer-events-none transition-opacity duration-500',
+          'bg-gradient-to-b from-banquise-blue-light/5 to-transparent',
+          scrolled ? 'opacity-60' : 'opacity-100'
+        )} />
+      </nav>
+
+      {/* Spacer pour compenser la navbar fixed */}
+      <div className={cn(
+        'transition-all duration-300',
+        scrolled ? 'h-16' : 'h-18 lg:h-20'
+      )} />
+
+      {/* Menu Mobile */}
+      <MobileMenu
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        translations={translations}
+      />
+    </>
+  );
+};
diff --git a/banquise-website/src/components/layout/navbar/ActionButtons.tsx b/banquise-website/src/components/layout/navbar/ActionButtons.tsx
new file mode 100644
index 0000000..5e0ba02
--- /dev/null
+++ b/banquise-website/src/components/layout/navbar/ActionButtons.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Button } from '../../common/Button';
+import { mergeClasses as cn } from '../../../styles/designSystem';
+import { URLS } from '../../../config/constants';
+
+interface ActionButtonsProps {
+  scrolled: boolean;
+  languageSwitcher: React.ReactElement;
+  className?: string;
+}
+
+export const ActionButtons: React.FC<ActionButtonsProps> = ({ 
+  scrolled, 
+  languageSwitcher, 
+  className 
+}) => {
+  return (
+    <div className={cn('hidden md:flex items-center space-x-3', className)}>
+      {/* Language Switcher */}
+      <div className="relative">
+        {languageSwitcher}
+      </div>
+      
+      {/* Discord Button */}
+      <Button
+        variant="discord"
+        size="sm"
+        leftIcon={
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+          </svg>
+        }
+        onClick={() => window.open(URLS.social.discord, '_blank')}
+        className="hidden lg:flex"
+      >
+        Discord
+      </Button>
+
+      {/* Discord Icon Only (tablet) */}
+      <Button
+        variant="discord"
+        size="sm"
+        onClick={() => window.open(URLS.social.discord, '_blank')}
+        className="lg:hidden"
+        aria-label="Rejoindre Discord"
+      >
+        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+        </svg>
+      </Button>
+      
+      {/* Auth Button */}
+      <Button
+        variant="primary"
+        size="sm"
+        leftIcon={
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        }
+        onClick={() => window.open(URLS.services.auth, '_blank')}
+        className={cn(
+          'transition-all duration-300',
+          scrolled 
+            ? 'shadow-md hover:shadow-lg' 
+            : 'shadow-lg hover:shadow-xl'
+        )}
+      >
+        <span className="hidden lg:inline">Connexion</span>
+        <span className="lg:hidden">Se connecter</span>
+      </Button>
+    </div>
+  );
+};
diff --git a/banquise-website/src/components/layout/navbar/Logo.tsx b/banquise-website/src/components/layout/navbar/Logo.tsx
new file mode 100644
index 0000000..737bdae
--- /dev/null
+++ b/banquise-website/src/components/layout/navbar/Logo.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { mergeClasses as cn } from '../../../styles/designSystem';
+import banquiseServer from '/src/assets/banquise_server.svg';
+import { SITE_CONFIG } from '../../../config/constants';
+
+interface LogoProps {
+  scrolled: boolean;
+  className?: string;
+}
+
+export const Logo: React.FC<LogoProps> = ({ scrolled, className }) => {
+  return (
+    <div className={cn('flex items-center group cursor-pointer', className)}>
+      {/* Logo avec effet glow */}
+      <div className="relative flex items-center">
+        <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/30 to-banquise-blue/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110"></div>
+        <div className={cn(
+          'relative flex items-center justify-center rounded-full p-2 bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300',
+          'group-hover:bg-white/20 group-hover:scale-105 group-hover:border-white/30'
+        )}>
+          <img
+            src={banquiseServer}
+            alt="Logo La Banquise"
+            className={cn(
+              'transition-all duration-300 group-hover:scale-110',
+              scrolled ? 'h-8 w-8' : 'h-10 w-10'
+            )}
+            style={{ filter: 'drop-shadow(0 4px 12px rgba(168, 218, 255, 0.4))' }}
+          />
+        </div>
+      </div>
+      
+      {/* Brand text avec animation */}
+      <div className="ml-3 hidden sm:block">
+        <h1 className={cn(
+          'font-heading font-bold text-white tracking-tight transition-all duration-300',
+          scrolled ? 'text-lg' : 'text-xl lg:text-2xl',
+          'group-hover:text-banquise-blue-lightest'
+        )}>
+          {SITE_CONFIG.name}
+        </h1>
+        <p className={cn(
+          'text-banquise-blue-lightest/70 font-medium transition-all duration-300',
+          scrolled ? 'text-xs' : 'text-sm',
+          'group-hover:text-banquise-blue-lightest/90'
+        )}>
+          {SITE_CONFIG.tagline}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/banquise-website/src/components/layout/navbar/MobileMenuButton.tsx b/banquise-website/src/components/layout/navbar/MobileMenuButton.tsx
new file mode 100644
index 0000000..5efd17f
--- /dev/null
+++ b/banquise-website/src/components/layout/navbar/MobileMenuButton.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { mergeClasses as cn } from '../../../styles/designSystem';
+
+interface MobileMenuButtonProps {
+  isOpen: boolean;
+  onClick: () => void;
+  className?: string;
+}
+
+export const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({ 
+  isOpen, 
+  onClick, 
+  className 
+}) => {
+  return (
+    <button
+      className={cn(
+        'md:hidden relative p-3 rounded-xl transition-all duration-300 group',
+        'bg-white/10 hover:bg-white/20 active:bg-white/25',
+        'border border-white/20 hover:border-white/30',
+        'hover:scale-105 active:scale-95',
+        'focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50',
+        className
+      )}
+      onClick={onClick}
+      aria-label={isOpen ? "Fermer le menu" : "Ouvrir le menu"}
+      aria-expanded={isOpen}
+    >
+      {/* Hamburger Icon avec animation moderne */}
+      <div className="w-6 h-6 relative flex flex-col justify-center items-center">
+        <span className={cn(
+          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
+          isOpen ? 'rotate-45 translate-y-0' : '-translate-y-2'
+        )} />
+        <span className={cn(
+          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out',
+          isOpen ? 'opacity-0 scale-0' : 'opacity-100 scale-100'
+        )} />
+        <span className={cn(
+          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
+          isOpen ? '-rotate-45 translate-y-0' : 'translate-y-2'
+        )} />
+      </div>
+      
+      {/* Subtle glow effect on hover */}
+      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+    </button>
+  );
+};
diff --git a/banquise-website/src/components/layout/navbar/NavLinks.tsx b/banquise-website/src/components/layout/navbar/NavLinks.tsx
new file mode 100644
index 0000000..ff8f647
--- /dev/null
+++ b/banquise-website/src/components/layout/navbar/NavLinks.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { mergeClasses as cn } from '../../../styles/designSystem';
+import type { Translation } from '../../../types/i18n';
+
+interface NavLinksProps {
+  translations: Translation['navigation'];
+  scrolled: boolean;
+  className?: string;
+}
+
+interface NavLinkProps {
+  href: string;
+  children: React.ReactNode;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+const NavLink: React.FC<NavLinkProps> = ({ href, children, isActive = false, onClick }) => {
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className={cn(
+        'relative px-4 py-2 text-sm font-medium transition-all duration-300 rounded-lg group',
+        'hover:text-white focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50',
+        isActive 
+          ? 'text-white bg-white/20 shadow-lg' 
+          : 'text-white/80 hover:bg-white/10'
+      )}
+    >
+      <span className="relative z-10">{children}</span>
+      
+      {/* Hover effect */}
+      <div className={cn(
+        'absolute inset-0 rounded-lg bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20',
+        'opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100'
+      )} />
+      
+      {/* Active indicator */}
+      {isActive && (
+        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-banquise-blue-lightest rounded-full" />
+      )}
+    </a>
+  );
+};
+
+export const NavLinks: React.FC<NavLinksProps> = ({ translations, scrolled, className }) => {
+  const [activeSection, setActiveSection] = React.useState<string>('home');
+
+  // Observer pour détecter la section active
+  React.useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const windowHeight = window.innerHeight;
+      
+      // Si on est en haut de la page (moins de 100px du haut), on active "home"
+      if (scrollPosition < 100) {
+        setActiveSection('home');
+        return;
+      }
+
+      // Sinon, on utilise l'intersection observer logic
+      const sections = ['home', 'services', 'about'];
+      let currentSection = 'home';
+
+      sections.forEach((sectionId) => {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          const sectionTop = rect.top + scrollPosition;
+          
+          // Si la section est visible dans le viewport
+          if (scrollPosition >= sectionTop - windowHeight / 3) {
+            currentSection = sectionId;
+          }
+        }
+      });
+
+      setActiveSection(currentSection);
+    };
+
+    // Écouter le scroll
+    window.addEventListener('scroll', handleScroll);
+    // Appeler une fois au chargement
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // Observer pour détecter la section active avec IntersectionObserver (fallback)
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && window.scrollY > 100) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      { 
+        threshold: 0.3,
+        rootMargin: '-100px 0px -100px 0px'
+      }
+    );
+
+    const sections = ['home', 'services', 'about'];
+    sections.forEach((id) => {
+      const element = document.getElementById(id);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleNavClick = (sectionId: string) => {
+    if (sectionId === 'home') {
+      // Scroll to top for home section
+      window.scrollTo({ 
+        top: 0, 
+        behavior: 'smooth' 
+      });
+    } else if (sectionId === 'contact') {
+      // Open email client for contact
+      window.location.href = 'mailto:contact@la-banquise.fr';
+    } else {
+      // Scroll to specific section
+      const element = document.getElementById(sectionId);
+      if (element) {
+        element.scrollIntoView({ 
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+    }
+  };
+
+  return (
+    <nav className={cn('hidden md:flex items-center space-x-1', className)}>
+      <NavLink 
+        href="#home" 
+        isActive={activeSection === 'home'}
+        onClick={() => handleNavClick('home')}
+      >
+        {translations.home}
+      </NavLink>
+      
+      <NavLink 
+        href="#services" 
+        isActive={activeSection === 'services'}
+        onClick={() => handleNavClick('services')}
+      >
+        {translations.services}
+      </NavLink>
+      
+      <NavLink 
+        href="#about" 
+        isActive={activeSection === 'about'}
+        onClick={() => handleNavClick('about')}
+      >
+        {translations.about}
+      </NavLink>
+      
+      <NavLink 
+        href="mailto:contact@la-banquise.fr" 
+        isActive={false}
+        onClick={() => handleNavClick('contact')}
+      >
+        {translations.contact}
+      </NavLink>
+    </nav>
+  );
+};
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
index 5900f79..2be4ad8 100644
--- a/banquise-website/src/components/sections/AboutSection.tsx
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -9,11 +9,10 @@ interface AboutSectionProps {
 }
 
 export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
-  <section id="about" className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
+  <section id="about" className="relative py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 w-full box-border">
     <div className="max-w-4xl mx-auto">
       {/* Header */}
       <div className="text-center mb-12 sm:mb-16 md:mb-20">
-        <div className={commonStyles.layout.divider}></div>
         <h2 className={`${commonStyles.text.headingXl} mb-6 sm:mb-8 px-2`} style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
           À Propos de La Banquise
         </h2>
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
index 57ee13f..7303ae1 100644
--- a/banquise-website/src/components/sections/HeroSection.tsx
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -7,7 +7,7 @@ interface HeroSectionProps {
 }
 
 export const HeroSection: React.FC<HeroSectionProps> = ({ translations }) => (
-  <section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
+  <section id="home" className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
     <div className="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border border-banquise-blue-lightest/30 relative group">
       <img 
         src={banquiseServer} 
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
index b8868c9..c98fc7a 100644
--- a/banquise-website/src/components/sections/ServicesSection.tsx
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { ServiceCard } from '../common/ServiceCard';
+import { componentStyles } from '../../styles/designSystem';
 import type { Service } from '../../types/service';
 
 interface ServicesSectionProps {
@@ -25,35 +27,12 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({
     
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full">
       {services.map((service) => (
-        <div
+        <ServiceCard
           key={service.name}
-          className="group relative bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 border border-banquise-blue-lightest/30 transition-all duration-300 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"
-          onClick={() => onServiceClick(service)}
-        >
-          {/* Icon */}
-          <div className="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto">
-            {service.icon}
-          </div>
-          
-          {/* Service name */}
-          <h3 className="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">
-            {service.name}
-          </h3>
-          
-          {/* Short teaser description */}
-          <p className="text-banquise-gray/80 leading-relaxed mb-6 sm:mb-8 text-center text-sm sm:text-base">
-            {service.description.split('.')[0]}.
-          </p>
-          
-          {/* CTA */}
-          <div className="flex items-center justify-center text-banquise-blue-light font-bold group-hover:text-banquise-blue-lightest transition-colors duration-300 text-sm sm:text-base">
-            <span className="text-center">{translations.discoverFeatures}</span>
-            <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
-          </div>
-          
-          {/* Subtle hover effect */}
-          <div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
-        </div>
+          service={service}
+          onServiceClick={onServiceClick}
+          discoverFeaturesText={translations.discoverFeatures}
+        />
       ))}
     </div>
   </section>
diff --git a/banquise-website/src/components/ui/AccordionItem.tsx b/banquise-website/src/components/ui/AccordionItem.tsx
index 2f7fd4d..b2beaad 100644
--- a/banquise-website/src/components/ui/AccordionItem.tsx
+++ b/banquise-website/src/components/ui/AccordionItem.tsx
@@ -1,12 +1,5 @@
 import React from 'react';
-
-// Définir l'interface localement :
-interface AccordionItemProps {
-  title: string;
-  children: React.ReactNode;
-  isOpen: boolean;
-  onToggle: () => void;
-}
+import type { AccordionItemProps } from '../../types';
 
 export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
   <div className={`bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-xl border-banquise-blue-lightest/50 scale-[1.01]' : ''} hover:shadow-lg hover:border-banquise-blue-lightest/40`}>
diff --git a/banquise-website/src/components/ui/ModernLanguageSwitcher.tsx b/banquise-website/src/components/ui/ModernLanguageSwitcher.tsx
new file mode 100644
index 0000000..4a52190
--- /dev/null
+++ b/banquise-website/src/components/ui/ModernLanguageSwitcher.tsx
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { mergeClasses as cn } from '../../styles/designSystem';
+import type { Language } from '../../types/i18n';
+
+interface ModernLanguageSwitcherProps {
+  currentLanguage: Language;
+  onLanguageChange: (language: Language) => void;
+  availableLanguages: Language[];
+}
+
+export const ModernLanguageSwitcher: React.FC<ModernLanguageSwitcherProps> = ({
+  currentLanguage,
+  onLanguageChange,
+  availableLanguages
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const languageConfig: Record<Language, { name: string; flag: string; nativeName: string }> = {
+    fr: { name: 'Français', flag: '🇫🇷', nativeName: 'FR' },
+    en: { name: 'English', flag: '🇬🇧', nativeName: 'EN' },
+  };
+
+  const currentConfig = languageConfig[currentLanguage];
+
+  return (
+    <div className="relative">
+      {/* Trigger Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200',
+          'bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30',
+          'text-white text-sm font-medium',
+          'focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50',
+          'group'
+        )}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <span className="text-lg">{currentConfig.flag}</span>
+        <span className="hidden sm:inline">{currentConfig.nativeName}</span>
+        
+        {/* Chevron Icon */}
+        <svg 
+          className={cn(
+            'w-4 h-4 transition-transform duration-200',
+            isOpen ? 'rotate-180' : 'rotate-0'
+          )}
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 z-10" 
+            onClick={() => setIsOpen(false)}
+          />
+          
+          {/* Menu */}
+          <div className={cn(
+            'absolute right-0 top-full mt-2 z-20',
+            'bg-white/95 backdrop-blur-xl rounded-xl shadow-2xl border border-white/20',
+            'min-w-[140px] py-2',
+            'animate-slideUp'
+          )}>
+            {availableLanguages.map((lang) => {
+              const config = languageConfig[lang];
+              const isSelected = lang === currentLanguage;
+              
+              return (
+                <button
+                  key={lang}
+                  onClick={() => {
+                    onLanguageChange(lang);
+                    setIsOpen(false);
+                  }}
+                  className={cn(
+                    'w-full flex items-center space-x-3 px-4 py-2.5 text-sm transition-all duration-200',
+                    'hover:bg-banquise-blue/10 focus:bg-banquise-blue/10',
+                    'focus:outline-none',
+                    isSelected 
+                      ? 'text-banquise-blue-dark font-semibold bg-banquise-blue/10' 
+                      : 'text-gray-700 hover:text-banquise-blue-dark'
+                  )}
+                  role="option"
+                  aria-selected={isSelected}
+                >
+                  <span className="text-lg">{config.flag}</span>
+                  <span className="flex-1 text-left">{config.name}</span>
+                  {isSelected && (
+                    <svg className="w-4 h-4 text-banquise-blue" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/banquise-website/src/components/ui/ParallaxBackground.tsx b/banquise-website/src/components/ui/ParallaxBackground.tsx
deleted file mode 100644
index b8e33b5..0000000
--- a/banquise-website/src/components/ui/ParallaxBackground.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-export const ParallaxBackground: React.FC = () => {
-  const [scrollY, setScrollY] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrollY(window.scrollY);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  // Éléments flottants avec différentes vitesses de parallaxe
-  const floatingElements = [
-    // Serveurs et équipements
-    { icon: '🖥️', x: 10, y: 20, speed: 0.3, size: 'text-2xl', opacity: 0.1 },
-    { icon: '🖲️', x: 85, y: 15, speed: 0.2, size: 'text-xl', opacity: 0.08 },
-    { icon: '⚙️', x: 75, y: 45, speed: 0.4, size: 'text-3xl', opacity: 0.12 },
-    { icon: '🔧', x: 15, y: 60, speed: 0.25, size: 'text-lg', opacity: 0.06 },
-    { icon: '💾', x: 90, y: 70, speed: 0.35, size: 'text-2xl', opacity: 0.1 },
-    
-    // Code et développement
-    { icon: '<>', x: 30, y: 35, speed: 0.15, size: 'text-xl', opacity: 0.08, isText: true },
-    { icon: '{ }', x: 60, y: 25, speed: 0.28, size: 'text-2xl', opacity: 0.1, isText: true },
-    { icon: '#!/bin', x: 5, y: 80, speed: 0.2, size: 'text-sm', opacity: 0.06, isText: true },
-    { icon: 'git', x: 80, y: 85, speed: 0.32, size: 'text-lg', opacity: 0.08, isText: true },
-    
-    // Réseau et connectivité
-    { icon: '🌐', x: 45, y: 10, speed: 0.22, size: 'text-2xl', opacity: 0.09 },
-    { icon: '🔗', x: 25, y: 75, speed: 0.18, size: 'text-xl', opacity: 0.07 },
-    { icon: '📡', x: 70, y: 55, speed: 0.26, size: 'text-lg', opacity: 0.08 },
-    
-    // Sécurité
-    { icon: '🔒', x: 55, y: 40, speed: 0.3, size: 'text-xl', opacity: 0.09 },
-    { icon: '🛡️', x: 35, y: 65, speed: 0.24, size: 'text-2xl', opacity: 0.1 },
-    { icon: '🔑', x: 85, y: 30, speed: 0.16, size: 'text-lg', opacity: 0.07 },
-    
-    // Données et stockage
-    { icon: '💿', x: 20, y: 45, speed: 0.28, size: 'text-xl', opacity: 0.08 },
-    { icon: '📊', x: 65, y: 75, speed: 0.22, size: 'text-2xl', opacity: 0.09 },
-    { icon: '📈', x: 40, y: 20, speed: 0.34, size: 'text-lg', opacity: 0.07 },
-    
-    // Éléments techniques supplémentaires
-    { icon: 'sudo', x: 12, y: 90, speed: 0.19, size: 'text-sm', opacity: 0.06, isText: true },
-    { icon: 'SSH', x: 78, y: 12, speed: 0.31, size: 'text-base', opacity: 0.08, isText: true },
-    { icon: 'API', x: 92, y: 50, speed: 0.27, size: 'text-lg', opacity: 0.09, isText: true },
-    { icon: 'TCP', x: 8, y: 30, speed: 0.23, size: 'text-base', opacity: 0.07, isText: true },
-    { icon: 'HTTP', x: 50, y: 80, speed: 0.29, size: 'text-sm', opacity: 0.06, isText: true },
-  ];
-
-  return (
-    <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
-      {/* Grille de fond subtile */}
-      <div className="absolute inset-0 opacity-[0.02]">
-        <div 
-          className="absolute inset-0 bg-gradient-to-br from-banquise-blue-dark/20 to-transparent"
-          style={{
-            backgroundImage: `
-              linear-gradient(rgba(31, 93, 137, 0.03) 1px, transparent 1px),
-              linear-gradient(90deg, rgba(31, 93, 137, 0.03) 1px, transparent 1px)
-            `,
-            backgroundSize: '50px 50px',
-            transform: `translateY(${scrollY * 0.1}px)`
-          }}
-        />
-      </div>
-
-      {/* Particules de code flottantes */}
-      <div className="absolute inset-0">
-        {floatingElements.map((element, index) => (
-          <div
-            key={index}
-            className={`absolute ${element.size} font-mono select-none transition-all duration-1000 ease-out`}
-            style={{
-              left: `${element.x}%`,
-              top: `${element.y}%`,
-              transform: `translateY(${scrollY * element.speed}px) rotate(${scrollY * 0.01}deg)`,
-              opacity: element.opacity,
-              color: element.isText ? '#a8daff' : 'inherit',
-              textShadow: element.isText ? '0 0 10px rgba(168, 218, 255, 0.3)' : 'none',
-              filter: 'blur(0.5px)',
-              animation: `float-${index % 3} ${6 + (index % 4)}s ease-in-out infinite`
-            }}
-          >
-            {element.icon}
-          </div>
-        ))}
-      </div>
-
-      {/* Lignes de connexion animées */}
-      <svg 
-        className="absolute inset-0 w-full h-full opacity-[0.03]" 
-        style={{
-          transform: `translateY(${scrollY * 0.2}px)`
-        }}
-      >
-        <defs>
-          <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" stopColor="#a8daff" stopOpacity="0" />
-            <stop offset="50%" stopColor="#a8daff" stopOpacity="0.5" />
-            <stop offset="100%" stopColor="#a8daff" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        
-        {/* Lignes de connexion entre les éléments */}
-        {[...Array(8)].map((_, i) => (
-          <line
-            key={i}
-            x1={`${10 + i * 12}%`}
-            y1={`${20 + i * 8}%`}
-            x2={`${30 + i * 15}%`}
-            y2={`${40 + i * 12}%`}
-            stroke="url(#lineGradient)"
-            strokeWidth="1"
-            className="animate-pulse"
-            style={{
-              animationDelay: `${i * 0.5}s`,
-              animationDuration: `${3 + i}s`
-            }}
-          />
-        ))}
-      </svg>
-
-      {/* Cercles de données en mouvement */}
-      <div className="absolute inset-0">
-        {[...Array(6)].map((_, i) => (
-          <div
-            key={i}
-            className="absolute rounded-full border border-banquise-blue-lightest/5 animate-ping"
-            style={{
-              left: `${15 + i * 15}%`,
-              top: `${25 + i * 12}%`,
-              width: `${40 + i * 20}px`,
-              height: `${40 + i * 20}px`,
-              transform: `translateY(${scrollY * (0.1 + i * 0.05)}px)`,
-              animationDelay: `${i * 1.2}s`,
-              animationDuration: `${4 + i}s`
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/banquise-website/src/components/ui/ScrollToTopButton.tsx b/banquise-website/src/components/ui/ScrollToTopButton.tsx
index a05463b..e090d22 100644
--- a/banquise-website/src/components/ui/ScrollToTopButton.tsx
+++ b/banquise-website/src/components/ui/ScrollToTopButton.tsx
@@ -1,24 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import { useScrollEffects } from '../../hooks/useScrollEffects';
 
 export const ScrollToTopButton: React.FC = () => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    const toggleVisibility = () => {
-      // Afficher le bouton après avoir scrollé 300px
-      setIsVisible(window.scrollY > 300);
-    };
-
-    window.addEventListener('scroll', toggleVisibility);
-    return () => window.removeEventListener('scroll', toggleVisibility);
-  }, []);
-
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
+  const { isVisible, scrollToTop } = useScrollEffects();
 
   return (
     <button
diff --git a/banquise-website/src/data/translations/en.tsx b/banquise-website/src/data/translations/en.ts
similarity index 100%
rename from banquise-website/src/data/translations/en.tsx
rename to banquise-website/src/data/translations/en.ts
diff --git a/banquise-website/src/hooks/useAccordion.ts b/banquise-website/src/hooks/useAccordion.ts
new file mode 100644
index 0000000..1a04413
--- /dev/null
+++ b/banquise-website/src/hooks/useAccordion.ts
@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Hook personnalisé pour gérer l'état des accordéons
+ * Remplace la logique dans App.tsx et simplifie la gestion d'état
+ */
+export const useAccordion = (initialState: string | null = null) => {
+  const [openAccordion, setOpenAccordion] = useState<string | null>(initialState);
+
+  const toggleAccordion = useCallback((title: string) => {
+    setOpenAccordion(prev => prev === title ? null : title);
+  }, []);
+
+  const openSpecificAccordion = useCallback((title: string) => {
+    setOpenAccordion(title);
+  }, []);
+
+  const closeAccordion = useCallback(() => {
+    setOpenAccordion(null);
+  }, []);
+
+  const isOpen = useCallback((title: string) => {
+    return openAccordion === title;
+  }, [openAccordion]);
+
+  return {
+    openAccordion,
+    toggleAccordion,
+    openSpecificAccordion,
+    closeAccordion,
+    isOpen,
+  };
+};
diff --git a/banquise-website/src/hooks/useOceanDepthEffect.ts b/banquise-website/src/hooks/useOceanDepthEffect.ts
new file mode 100644
index 0000000..976c99e
--- /dev/null
+++ b/banquise-website/src/hooks/useOceanDepthEffect.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+export const useOceanDepthEffect = () => {
+  const [scrollDepth, setScrollDepth] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercentage = Math.min(scrollPosition / documentHeight, 1);
+      
+      setScrollDepth(scrollPercentage);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll(); // Initial call
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return scrollDepth;
+};
diff --git a/banquise-website/src/hooks/useScrollEffects.ts b/banquise-website/src/hooks/useScrollEffects.ts
new file mode 100644
index 0000000..8b55137
--- /dev/null
+++ b/banquise-website/src/hooks/useScrollEffects.ts
@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Hook personnalisé pour gérer les effets de scroll
+ * Remplace la logique répétée dans Navigation.tsx et ScrollToTopButton.tsx
+ */
+export const useScrollEffects = () => {
+  const [scrolled, setScrolled] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      setScrolled(scrollY > 20);
+      setIsVisible(scrollY > 300);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Call once to set initial state
+    handleScroll();
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }, []);
+
+  const scrollToElement = useCallback((elementId: string) => {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  }, []);
+
+  return {
+    scrolled,
+    isVisible,
+    scrollToTop,
+    scrollToElement,
+  };
+};
diff --git a/banquise-website/src/hooks/useServiceModal.ts b/banquise-website/src/hooks/useServiceModal.ts
new file mode 100644
index 0000000..2371405
--- /dev/null
+++ b/banquise-website/src/hooks/useServiceModal.ts
@@ -0,0 +1,27 @@
+import { useState, useCallback } from 'react';
+import type { Service } from '../types/service';
+
+/**
+ * Hook personnalisé pour gérer l'état des modales de services
+ * Remplace la logique dans App.tsx et simplifie la gestion d'état
+ */
+export const useServiceModal = () => {
+  const [selectedService, setSelectedService] = useState<Service | null>(null);
+
+  const openServiceModal = useCallback((service: Service) => {
+    setSelectedService(service);
+  }, []);
+
+  const closeServiceModal = useCallback(() => {
+    setSelectedService(null);
+  }, []);
+
+  const isModalOpen = selectedService !== null;
+
+  return {
+    selectedService,
+    openServiceModal,
+    closeServiceModal,
+    isModalOpen,
+  };
+};
diff --git a/banquise-website/src/hooks/useTranslation.tsx b/banquise-website/src/hooks/useTranslation.tsx
index a9454ef..d0171e7 100644
--- a/banquise-website/src/hooks/useTranslation.tsx
+++ b/banquise-website/src/hooks/useTranslation.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import type { Language, Translation } from '../types/i18n';
 import { translations, defaultLanguage } from '../data/translations';
 
@@ -9,10 +9,13 @@ export const useTranslation = () => {
     return saved && translations[saved] ? saved : defaultLanguage;
   });
 
-  const [t, setT] = useState<Translation>(translations[currentLanguage]);
+  // Memoize the translation object to prevent unnecessary re-renders
+  const t = useMemo<Translation>(() => translations[currentLanguage], [currentLanguage]);
+
+  // Memoize available languages array
+  const availableLanguages = useMemo(() => Object.keys(translations) as Language[], []);
 
   useEffect(() => {
-    setT(translations[currentLanguage]);
     localStorage.setItem('language', currentLanguage);
   }, [currentLanguage]);
 
@@ -26,6 +29,6 @@ export const useTranslation = () => {
     t,
     currentLanguage,
     changeLanguage,
-    availableLanguages: Object.keys(translations) as Language[]
+    availableLanguages
   };
 };
diff --git a/banquise-website/src/styles/components.ts b/banquise-website/src/styles/components.ts
index 48fcabf..d999a00 100644
--- a/banquise-website/src/styles/components.ts
+++ b/banquise-website/src/styles/components.ts
@@ -1,5 +1,10 @@
+// DEPRECATED: This file is being replaced by designSystem.ts
+// Please use the new design system for new components
+// This file is kept for backward compatibility during migration
+
+// Re-export the legacy commonStyles structure for backward compatibility
 export const commonStyles = {
-  // Gradients
+  // Gradients - Keep existing structure
   gradients: {
     primary: "bg-gradient-to-r from-banquise-blue to-banquise-blue-light",
     primaryBr: "bg-gradient-to-br from-banquise-blue to-banquise-blue-light",
@@ -9,53 +14,49 @@ export const commonStyles = {
     discordHover: "hover:from-indigo-500 hover:to-purple-500"
   },
 
-  // Buttons
+  // Buttons - Keep existing structure
   buttons: {
     primary: "inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95",
     discord: "group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/25 hover:-translate-y-1 hover:scale-105",
     auth: "group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105"
   },
 
-  // Cards
+  // Cards - Keep existing structure
   cards: {
     base: "backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300",
     hover: "hover:shadow-xl hover:border-banquise-blue-lightest/50",
     interactive: "cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95"
   },
 
-  // Text - Hiérarchie améliorée
+  // Text - Keep existing structure
   text: {
     heading: "font-heading font-bold tracking-tight",
-    // Titres principaux de section
     headingXl: "text-3xl sm:text-4xl md:text-5xl text-banquise-gray font-heading font-bold tracking-tight",
     headingLg: "text-2xl sm:text-3xl md:text-4xl text-banquise-gray font-heading font-bold tracking-tight",
     headingMd: "text-xl sm:text-2xl md:text-3xl text-banquise-blue-dark font-heading font-bold tracking-tight",
     headingSm: "text-lg sm:text-xl md:text-2xl text-banquise-blue-dark font-heading font-semibold tracking-tight",
-    // Sous-titres
     subheading: "text-base sm:text-lg md:text-xl text-banquise-gray/90 font-medium leading-relaxed",
-    // Corps de texte
     body: "text-sm sm:text-base md:text-lg text-banquise-blue-dark/90 leading-relaxed",
     description: "text-banquise-gray/80 leading-relaxed",
     muted: "text-banquise-gray/90 leading-relaxed",
-    // Texte sur fond sombre
     lightHeading: "text-banquise-blue-lightest font-heading font-bold tracking-tight",
     lightBody: "text-white/90 leading-relaxed"
   },
 
-  // Layout
+  // Layout - Keep existing structure
   layout: {
     section: "py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8",
     container: "max-w-6xl mx-auto",
     divider: "w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"
   },
 
-  // Icons and decorative elements
+  // Icons - Keep existing structure
   icons: {
     base: "w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl shadow-lg",
     small: "w-10 h-10 rounded-lg flex items-center justify-center text-white"
   },
 
-  // Navigation
+  // Navigation - Keep existing structure
   nav: {
     link: "px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group",
     mobileItem: "group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20"
diff --git a/banquise-website/src/styles/designSystem.ts b/banquise-website/src/styles/designSystem.ts
new file mode 100644
index 0000000..88df66b
--- /dev/null
+++ b/banquise-website/src/styles/designSystem.ts
@@ -0,0 +1,176 @@
+// Design System - Centralized design tokens and reusable styles
+export const designTokens = {
+  // Colors
+  colors: {
+    banquise: {
+      blue: '#40B4FF',
+      blueDark: '#1F5D89',
+      blueLight: '#69B7E2',
+      blueLightest: '#A5F0FF',
+      gray: '#F6F6F6',
+    }
+  },
+
+  // Spacing
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+    xxl: '3rem',
+  },
+
+  // Border radius
+  borderRadius: {
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1rem',
+    xl: '1.5rem',
+    xxl: '2rem',
+  },
+
+  // Shadows
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+    xxl: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  },
+
+  // Typography
+  typography: {
+    fontFamily: {
+      heading: ['Dela Gothic One', 'sans-serif'],
+      body: ['Roboto', 'sans-serif'],
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '3.75rem',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+    },
+  },
+
+  // Transitions
+  transitions: {
+    fast: 'all 0.15s ease-in-out',
+    normal: 'all 0.3s ease-in-out',
+    slow: 'all 0.5s ease-in-out',
+  },
+
+  // Z-index
+  zIndex: {
+    dropdown: 1000,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070,
+  },
+} as const;
+
+// Reusable gradient combinations
+export const gradients = {
+  primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light',
+  primaryBr: 'bg-gradient-to-br from-banquise-blue to-banquise-blue-light',
+  card: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
+  cardHover: 'hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8',
+  discord: 'bg-gradient-to-r from-indigo-600 to-purple-600',
+  discordHover: 'hover:from-indigo-500 hover:to-purple-500',
+  background: 'bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark',
+} as const;
+
+// Reusable component styles
+export const componentStyles = {
+  // Buttons
+  button: {
+    base: 'inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95',
+    primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light',
+    discord: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500',
+    auth: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl',
+  },
+
+  // Cards
+  card: {
+    base: 'backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300',
+    hover: 'hover:shadow-xl hover:border-banquise-blue-lightest/50',
+    interactive: 'cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95',
+    gradient: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
+  },
+
+  // Navigation
+  nav: {
+    link: 'px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group',
+    mobileItem: 'group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20',
+  },
+
+  // Text styles
+  text: {
+    heading: 'font-heading font-bold tracking-tight',
+    headingXl: 'text-3xl sm:text-4xl md:text-5xl text-banquise-gray font-heading font-bold tracking-tight',
+    headingLg: 'text-2xl sm:text-3xl md:text-4xl text-banquise-gray font-heading font-bold tracking-tight',
+    headingMd: 'text-xl sm:text-2xl md:text-3xl text-banquise-blue-dark font-heading font-bold tracking-tight',
+    headingSm: 'text-lg sm:text-xl md:text-2xl text-banquise-blue-dark font-heading font-semibold tracking-tight',
+    subheading: 'text-base sm:text-lg md:text-xl text-banquise-gray/90 font-medium leading-relaxed',
+    body: 'text-sm sm:text-base md:text-lg text-banquise-blue-dark/90 leading-relaxed',
+    description: 'text-banquise-gray/80 leading-relaxed',
+    muted: 'text-banquise-gray/90 leading-relaxed',
+    lightHeading: 'text-banquise-blue-lightest font-heading font-bold tracking-tight',
+    lightBody: 'text-white/90 leading-relaxed',
+  },
+
+  // Icons
+  icon: {
+    base: 'w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl shadow-lg',
+    small: 'w-10 h-10 rounded-lg flex items-center justify-center text-white',
+  },
+
+  // Layout
+  layout: {
+    section: 'py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8',
+    container: 'max-w-6xl mx-auto',
+    divider: 'w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full',
+  },
+
+  // Animations
+  animation: {
+    hover: 'hover:-translate-y-4 hover:shadow-2xl transition-all duration-300',
+    scale: 'hover:scale-105 active:scale-95 transition-transform duration-300',
+    fadeIn: 'animate-fadeIn',
+    slideUp: 'animate-slideUp',
+  },
+} as const;
+
+// Utility function to merge classes
+export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+// Responsive breakpoints
+export const breakpoints = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+} as const;
+
+export type DesignTokens = typeof designTokens;
+export type Gradients = typeof gradients;
+export type ComponentStyles = typeof componentStyles;
diff --git a/banquise-website/src/types/index.ts b/banquise-website/src/types/index.ts
index 3c8eb7a..203a9de 100644
--- a/banquise-website/src/types/index.ts
+++ b/banquise-website/src/types/index.ts
@@ -1,11 +1,5 @@
-export interface Service {
-  name: string;
-  url: string;
-  image: string;
-  description: string;
-  features: string[];
-  icon: string;
-}
+// Re-export types from their specific modules
+export type { Service } from './service';
 
 export interface AccordionItemProps {
   title: string;
diff --git a/banquise-website/src/utils/classNames.ts b/banquise-website/src/utils/classNames.ts
new file mode 100644
index 0000000..a3b6644
--- /dev/null
+++ b/banquise-website/src/utils/classNames.ts
@@ -0,0 +1,30 @@
+/**
+ * Utility function to conditionally merge CSS classes
+ * Filters out falsy values and joins valid class names
+ */
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+/**
+ * Alias for cn function for backward compatibility
+ */
+export const mergeClasses = cn;
+
+/**
+ * Utility to create conditional classes based on state
+ */
+export const conditionalClass = (condition: boolean, trueClass: string, falseClass: string = ''): string => {
+  return condition ? trueClass : falseClass;
+};
+
+/**
+ * Utility to create variant-based classes
+ */
+export const variantClass = <T extends string>(
+  variant: T,
+  variants: Record<T, string>,
+  defaultVariant?: T
+): string => {
+  return variants[variant] || (defaultVariant ? variants[defaultVariant] : '');
+};
diff --git a/banquise-website/src/vite-env.d.ts b/banquise-website/src/vite-env.d.ts
index 11f02fe..bbc9a79 100644
--- a/banquise-website/src/vite-env.d.ts
+++ b/banquise-website/src/vite-env.d.ts
@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
diff --git a/banquise-website/tailwind.config.js b/banquise-website/tailwind.config.js
index 724fe8a..1eb83b2 100644
--- a/banquise-website/tailwind.config.js
+++ b/banquise-website/tailwind.config.js
@@ -34,6 +34,10 @@ export default {
         'gentle-float': 'gentle-float 6s ease-in-out infinite',
         'fadeIn': 'fadeIn 0.2s ease-out',
         'slideUp': 'slideUp 0.3s ease-out',
+        'bubble-float': 'bubble-float 8s ease-in-out infinite',
+        'bubble-float-slow': 'bubble-float-slow 12s ease-in-out infinite',
+        'bubble-float-fast': 'bubble-float-fast 6s ease-in-out infinite',
+        'ocean-shimmer': 'ocean-shimmer 10s ease-in-out infinite',
       },
       keyframes: {
         float: {
@@ -92,6 +96,35 @@ export default {
           from: { transform: 'translateY(30px)', opacity: '0' },
           to: { transform: 'translateY(0)', opacity: '1' },
         },
+        'bubble-float': {
+          '0%': { transform: 'translateY(0) translateX(0) scale(1)', opacity: '0.6' },
+          '25%': { transform: 'translateY(-15px) translateX(5px) scale(1.05)', opacity: '0.7' },
+          '50%': { transform: 'translateY(-30px) translateX(-3px) scale(1.1)', opacity: '0.5' },
+          '75%': { transform: 'translateY(-45px) translateX(8px) scale(1.05)', opacity: '0.4' },
+          '100%': { transform: 'translateY(-60px) translateX(0) scale(1)', opacity: '0.2' },
+        },
+        'bubble-float-slow': {
+          '0%': { transform: 'translateY(0) translateX(0) scale(0.8)', opacity: '0.4' },
+          '20%': { transform: 'translateY(-20px) translateX(-8px) scale(0.9)', opacity: '0.5' },
+          '40%': { transform: 'translateY(-40px) translateX(6px) scale(1.1)', opacity: '0.4' },
+          '60%': { transform: 'translateY(-60px) translateX(-4px) scale(1.2)', opacity: '0.3' },
+          '80%': { transform: 'translateY(-80px) translateX(10px) scale(1.0)', opacity: '0.2' },
+          '100%': { transform: 'translateY(-100px) translateX(0) scale(0.8)', opacity: '0.1' },
+        },
+        'bubble-float-fast': {
+          '0%': { transform: 'translateY(0) translateX(0) scale(1.2)', opacity: '0.8' },
+          '15%': { transform: 'translateY(-10px) translateX(4px) scale(1.1)', opacity: '0.7' },
+          '30%': { transform: 'translateY(-20px) translateX(-2px) scale(0.9)', opacity: '0.6' },
+          '45%': { transform: 'translateY(-30px) translateX(6px) scale(1.0)', opacity: '0.5' },
+          '60%': { transform: 'translateY(-40px) translateX(-5px) scale(1.1)', opacity: '0.4' },
+          '75%': { transform: 'translateY(-50px) translateX(3px) scale(1.0)', opacity: '0.3' },
+          '90%': { transform: 'translateY(-60px) translateX(7px) scale(0.9)', opacity: '0.2' },
+          '100%': { transform: 'translateY(-70px) translateX(0) scale(1.2)', opacity: '0.1' },
+        },
+        'ocean-shimmer': {
+          '0%, 100%': { opacity: '0.1', transform: 'translateX(-10px)' },
+          '50%': { opacity: '0.3', transform: 'translateX(10px)' },
+        },
       },
       backdropBlur: {
         'xs': '2px',

From cdc71d528ad9f30631652e8331fd134b6c0068c8 Mon Sep 17 00:00:00 2001
From: Arthur Wambst <arthur.wambst@epita.fr>
Date: Sat, 6 Sep 2025 21:03:24 +0200
Subject: [PATCH 5/5] fix: build and changed main subtitle

---
 banquise-website/src/components/layout/navbar/NavLinks.tsx   | 2 +-
 banquise-website/src/components/sections/ServicesSection.tsx | 2 +-
 banquise-website/src/data/translations/en.ts                 | 2 +-
 banquise-website/src/data/translations/fr.ts                 | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/banquise-website/src/components/layout/navbar/NavLinks.tsx b/banquise-website/src/components/layout/navbar/NavLinks.tsx
index ff8f647..bf531f7 100644
--- a/banquise-website/src/components/layout/navbar/NavLinks.tsx
+++ b/banquise-website/src/components/layout/navbar/NavLinks.tsx
@@ -44,7 +44,7 @@ const NavLink: React.FC<NavLinkProps> = ({ href, children, isActive = false, onC
   );
 };
 
-export const NavLinks: React.FC<NavLinksProps> = ({ translations, scrolled, className }) => {
+export const NavLinks: React.FC<NavLinksProps> = ({ translations, className }) => {
   const [activeSection, setActiveSection] = React.useState<string>('home');
 
   // Observer pour détecter la section active
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
index c98fc7a..94c2bf5 100644
--- a/banquise-website/src/components/sections/ServicesSection.tsx
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ServiceCard } from '../common/ServiceCard';
-import { componentStyles } from '../../styles/designSystem';
+//import { componentStyles } from '../../styles/designSystem';
 import type { Service } from '../../types/service';
 
 interface ServicesSectionProps {
diff --git a/banquise-website/src/data/translations/en.ts b/banquise-website/src/data/translations/en.ts
index 62e98ad..dbbdb62 100644
--- a/banquise-website/src/data/translations/en.ts
+++ b/banquise-website/src/data/translations/en.ts
@@ -136,7 +136,7 @@ export const en: Translation = {
   ],
   hero: {
     title: "Welcome to La Banquise",
-    subtitle: "Your trusted technology partner",
+    subtitle: "Hosting provider, for students, by students.",
     cta: "Discover our services"
   },
   navigation: {
diff --git a/banquise-website/src/data/translations/fr.ts b/banquise-website/src/data/translations/fr.ts
index 9c5e223..0d295bf 100644
--- a/banquise-website/src/data/translations/fr.ts
+++ b/banquise-website/src/data/translations/fr.ts
@@ -136,7 +136,7 @@ export const fr: Translation = {
   ],
   hero: {
     title: "Bienvenue chez La Banquise",
-    subtitle: "Votre partenaire technologique de confiance",
+    subtitle: "Hébergeur, pour les étudiants, par des étudiants.",
     cta: "Découvrir nos services"
   },
   navigation: {