From 81730499668ed07746102afc26306ff14301089d Mon Sep 17 00:00:00 2001
From: Thomas Fransolet <tfransolet@thelis.be>
Date: Wed, 25 Mar 2026 17:39:23 +0100
Subject: [PATCH] Add claude.md + beautiful smooth animations on scroll

---
 CLAUDE.md        |  33 ++++++++++++
 src/app/page.tsx | 134 +++++++++++++++++++++++++++++------------------
 2 files changed, 115 insertions(+), 52 deletions(-)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..804e11b
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,33 @@
+# myinfomate-landing
+
+Site vitrine de la solution **MyInfoMate**.
+
+## Stack
+- Next.js 16 / React 19 / TypeScript
+- Tailwind CSS v4
+- Babel React Compiler
+
+## Structure
+```
+src/
+├── app/
+│   ├── layout.tsx       # Layout global, font "Plus Jakarta Sans"
+│   ├── page.tsx         # Page d'accueil (unique)
+│   └── globals.css      # Thème Tailwind v4
+└── data/
+    ├── translations.ts  # Textes du site (i18n manuel)
+    └── stitch-images.ts # Assets Stitch (images de démo/présentation)
+```
+
+## Thème
+- Couleur primaire : `#0df2df` (cyan)
+- Accent violet : `#8b5cf6`, accent orange : `#f97316`
+- Utilities custom : `gradient-text`, `icon-circle`, `glass-card`
+- Animations : `float`, `fade-in`
+
+## Commandes
+```bash
+npm run dev      # Dev local
+npm run build    # Build production
+npm run lint     # ESLint
+```
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f6a9e08..0ed0aea 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,6 +22,36 @@ const LANGUAGES: { code: Language; label: string; name: string }[] = [
   { code: 'de', label: 'DE', name: 'Deutsch' },
 ];
 
+function Reveal({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
+      { threshold: 0.12 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : 'translateY(22px)',
+        transition: `opacity 0.55s ease-out ${delay}ms, transform 0.55s ease-out ${delay}ms`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 export default function Home() {
   const [formData, setFormData] = useState({
     firstName: '',
@@ -349,43 +379,43 @@ export default function Home() {
         {/* Strategic Points */}
         <section className="py-24 bg-white" id="points">
           <div className="max-w-7xl mx-auto px-6">
-            <div className="text-center mb-20">
+            <Reveal className="text-center mb-20">
               <h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">{t.strategic.sectionLabel}</h2>
               <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">{t.strategic.sectionTitle}</h3>
-            </div>
+            </Reveal>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
               {/* Feature 1 */}
-              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
+              <Reveal delay={0}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
                 <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                   <span className="material-symbols-outlined text-3xl">sync</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature1Title}</h4>
                 <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Feature 2 */}
-              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300">
+              <Reveal delay={80}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300">
                 <div className="w-14 h-14 rounded-2xl bg-accent-violet/20 text-accent-violet flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                   <span className="material-symbols-outlined text-3xl">code_off</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature2Title}</h4>
                 <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Feature 3 */}
-              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300">
+              <Reveal delay={160}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300">
                 <div className="w-14 h-14 rounded-2xl bg-accent-orange/20 text-accent-orange flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                   <span className="material-symbols-outlined text-3xl">download_for_offline</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature3Title}</h4>
                 <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Feature 4 */}
-              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
+              <Reveal delay={240}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
                 <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                   <span className="material-symbols-outlined text-3xl">dashboard_customize</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature4Title}</h4>
                 <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
-              </div>
+              </div></Reveal>
             </div>
           </div>
         </section>
@@ -393,40 +423,40 @@ export default function Home() {
         {/* Deployment Modes Section */}
         <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">
+            <Reveal className="text-center mb-16">
               <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">{t.deployment.sectionLabel}</h2>
               <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">{t.deployment.sectionTitle}</h3>
               <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                 {t.deployment.sectionDesc}
               </p>
-            </div>
+            </Reveal>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
               {/* Mode 1: Mobile BYOD */}
-              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
+              <Reveal delay={0}><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-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">smartphone</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode1Title}</h4>
                 <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode1Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Mode 2: Kiosk Tablet */}
-              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
+              <Reveal delay={80}><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-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">tablet_android</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode2Title}</h4>
                 <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode2Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Mode 3: Web App */}
-              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
+              <Reveal delay={160}><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-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">language</span>
                 </div>
                 <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode3Title}</h4>
                 <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode3Desc}</p>
