Update branding from culturelle to visitor in general

src/app/layout.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "MyInfoMate | Solution Interactive pour Musées et Sites Culturels",
-  description: "La solution SaaS leader pour la digitalisation des musées et sites culturels. Créativité et technologie au service du patrimoine.",
+  title: "MyInfoMate | La technologie au service de l'expérience visiteur",
+  description: "La solution SaaS pour digitaliser l'expérience de vos visiteurs. Créativité et technologie au service de l'expérience visiteur.",
   icons: {
     icon: "/myinfomate-logo.png",
   },

src/app/page.tsx

@@ -39,23 +39,23 @@ export default function Home() {
       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.'
+      description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter l’attention de tous vos visiteurs.',
+      value: 'Augmentez l’engagement et la fidélisation de vos visiteurs.'
     },
     {
       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.'
+      description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos et témoignages accessibles en un clic.',
+      value: 'Enrichissez l’expérience visiteur 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.',
+      description: 'Offrez une lecture confortable de vos contenus. Fiches descriptives, brochures PDF et catalogues numérisés.',
       value: 'Digitalisez vos supports papier sans perte de qualité.'
     },
     {
@@ -63,15 +63,15 @@ export default function Home() {
       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.'
+      description: 'Gérez dynamiquement votre programmation. Événements, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
+      value: 'Optimisez la fréquentation de vos activités.'
     },
     {
       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.',
+      description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des contenus pour une consultation fluide même sans connexion 4G/Wifi.',
       value: 'Garantissez un service continu partout sur votre site.'
     },
     {
@@ -79,7 +79,7 @@ export default function Home() {
       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.',
+      description: 'Intégrez le meilleur du web. Formulaires, réseaux sociaux ou liens externes : ouvrez votre app sur le monde.',
       value: 'Connectez votre écosystème digital en un seul lieu.'
     },
     {
@@ -87,7 +87,7 @@ export default function Home() {
       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.',
+      description: 'Analysez le comportement de vos visiteurs. Contenus 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.'
     }
   ];
@@ -246,7 +246,7 @@ export default function Home() {
             <div className="flex-1 text-center lg:text-left">
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-slate-700 text-xs font-bold uppercase tracking-wider mb-6">
                 <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
-                La technologie au service du patrimoine
+                La technologie au service de l'expérience visiteur
               </div>
               <h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8">
                 MyInfoMate - La solution facile pour créer, gérer et diffuser du <span className="gradient-text">contenu interactif</span>
@@ -279,7 +279,7 @@ export default function Home() {
                   />
                   <div className="absolute top-4 left-6 bg-white/90 backdrop-blur px-4 py-2 rounded-xl shadow-lg border border-primary/20">
                     <p className="text-[10px] font-bold text-slate-400 uppercase">Carte Interactive</p>
-                    <p className="text-xs font-extrabold text-slate-900">Parcours des Sculptures</p>
+                    <p className="text-xs font-extrabold text-slate-900">Parcours Découverte</p>
                   </div>
                 </div>
 
@@ -330,7 +330,7 @@ export default function Home() {
           <div className="max-w-7xl mx-auto px-6">
             <div className="text-center mb-20">
               <h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">Points Stratégiques</h2>
-              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service du patrimoine</h3>
+              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service de l'expérience visiteur</h3>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
               {/* Feature 1 */}
@@ -430,18 +430,17 @@ export default function Home() {
               </p>
             </div>
 
-            <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start">
+            <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
               {/* 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">
+                <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x">
                   {modules.map((module, index) => (
                     <button
                       key={module.id}
                       onClick={() => setActiveModule(index)}
+                      onMouseEnter={() => 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'
@@ -456,62 +455,53 @@ export default function Home() {
                 </div>
               </div>
 
-              {/* Main Display (Active Module) */}
-              <div className="flex-1 w-full animate-fade-in">
-                <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">
+              {/* Main Display */}
+              <div className="flex-1 w-full lg:flex lg:flex-col">
+
+                {/* Mobile: single centered card */}
+                <div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
+                  <div className="text-center mb-6">
+                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-4 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">
+                    <h3 className="text-2xl font-black text-slate-900 mb-4 leading-tight">{modules[activeModule].title}</h3>
+                    <p className="text-slate-600 leading-relaxed mb-6">{modules[activeModule].description}</p>
+                    <div className="p-4 bg-rose-600/5 border border-rose-100 rounded-2xl">
+                      <p className="text-rose-600 font-bold text-sm flex items-center justify-center gap-2">
                         <span className="material-symbols-outlined text-base">verified</span>
-                        Valeur ajoutée : {modules[activeModule].value}
+                        {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="flex justify-center">
+                    <div className="relative w-[200px] h-[420px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-800 rounded-b-2xl z-20"></div>
                       <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 className="h-full flex flex-col pt-7">
+                          <header className="h-12 border-b border-slate-100 flex items-center px-3 bg-white/80 sticky top-0 z-10">
+                            <div className="w-7 h-7 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
+                              <span className="material-symbols-outlined text-base">{modules[activeModule].icon}</span>
                             </div>
-                            <span className="ml-3 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
+                            <span className="ml-2 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="p-3 flex-1 space-y-3">
+                            <div className="h-32 rounded-xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                              <span className="material-symbols-outlined text-4xl 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 className="h-2 w-full bg-slate-100 rounded-full"></div>
+                            <div className="h-2 w-2/3 bg-slate-100 rounded-full"></div>
+                            <div className="h-14 w-full bg-slate-50 border border-slate-100 rounded-xl p-2 flex gap-2">
+                              <div className="w-8 h-8 rounded-lg bg-rose-200 shrink-0"></div>
+                              <div className="space-y-1 flex-1">
+                                <div className="h-1.5 w-full bg-slate-200 rounded-full"></div>
+                                <div className="h-1.5 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 className="grid grid-cols-2 gap-2">
+                              <div className="h-8 bg-slate-100 rounded-lg"></div>
+                              <div className="h-8 bg-rose-600 rounded-lg"></div>
                             </div>
                           </div>
                         </div>
@@ -519,6 +509,84 @@ export default function Home() {
                     </div>
                   </div>
                 </div>
+
+                {/* Desktop: original layout + enobase-style 3D phone stack */}
+                <div className="hidden lg:flex flex-1 bg-slate-50 rounded-[3rem] p-10 border border-slate-100 gap-10 items-center">
+                  {/* Description */}
+                  <div className="flex-1 relative z-10 text-left">
+                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-5 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-3xl font-black text-slate-900 mb-5 leading-tight">{modules[activeModule].title}</h3>
+                    <p className="text-slate-600 text-base leading-relaxed mb-6">{modules[activeModule].description}</p>
+                    <div className="p-5 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>
+
+                  {/* Enobase-style 3D horizontal perspective phone stack */}
+                  <div className="flex-shrink-0 relative" style={{ width: '280px', height: '480px' }}>
+                    <div style={{ position: 'absolute', inset: 0, transform: 'perspective(900px) rotateX(6deg) rotateY(-15deg)' }}>
+                      {modules.map((module, index) => {
+                        const deckPos = (index - activeModule + modules.length) % modules.length;
+                        const isActive = deckPos === 0;
+                        return (
+                          <div
+                            key={module.id}
+                            style={{
+                              position: 'absolute',
+                              top: 0,
+                              left: 0,
+                              transformOrigin: 'top left',
+                              transform: `translateX(${deckPos * 12}px) scale(${1 - deckPos * 0.06})`,
+                              zIndex: modules.length - deckPos,
+                              opacity: isActive ? 1 : Math.max(0.06, 0.55 - deckPos * 0.1),
+                              transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
+                            }}
+                          >
+                            <div className={`relative w-[240px] h-[480px] rounded-[3rem] border-[8px] overflow-hidden ${isActive ? 'bg-slate-900 border-slate-800 shadow-2xl shadow-rose-500/20' : 'bg-slate-800 border-slate-700 shadow-xl'}`}>
+                              <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>
+                              <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
+                                <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">{module.icon}</span>
+                                    </div>
+                                    <span className="ml-3 font-bold text-xs text-slate-900 truncate">{module.title}</span>
+                                  </header>
+                                  <div className="p-4 flex-1 space-y-4">
+                                    <div className="h-36 rounded-2xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                                      <span className="material-symbols-outlined text-5xl text-slate-300">{module.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>
+                  </div>
+                </div>
+
               </div>
             </div>
           </div>
@@ -567,7 +635,7 @@ export default function Home() {
                 <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2>
                 <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">Votre marque, votre application. Pas la nôtre.</h3>
                 <p className="text-lg text-slate-600 leading-relaxed mb-8">
-                  Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre institution, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
+                  Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre lieu, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
                 </p>
                 <ul className="space-y-4 mb-10 text-slate-700 font-semibold">
                   <li className="flex items-center gap-3">
@@ -576,7 +644,7 @@ export default function Home() {
                   </li>
                   <li className="flex items-center gap-3">
                     <span className="material-symbols-outlined text-accent-orange">check_circle</span>
-                    Logo institutionnel sur l'écran d'accueil
+                    Votre logo sur l'écran d'accueil
                   </li>
                   <li className="flex items-center gap-3">
                     <span className="material-symbols-outlined text-accent-orange">check_circle</span>
@@ -616,10 +684,10 @@ export default function Home() {
               </div>
               <div className="text-center p-6 flex flex-col items-center">
                 <div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
-                  <span className="material-symbols-outlined text-5xl">castle</span>
+                  <span className="material-symbols-outlined text-5xl">hotel</span>
                 </div>
-                <h4 className="text-2xl font-bold mb-3">Lieux de Patrimoine</h4>
-                <p className="text-slate-600 text-sm">Redonnez vie à l'history avec des reconstitutions en réalité augmentée et des parcours scénographiés immersifs.</p>
+                <h4 className="text-2xl font-bold mb-3">Hôtels & Loisirs</h4>
+                <p className="text-slate-600 text-sm">Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.</p>
               </div>
             </div>
           </div>
@@ -637,7 +705,7 @@ export default function Home() {
                 Prêt à transformer votre <span className="text-primary">expérience visiteur</span> ?
               </h2>
               <p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10">
-                Rejoignez des dizaines d'institutions culturelles qui font confiance à MyInfoMate pour leur stratégie numérique.
+                Rejoignez des dizaines de lieux qui font confiance à MyInfoMate pour engager leurs visiteurs.
               </p>
               <div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
                 <button
@@ -776,7 +844,7 @@ export default function Home() {
                 <span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
               </div>
               <p className="text-slate-500 text-sm leading-relaxed mb-6">
-                La solution SaaS pour la digitalisation des musées et sites culturels. Créativité et technologie au service du patrimoine.
+                La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.
               </p>
               <div className="flex gap-4">
                 <a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="#">