Updated functionnalities + added small menu if mobile

src/app/globals.css

@@ -46,6 +46,31 @@
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@utility animate-fade-in {
+  animation: fade-in 0.4s ease-out forwards;
+}
+
 @utility animate-float {
   animation: float 6s ease-in-out infinite;
 }
+
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { resolveImage } from '@/data/stitch-images';
 
 export default function Home() {
@@ -12,6 +12,85 @@ export default function Home() {
   });
 
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [activeModule, setActiveModule] = useState(0);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // Lock body scroll when mobile menu is open
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+    return () => { document.body.style.overflow = 'auto'; };
+  }, [isMenuOpen]);
+
+  const modules = [
+    {
+      id: 'map',
+      title: 'Cartes & Plans',
+      icon: 'map',
+      theme: 'rose',
+      description: 'Une cartographie interactive ultra-précise pour guider vos visiteurs. Géolocalisation en temps réel, points d’intérêt cliquables et navigation fluide.',
+      value: 'Améliorez l’orientation et augmentez la satisfaction visiteur.'
+    },
+    {
+      id: 'quiz',
+      title: 'Jeux & Quiz',
+      icon: 'sports_esports',
+      theme: 'rose',
+      description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter l’attention des plus jeunes.',
+      value: 'Augmentez l’engagement des familles et des scolaires.'
+    },
+    {
+      id: 'video',
+      title: 'Audio & Vidéo',
+      icon: 'videocam',
+      theme: 'rose',
+      description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos documentaires et témoignages d’experts accessibles en un clic.',
+      value: 'Enrichissez l\'expérience culturelle par le multimédia.'
+    },
+    {
+      id: 'article',
+      title: 'Articles & PDF',
+      icon: 'article',
+      theme: 'rose',
+      description: 'Offrez une lecture confortable de vos contenus de fond. Fiches descriptives, brochures PDF et catalogues d’exposition numérisés.',
+      value: 'Digitalisez vos supports papier sans perte de qualité.'
+    },
+    {
+      id: 'agenda',
+      title: 'Agenda & Événements',
+      icon: 'calendar_month',
+      theme: 'rose',
+      description: 'Gérez dynamiquement votre programmation. Expositions temporaires, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
+      value: 'Optimisez la fréquentation de vos activités annexes.'
+    },
+    {
+      id: 'offline',
+      title: 'Accès Hors Ligne',
+      icon: 'download_for_offline',
+      theme: 'rose',
+      description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des parcours pour une consultation fluide même sans connexion 4G/Wifi.',
+      value: 'Garantissez un service continu partout sur votre site.'
+    },
+    {
+      id: 'web',
+      title: 'Contenu Web & Social',
+      icon: 'public',
+      theme: 'rose',
+      description: 'Intégrez le meilleur du web. Formulaires d’enquête, réseaux sociaux ou liens vers votre billetterie : ouvrez votre app sur le monde.',
+      value: 'Connectez votre écosystème digital en un seul lieu.'
+    },
+    {
+      id: 'stats',
+      title: 'Statistiques & Data',
+      icon: 'monitoring',
+      theme: 'rose',
+      description: 'Analysez le comportement de vos visiteurs. Points d’intérêt populaires, temps de lecture et engagement : pilotez par la donnée.',
+      value: 'Prenez des décisions éclairées basées sur l’usage réel.'
+    }
+  ];
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -52,16 +131,16 @@ export default function Home() {
       {/* Top Navigation */}
       <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
         <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
-          <a className="flex items-center gap-3" href="#">
+          <a className="flex items-center gap-3 shrink-0" href="#">
             <img
               src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
               alt="MyInfoMate Logo"
               className="h-10 w-auto object-contain"
             />
-            <span className="text-xl font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
+            <span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
           </a>
-          <nav className="hidden md:flex items-center gap-10">
+          <nav className="hidden lg:flex items-center gap-10">
-            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#solutions">Solutions</a>
+            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#deployment-modes">Solution</a>
             <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#features">Fonctionnalités</a>
             <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#audience">Public</a>
             {/* <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#tarifs">Tarifs</a> */}
@@ -69,20 +148,95 @@ export default function Home() {
           <div className="flex items-center gap-4">
             <a
               href="https://manager.myinfomate.be"
-              className="hidden sm:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors"
+              className="hidden lg:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors"
             >
               Connexion
             </a>
             <button
               onClick={scrollToContact}
-              className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95"
+              className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95 hidden sm:block"
             >
               Demander une démo
             </button>
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"
+            >
+              <span className="material-symbols-outlined text-3xl">
+                {isMenuOpen ? 'close' : 'menu'}
+              </span>
+            </button>
           </div>
         </div>
+
       </header>
 
+      {/* Mobile Menu Backdrop */}
+      <div
+        className={`lg:hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[150] transition-opacity duration-300 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}
+        onClick={() => setIsMenuOpen(false)}
+      />
+
+      {/* Mobile Menu Sidebar */}
+      <div className={`lg:hidden fixed inset-y-0 right-0 w-[300px] h-screen bg-white z-[200] shadow-2xl transition-transform duration-500 ease-in-out transform ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+        <div className="flex flex-col h-full bg-white">
+          {/* Close Button Header */}
+          <div className="flex justify-end p-6 border-b border-slate-50">
+            <button
+              onClick={() => setIsMenuOpen(false)}
+              className="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors"
+              aria-label="Fermer le menu"
+            >
+              <span className="material-symbols-outlined text-3xl font-bold text-slate-900">close</span>
+            </button>
+          </div>
+
+          <nav className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto scrollbar-hide">
+            <div className="flex flex-col gap-6">
+              {[
+                { label: 'ACCUEIL', href: '#' },
+                { label: 'SOLUTION', href: '#deployment-modes' },
+                { label: 'FONCTIONNALITÉS', href: '#features' },
+                { label: 'PUBLIC', href: '#audience' },
+                { label: 'CONTACT', href: '#contact' }
+              ].map((item) => (
+                <a
+                  key={item.label}
+                  className="text-sm font-bold tracking-[0.2em] text-slate-900 hover:text-primary transition-colors py-3 border-b border-slate-50 flex items-center justify-between"
+                  href={item.href}
+                  onClick={() => {
+                    if (item.href === '#') {
+                      window.scrollTo({ top: 0, behavior: 'smooth' });
+                    } else if (item.href.startsWith('#')) {
+                      const el = document.querySelector(item.href);
+                      if (el) { el.scrollIntoView({ behavior: 'smooth' }); }
+                    }
+                    setIsMenuOpen(false);
+                  }}
+                >
+                  {item.label}
+                </a>
+              ))}
+            </div>
+
+            <div className="mt-auto py-8 flex flex-col gap-4">
+              <a
+                href="https://manager.myinfomate.be"
+                className="w-full text-center py-4 text-xs font-black tracking-widest text-slate-800 border-2 border-slate-100 rounded-xl hover:border-primary transition-all"
+              >
+                CONNEXION
+              </a>
+              <button
+                onClick={(e) => { scrollToContact(e); setIsMenuOpen(false); }}
+                className="w-full py-4 bg-primary text-slate-900 font-black text-xs tracking-widest rounded-xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
+              >
+                DEMANDER UNE DÉMO
+              </button>
+            </div>
+          </nav>
+        </div>
+      </div>
+
       <div className="pt-20">
         {/* Hero Section */}
         <section className="relative overflow-hidden py-20 lg:py-32">
@@ -113,11 +267,11 @@ export default function Home() {
                 </button> */}
               </div>
             </div>
-            <div className="flex-1 relative">
+            <div className="flex-1 relative w-full mt-12 lg:mt-0">
-              {/* UI Mockup Group */}
+              {/* UI Mockup Group - Improved for Mobile */}
-              <div className="relative w-full aspect-[4/3] max-w-xl mx-auto">
+              <div className="relative w-full aspect-[4/3] sm:aspect-video lg:aspect-[4/3] max-w-xl mx-auto">
                 {/* Interactive Map Tablet Preview */}
-                <div className="absolute top-0 left-0 w-full h-[85%] bg-slate-900 rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-800 z-10 transform -rotate-2">
+                <div className="absolute top-0 left-0 w-full h-full lg:h-[85%] bg-slate-900 rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-800 z-10 transform lg:-rotate-2">
                   <img
                     src={resolveImage("{{DATA:IMAGE:IMAGE_4}}")}
                     alt="Modern Interactive Map Interface"
@@ -128,48 +282,43 @@ export default function Home() {
                     <p className="text-xs font-extrabold text-slate-900">Parcours des Sculptures</p>
                   </div>
                 </div>
-                {/* Agenda Mobile Preview */}
+
-                <div className="absolute -bottom-10 -left-10 w-1/3 aspect-[9/19] bg-white rounded-[2rem] shadow-2xl border-4 border-slate-900 z-30 transform rotate-3 overflow-hidden">
+                {/* Agenda Mobile Preview - Hidden or repositioned on very small screens */}
+                <div className="hidden sm:block absolute -bottom-6 -left-6 lg:-bottom-10 lg:-left-10 w-1/3 aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-30 transform rotate-3 overflow-hidden">
                   <div className="h-full bg-slate-50 flex flex-col">
-                    <div className="p-3 bg-accent-violet text-white text-center">
+                    <div className="p-2 lg:p-3 bg-accent-violet text-white text-center">
-                      <p className="text-[10px] font-bold uppercase">Agenda</p>
+                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">Agenda</p>
                     </div>
                     <div className="p-2 space-y-2 overflow-hidden flex-1">
-                      <div className="rounded-lg overflow-hidden h-16 bg-slate-200 relative">
+                      <div className="rounded-lg overflow-hidden h-12 lg:h-16 bg-slate-200 relative">
                         <img src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="Mockup 1" className="w-full h-full object-cover" />
                       </div>
                       <div className="h-2 w-3/4 bg-slate-200 rounded"></div>
                       <div className="h-2 w-1/2 bg-slate-100 rounded"></div>
-                      <div className="rounded-lg h-16 bg-slate-200"></div>
                     </div>
                   </div>
-                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-8 h-2 bg-slate-900 rounded-full"></div>
+                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
                 </div>
+
                 {/* Tours Mobile Preview */}
-                <div className="absolute -bottom-6 -right-6 w-[35%] aspect-[9/19] bg-white rounded-[2rem] shadow-2xl border-4 border-slate-900 z-20 transform -rotate-6 overflow-hidden">
+                <div className="absolute -bottom-4 -right-4 lg:-bottom-6 lg:-right-6 w-1/3 lg:w-[35%] aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-20 transform -rotate-6 overflow-hidden">
                   <div className="h-full flex flex-col">
-                    <div className="p-3 bg-primary text-slate-900 text-center">
+                    <div className="p-2 lg:p-3 bg-primary text-slate-900 text-center">
-                      <p className="text-[10px] font-bold uppercase">Visites</p>
+                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">Visites</p>
                     </div>
-                    <div className="p-2 space-y-3 flex-1">
+                    <div className="p-2 space-y-2 flex-1">
                       <div className="flex gap-2 items-center">
-                        <div className="w-10 h-10 rounded-lg bg-slate-200 relative overflow-hidden">
+                        <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-lg bg-slate-200 relative overflow-hidden">
                           <img src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="Mockup 2" className="w-full h-full object-cover" />
                         </div>
                         <div className="space-y-1">
-                          <div className="h-2 w-16 bg-slate-200 rounded"></div>
+                          <div className="h-1.5 w-12 bg-slate-200 rounded"></div>
-                          <div className="h-1 w-10 bg-slate-100 rounded"></div>
+                          <div className="h-1 w-8 bg-slate-100 rounded"></div>
                         </div>
                       </div>
-                      <div className="flex gap-2 items-center opacity-50">
-                        <div className="w-10 h-10 rounded-lg bg-slate-200 relative overflow-hidden">
-                          <img src={resolveImage("{{DATA:IMAGE:IMAGE_6}}")} alt="Mockup 3" className="w-full h-full object-cover" />
-                        </div>
-                        <div className="h-2 w-16 bg-slate-200 rounded"></div>
-                      </div>
                     </div>
                   </div>
-                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-8 h-2 bg-slate-900 rounded-full"></div>
+                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
                 </div>
               </div>
             </div>
@@ -220,71 +369,163 @@ export default function Home() {
           </div>
         </section>
 
-        {/* Interactive Modules Section (Feature target) */}
+        {/* Deployment Modes Section */}
-        <section className="py-24 bg-slate-50 border-y border-slate-100" id="features">
+        <section className="py-24 bg-slate-50 border-y border-slate-100" id="deployment-modes">
           <div className="max-w-7xl mx-auto px-6">
             <div className="text-center mb-16">
-              <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">Fonctionnalités & Modules</h2>
+              <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">Modes de déploiement</h2>
-              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Des modules pour toutes vos envies</h3>
+              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Une plateforme, plusieurs solutions</h3>
               <p className="text-lg text-slate-600 max-w-2xl mx-auto">
-                Personnalisez l'expérience de vos visiteurs en combinant une large gamme de modules interactifs, gérables en quelques clics via notre interface.
+                Choisissez le mode de diffusion le plus adapté à votre lieu et à vos visiteurs. MyInfoMate s'adapte à tous les terminaux.
               </p>
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-              {/* Module 1: Cartes */}
+              {/* Mode 1: Mobile BYOD */}
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
+                <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
-                  <span className="material-symbols-outlined text-3xl">map</span>
+                  <span className="material-symbols-outlined text-3xl">smartphone</span>
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Cartes & Plans</h4>
+                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Mobile (BYOD)</h4>
-                <p className="text-slate-600 text-sm">Géolocalisation précise et plans interactifs pour guider vos visiteurs dans vos enceintes et parcs.</p>
+                <p className="text-slate-600 text-sm leading-relaxed">Les visiteurs utilisent leur propre smartphone pour accéder à vos parcours en toute liberté.</p>
               </div>
-              {/* Module 2: Jeux & Quiz */}
+              {/* Mode 2: Kiosk Tablet */}
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
-                <div className="w-16 h-16 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-colors">
+                <div className="w-14 h-14 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-all">
-                  <span className="material-symbols-outlined text-3xl">sports_esports</span>
+                  <span className="material-symbols-outlined text-3xl">tablet_android</span>
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Jeux & Quiz</h4>
+                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Mode Kiosk (Tablette)</h4>
-                <p className="text-slate-600 text-sm">Rendez la culture ludique avec des quiz interactifs et des parcours gamifiés pour les plus jeunes.</p>
+                <p className="text-slate-600 text-sm leading-relaxed">Solution robuste pré-installée sur vos flottes de tablettes pour une expérience guidée et contrôlée.</p>
               </div>
-              {/* Module 3: Audio/Vidéo */}
+              {/* Mode 3: Web App */}
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
-                <div className="w-16 h-16 rounded-2xl bg-accent-orange/10 text-accent-orange flex items-center justify-center mb-6 group-hover:bg-accent-orange group-hover:text-white transition-colors">
+                <div className="w-14 h-14 rounded-2xl bg-accent-orange/10 text-accent-orange flex items-center justify-center mb-6 group-hover:bg-accent-orange group-hover:text-white transition-all">
-                  <span className="material-symbols-outlined text-3xl">videocam</span>
+                  <span className="material-symbols-outlined text-3xl">language</span>
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Audio & Vidéo</h4>
+                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Web</h4>
-                <p className="text-slate-600 text-sm">Diffusez vos contenus multimédias HD directement sur les terminaux de vos visiteurs.</p>
+                <p className="text-slate-600 text-sm leading-relaxed">Accessible instantanément depuis n'importe quel navigateur moderne, sans installation préalable.</p>
               </div>
-              {/* Module 4: Articles/PDF */}
+              {/* Mode 4: Future VR/AR */}
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+              <div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden">
-                <div className="w-16 h-16 rounded-2xl bg-slate-100 text-slate-900 flex items-center justify-center mb-6 group-hover:bg-slate-900 group-hover:text-white transition-colors">
+                <div className="absolute top-0 right-0 p-3" title="Innovation à venir">
-                  <span className="material-symbols-outlined text-3xl">article</span>
+                  <span className="px-2 py-1 bg-primary text-slate-900 text-[10px] font-black uppercase rounded-md">Bientôt</span>
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Articles & PDF</h4>
+                <div className="w-14 h-14 rounded-2xl bg-white/10 text-primary flex items-center justify-center mb-6">
-                <p className="text-slate-600 text-sm">Fiches descriptives détaillées, brochures PDF et guides de visite numériques.</p>
+                  <span className="material-symbols-outlined text-3xl">view_in_ar</span>
+                </div>
+                <h4 className="text-xl font-extrabold mb-4">Innovation VR & AR</h4>
+                <p className="text-slate-400 text-sm leading-relaxed">Préparez-vous pour le futur avec des expériences immersives sur Meta Quest et lunettes connectées.</p>
               </div>
-              {/* Module 5: Agenda */}
+            </div>
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+          </div>
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
+        </section>
-                  <span className="material-symbols-outlined text-3xl">calendar_month</span>
+
+        {/* Interactive Modules Section (Module Explorer) */}
+        <section className="py-24 bg-white" id="features">
+          <div className="max-w-7xl mx-auto px-6">
+            <div className="text-center mb-16">
+              <h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">Fonctionnalités & Modules</h2>
+              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Explorateur de modules</h3>
+              <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+                Plongez au cœur des possibilités offertes par MyInfoMate. Découvrez comment chaque module transforme l'expérience de vos visiteurs.
+              </p>
+            </div>
+
+            <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start">
+              {/* Sidebar (Tabs) */}
+              <div className="w-full lg:w-1/3 relative">
+                {/* Mobile scroll hints */}
+                <div className="lg:hidden absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
+                <div className="lg:hidden absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>
+
+                <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x relative group/tabs">
+                  {modules.map((module, index) => (
+                    <button
+                      key={module.id}
+                      onClick={() => setActiveModule(index)}
+                      className={`flex items-center gap-3 lg:gap-4 px-5 py-4 lg:px-6 lg:py-5 rounded-2xl border-2 transition-all text-left whitespace-nowrap lg:whitespace-normal snap-center flex-shrink-0 lg:flex-shrink-1 w-auto lg:w-full ${activeModule === index
+                        ? 'bg-rose-50 border-rose-200 text-rose-600 shadow-sm'
+                        : 'bg-white border-slate-100 text-slate-500 hover:bg-slate-50'
+                        }`}
+                    >
+                      <span className={`material-symbols-outlined text-xl lg:text-2xl ${activeModule === index ? 'text-rose-600' : 'text-slate-400'}`}>
+                        {module.icon}
+                      </span>
+                      <span className="font-bold text-xs lg:text-base">{module.title}</span>
+                    </button>
+                  ))}
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Agenda & Événements</h4>
-                <p className="text-slate-600 text-sm">Gérez et affichez dynamiquement vos expositions temporaires et activités programmées.</p>
               </div>
-              {/* Module 6: Web */}
+
-              <div className="bg-white p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col items-center text-center group">
+              {/* Main Display (Active Module) */}
-                <div className="w-16 h-16 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-colors">
+              <div className="flex-1 w-full animate-fade-in">
-                  <span className="material-symbols-outlined text-3xl">public</span>
+                <div className="bg-slate-50 rounded-[3rem] p-8 lg:p-12 border border-slate-100 relative overflow-hidden flex flex-col lg:flex-row gap-12 items-center min-h-[500px]">
+                  {/* Content */}
+                  <div className="flex-1 relative z-10 text-center lg:text-left">
+                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-6 font-bold gap-2 items-center">
+                      <span className="material-symbols-outlined">{modules[activeModule].icon}</span>
+                      <span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
+                    </div>
+                    <h3 className="text-2xl lg:text-4xl font-black text-slate-900 mb-6 leading-tight">
+                      {modules[activeModule].title}
+                    </h3>
+                    <p className="text-slate-600 text-lg leading-relaxed mb-8">
+                      {modules[activeModule].description}
+                    </p>
+                    <div className="p-6 bg-rose-600/5 border border-rose-100 rounded-2xl">
+                      <p className="text-rose-600 font-bold text-sm flex items-center gap-2">
+                        <span className="material-symbols-outlined text-base">verified</span>
+                        Valeur ajoutée : {modules[activeModule].value}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Mockup Showcase */}
+                  <div className="w-full lg:w-[320px] flex-shrink-0 relative">
+                    <div className="relative mx-auto w-[240px] h-[500px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
+                      {/* Notch */}
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-slate-800 rounded-b-2xl z-20"></div>
+
+                      {/* Content Area (Simulated Screen) */}
+                      <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
+                        {/* Simulation of App UI */}
+                        <div className="h-full flex flex-col pt-8">
+                          <header className="h-14 border-b border-slate-100 flex items-center px-4 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
+                            <div className="w-8 h-8 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
+                              <span className="material-symbols-outlined text-lg">{modules[activeModule].icon}</span>
+                            </div>
+                            <span className="ml-3 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
+                          </header>
+                          <div className="p-4 flex-1 space-y-4">
+                            <div className="h-40 rounded-2xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                              <span className="material-symbols-outlined text-5xl text-slate-300">{modules[activeModule].icon}</span>
+                              <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
+                            </div>
+                            <div className="h-3 w-full bg-slate-100 rounded-full"></div>
+                            <div className="h-3 w-2/3 bg-slate-100 rounded-full"></div>
+                            <div className="h-20 w-full bg-slate-50 border border-slate-100 rounded-xl p-3 flex gap-3">
+                              <div className="w-10 h-10 rounded-lg bg-rose-200 shrink-0"></div>
+                              <div className="space-y-2 flex-1">
+                                <div className="h-2 w-full bg-slate-200 rounded-full"></div>
+                                <div className="h-2 w-1/2 bg-slate-200 rounded-full"></div>
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-3">
+                              <div className="h-10 bg-slate-100 rounded-xl"></div>
+                              <div className="h-10 bg-rose-600 rounded-xl"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <h4 className="text-xl font-bold text-slate-900 mb-3">Contenu Web</h4>
-                <p className="text-slate-600 text-sm">Intégrez des flux externes, réseaux sociaux ou formulaires pour une interaction maximale.</p>
               </div>
             </div>
           </div>
         </section>
 
         {/* White Label / Value Proposition */}
-        <section className="py-24 bg-white relative overflow-hidden" id="solutions">
+        <section className="py-24 bg-slate-50 border-y border-slate-100 relative overflow-hidden" id="whitelabel">
           <div className="max-w-7xl mx-auto px-6">
             <div className="flex flex-col lg:flex-row items-center gap-20">
               <div className="flex-1 order-2 lg:order-1">
@@ -352,7 +593,7 @@ export default function Home() {
         </section>
 
         {/* Target Audience */}
-        <section className="py-24 bg-slate-50 border-y border-slate-100" id="audience">
+        <section className="py-24 bg-white" id="audience">
           <div className="max-w-7xl mx-auto px-6">
             <div className="text-center mb-16">
               <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Une solution pensée pour vous</h3>
@@ -385,7 +626,7 @@ export default function Home() {
         </section>
 
         {/* Final CTA */}
-        <section className="py-20">
+        <section className="py-20 bg-slate-50">
           <div className="max-w-7xl mx-auto px-6">
             <div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-[3rem] p-12 lg:p-24 text-center relative overflow-hidden">
               <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">