-              </div>
+              </div></Reveal>
               {/* Mode 4: Future VR/AR */}
-              <div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden">
+              <Reveal delay={240}><div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden">
                 <div className="absolute top-0 right-0 p-3" title="Innovation à venir">
                   <span className="px-2 py-1 bg-primary text-slate-900 text-[10px] font-black uppercase rounded-md">{t.deployment.comingSoon}</span>
                 </div>
@@ -435,7 +465,7 @@ export default function Home() {
                 </div>
                 <h4 className="text-xl font-extrabold mb-4">{t.deployment.mode4Title}</h4>
                 <p className="text-slate-400 text-sm leading-relaxed">{t.deployment.mode4Desc}</p>
-              </div>
+              </div></Reveal>
             </div>
           </div>
         </section>
@@ -443,17 +473,17 @@ export default function Home() {
         {/* 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">
+            <Reveal className="text-center mb-16">
               <h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">{t.modules.sectionLabel}</h2>
               <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">{t.modules.sectionTitle}</h3>
               <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                 {t.modules.sectionDesc}
               </p>
-            </div>
+            </Reveal>
 
             <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">
+              <Reveal delay={100} className="w-full lg:w-1/3 relative">
                 <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">
@@ -474,10 +504,10 @@ export default function Home() {
                     </button>
                   ))}
                 </div>
-              </div>
+              </Reveal>
 
               {/* Main Display */}
-              <div className="flex-1 w-full lg:flex lg:flex-col">
+              <Reveal delay={200} 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">
@@ -608,7 +638,7 @@ export default function Home() {
                   </div>
                 </div>
 
-              </div>
+              </Reveal>
             </div>
           </div>
         </section>
@@ -620,7 +650,7 @@ export default function Home() {
             <div className="absolute bottom-20 right-1/4 w-80 h-80 bg-accent-violet/10 rounded-full blur-3xl"></div>
           </div>
           <div className="max-w-7xl mx-auto px-6 relative z-10">
-            <div className="text-center mb-16">
+            <Reveal className="text-center mb-16">
               <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/30 text-primary text-xs font-extrabold uppercase tracking-widest px-4 py-2 rounded-full mb-6 animate-float">
                 <span className="material-symbols-outlined text-sm">auto_awesome</span>
                 {t.ai.badge}
@@ -630,10 +660,10 @@ export default function Home() {
                 {t.ai.titleBefore}<span className="gradient-text">{t.ai.titleHighlight}</span>{t.ai.titleAfter}
               </h3>
               <p className="text-slate-400 text-lg max-w-2xl mx-auto">{t.ai.desc}</p>
-            </div>
+            </Reveal>
             <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
               {/* Chat mockup */}
-              <div className="w-full lg:w-auto flex justify-center">
+              <Reveal delay={80} className="w-full lg:w-auto flex justify-center">
                 <div className="w-full max-w-xs bg-slate-800 rounded-3xl border border-slate-700 shadow-2xl shadow-primary/10 overflow-hidden">
                   <div className="flex items-center gap-3 p-4 border-b border-slate-700">
                     <div className="w-9 h-9 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
@@ -677,37 +707,37 @@ export default function Home() {
                     </div>
                   </div>
                 </div>
-              </div>
+              </Reveal>
               {/* Features grid */}
               <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
-                <div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
+                <Reveal delay={0}><div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
                   <div className="w-11 h-11 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                     <span className="material-symbols-outlined text-primary">translate</span>
                   </div>
                   <h4 className="text-white font-bold mb-2">{t.ai.feature1Title}</h4>
                   <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature1Desc}</p>
-                </div>
-                <div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-violet/40 transition-colors group">
+                </div></Reveal>
+                <Reveal delay={80}><div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-violet/40 transition-colors group">
                   <div className="w-11 h-11 bg-accent-violet/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-accent-violet/20 transition-colors">
                     <span className="material-symbols-outlined text-accent-violet">manage_search</span>
                   </div>
                   <h4 className="text-white font-bold mb-2">{t.ai.feature2Title}</h4>
                   <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature2Desc}</p>
-                </div>
-                <div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-orange/40 transition-colors group">
+                </div></Reveal>
+                <Reveal delay={160}><div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-orange/40 transition-colors group">
                   <div className="w-11 h-11 bg-accent-orange/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-accent-orange/20 transition-colors">
                     <span className="material-symbols-outlined text-accent-orange">forum</span>
                   </div>
                   <h4 className="text-white font-bold mb-2">{t.ai.feature3Title}</h4>
                   <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature3Desc}</p>
-                </div>
-                <div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
+                </div></Reveal>
+                <Reveal delay={240}><div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
                   <div className="w-11 h-11 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                     <span className="material-symbols-outlined text-primary">tune</span>
                   </div>
                   <h4 className="text-white font-bold mb-2">{t.ai.feature4Title}</h4>
                   <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature4Desc}</p>
-                </div>
+                </div></Reveal>
               </div>
             </div>
           </div>
@@ -717,7 +747,7 @@ export default function Home() {
         <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">
+              <Reveal delay={0} className="flex-1 order-2 lg:order-1">
                 <div className="relative max-w-md mx-auto">
                   <div className="bg-white p-6 rounded-3xl shadow-xl border border-slate-200 transform -rotate-3 hover:rotate-0 transition-transform duration-500">
                     <div className="flex items-center gap-3 mb-6">
@@ -751,8 +781,8 @@ export default function Home() {
                     </div>
                   </div>
                 </div>
-              </div>
-              <div className="flex-1 order-1 lg:order-2">
+              </Reveal>
+              <Reveal delay={120} className="flex-1 order-1 lg:order-2">
                 <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">{t.whitelabel.sectionLabel}</h2>
                 <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">{t.whitelabel.title}</h3>
                 <p className="text-lg text-slate-600 leading-relaxed mb-8" dangerouslySetInnerHTML={{ __html: t.whitelabel.desc }} />
@@ -774,7 +804,7 @@ export default function Home() {
                   {t.whitelabel.cta}
                   <span className="material-symbols-outlined">brush</span>
                 </button>
-              </div>
+              </Reveal>
             </div>
           </div>
         </section>
@@ -782,32 +812,32 @@ export default function Home() {
         {/* Target Audience */}
         <section className="py-24 bg-white" id="audience">
           <div className="max-w-7xl mx-auto px-6">
-            <div className="text-center mb-16">
+            <Reveal className="text-center mb-16">
               <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">{t.audience.title}</h3>
               <p className="text-slate-600 max-w-2xl mx-auto">{t.audience.subtitle}</p>
-            </div>
+            </Reveal>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
-              <div className="text-center p-6 flex flex-col items-center">
+              <Reveal delay={0}><div className="text-center p-6 flex flex-col items-center">
                 <div className="w-24 h-24 icon-circle mb-6 text-accent-violet">
                   <span className="material-symbols-outlined text-5xl">museum</span>
                 </div>
                 <h4 className="text-2xl font-bold mb-3">{t.audience.item1Title}</h4>
                 <p className="text-slate-600 text-sm">{t.audience.item1Desc}</p>
-              </div>
-              <div className="text-center p-6 flex flex-col items-center">
+              </div></Reveal>
+              <Reveal delay={80}><div className="text-center p-6 flex flex-col items-center">
                 <div className="w-24 h-24 icon-circle mb-6 text-primary">
                   <span className="material-symbols-outlined text-5xl">travel_explore</span>
                 </div>
                 <h4 className="text-2xl font-bold mb-3">{t.audience.item2Title}</h4>
                 <p className="text-slate-600 text-sm">{t.audience.item2Desc}</p>
-              </div>
-              <div className="text-center p-6 flex flex-col items-center">
+              </div></Reveal>
+              <Reveal delay={160}><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">hotel</span>
                 </div>
                 <h4 className="text-2xl font-bold mb-3">{t.audience.item3Title}</h4>
                 <p className="text-slate-600 text-sm">{t.audience.item3Desc}</p>
-              </div>
+              </div></Reveal>
             </div>
           </div>
         </section>
@@ -815,7 +845,7 @@ export default function Home() {
         {/* Final CTA */}
         <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">
+            <Reveal><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">
                 <div className="absolute top-10 left-10 w-40 h-40 bg-primary rounded-full blur-3xl"></div>
                 <div className="absolute bottom-10 right-10 w-60 h-60 bg-accent-violet rounded-full blur-3xl"></div>
@@ -840,7 +870,7 @@ export default function Home() {
                   {t.cta.button2}
                 </a>
               </div>
-            </div>
+            </div></Reveal>
           </div>
         </section>