Added screenshots + todo for deployment

README.md

@@ -1,36 +1,49 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# myinfomate-landing
 
-## Getting Started
+Site vitrine de la solution MyInfoMate (Next.js 16 / Tailwind CSS v4).
 
-First, run the development server:
+## Dev local
 
 ```bash
-npm run dev
+npm install
-# or
+npm run dev       # http://localhost:3000
-yarn dev
+npm run build
-# or
+npm run lint
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Déploiement
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### 1. Builder et pusher l'image
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+docker build -t registry.unov.be/myinfomate/landing:latest .
+docker push registry.unov.be/myinfomate/landing:latest
+```
 
-## Learn More
+### 2. Sur le VPS — mettre à jour le conteneur
 
-To learn more about Next.js, take a look at the following resources:
+```bash
+docker pull registry.unov.be/myinfomate/landing:latest
+docker compose up -d myinfomate-landing
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+### Config Traefik (docker-compose sur le VPS)
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```yaml
+myinfomate-landing:
+  container_name: "myinfomate-landing"
+  image: registry.unov.be/myinfomate/landing:latest
+  networks:
+    - web
+  restart: always
+  labels:
+    - "traefik.enable=true"
+    - "traefik.http.routers.landing.rule=Host(`myinfomate.be`)"
+    - "traefik.http.routers.landing.entrypoints=web"
+    - "traefik.http.routers.landing.middlewares=redirect@file"
+    - "traefik.http.routers.landing-secured.rule=Host(`myinfomate.be`)"
+    - "traefik.http.routers.landing-secured.entrypoints=web-secured"
+    - "traefik.http.routers.landing-secured.tls.certresolver=mytlschallenge"
+```
 
-## Deploy on Vercel
+Le certificat SSL est géré automatiquement par Traefik (Let's Encrypt).
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

src/app/page.tsx

@@ -158,6 +158,7 @@ export default function Home() {
               {t.nav.ai}
             </a>
             <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[88px] text-center" href="#audience">{t.nav.audience}</a>
+            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[64px] text-center" href="#pricing">{t.pricing.sectionLabel}</a>
           </nav>
           <div className="flex items-center gap-4">
             <a
@@ -238,6 +239,7 @@ export default function Home() {
                 { label: t.mobileMenu.features, href: '#features' },
                 { label: t.mobileMenu.ai, href: '#ai-assistant' },
                 { label: t.mobileMenu.audience, href: '#audience' },
+                { label: t.pricing.sectionLabel.toUpperCase(), href: '#pricing' },
                 { label: t.mobileMenu.contact, href: '#contact' }
               ].map((item) => (
                 <a
@@ -326,7 +328,7 @@ export default function Home() {
                   <img
                     src={resolveImage("{{DATA:IMAGE:IMAGE_4}}")}
                     alt="Modern Interactive Map Interface"
-                    className="w-full h-full object-cover opacity-80"
+                    className="w-full h-full object-cover object-top opacity-80"
                   />
                   <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">{t.mockup.mapTitle}</p>
@@ -336,39 +338,13 @@ export default function Home() {
 
                 {/* 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">
+                  <img src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="App screenshot" className="w-full h-full object-cover object-top" />
-                    <div className="p-2 lg:p-3 bg-accent-violet text-white text-center">
-                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.agenda}</p>
-                    </div>
-                    <div className="p-2 space-y-2 overflow-hidden flex-1">
-                      <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>
-                  </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-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">
+                  <img src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="App screenshot" className="w-full h-full object-cover object-top" />
-                    <div className="p-2 lg:p-3 bg-primary text-slate-900 text-center">
-                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.tours}</p>
-                    </div>
-                    <div className="p-2 space-y-2 flex-1">
-                      <div className="flex gap-2 items-center">
-                        <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-1.5 w-12 bg-slate-200 rounded"></div>
-                          <div className="h-1 w-8 bg-slate-100 rounded"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </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>
@@ -816,32 +792,293 @@ export default function Home() {
               <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>
             </Reveal>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Reveal delay={0}><div className="text-center p-6 flex flex-col items-center">
+              <Reveal delay={0}>
-                <div className="w-24 h-24 icon-circle mb-6 text-accent-violet">
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
-                  <span className="material-symbols-outlined text-5xl">museum</span>
+                  <div className="w-20 h-20 icon-circle mb-5 text-accent-violet group-hover:scale-110 transition-transform">
+                    <span className="material-symbols-outlined text-4xl">museum</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item1Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item1Desc}</p>
                 </div>
-                <h4 className="text-2xl font-bold mb-3">{t.audience.item1Title}</h4>
+              </Reveal>
-                <p className="text-slate-600 text-sm">{t.audience.item1Desc}</p>
+              <Reveal delay={60}>
-              </div></Reveal>
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
-              <Reveal delay={80}><div className="text-center p-6 flex flex-col items-center">
+                  <div className="w-20 h-20 icon-circle mb-5 text-primary group-hover:scale-110 transition-transform">
-                <div className="w-24 h-24 icon-circle mb-6 text-primary">
+                    <span className="material-symbols-outlined text-4xl">travel_explore</span>
-                  <span className="material-symbols-outlined text-5xl">travel_explore</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item2Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item2Desc}</p>
                 </div>
-                <h4 className="text-2xl font-bold mb-3">{t.audience.item2Title}</h4>
+              </Reveal>
-                <p className="text-slate-600 text-sm">{t.audience.item2Desc}</p>
+              <Reveal delay={120}>
-              </div></Reveal>
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
-              <Reveal delay={160}><div className="text-center p-6 flex flex-col items-center">
+                  <div className="w-20 h-20 icon-circle mb-5 text-emerald-500 group-hover:scale-110 transition-transform">
-                <div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
+                    <span className="material-symbols-outlined text-4xl">park</span>
-                  <span className="material-symbols-outlined text-5xl">hotel</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item3Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item3Desc}</p>
                 </div>
-                <h4 className="text-2xl font-bold mb-3">{t.audience.item3Title}</h4>
+              </Reveal>
-                <p className="text-slate-600 text-sm">{t.audience.item3Desc}</p>
+              <Reveal delay={180}>
-              </div></Reveal>
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
+                  <div className="w-20 h-20 icon-circle mb-5 text-accent-orange group-hover:scale-110 transition-transform">
+                    <span className="material-symbols-outlined text-4xl">hotel</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item4Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item4Desc}</p>
+                </div>
+              </Reveal>
+              <Reveal delay={240}>
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
+                  <div className="w-20 h-20 icon-circle mb-5 text-rose-500 group-hover:scale-110 transition-transform">
+                    <span className="material-symbols-outlined text-4xl">festival</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item5Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item5Desc}</p>
+                </div>
+              </Reveal>
+              <Reveal delay={300}>
+                <div className="group flex flex-col items-center text-center p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all">
+                  <div className="w-20 h-20 icon-circle mb-5 text-indigo-500 group-hover:scale-110 transition-transform">
+                    <span className="material-symbols-outlined text-4xl">school</span>
+                  </div>
+                  <h4 className="text-xl font-extrabold mb-2 text-slate-900">{t.audience.item6Title}</h4>
+                  <p className="text-slate-500 text-sm leading-relaxed">{t.audience.item6Desc}</p>
+                </div>
+              </Reveal>
             </div>
           </div>
         </section>
 
+        {/* Pricing Section */}
+        <section className="py-24 bg-slate-50" id="pricing">
+          <div className="max-w-7xl mx-auto px-6">
+            <Reveal>
+              <div className="text-center mb-16">
+                <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">{t.pricing.sectionLabel}</h2>
+                <h3 className="text-4xl lg:text-5xl font-extrabold text-slate-900 mb-4">{t.pricing.sectionTitle}</h3>
+                <p className="text-slate-500 max-w-xl mx-auto">{t.pricing.sectionDesc}</p>
+              </div>
+            </Reveal>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-stretch">
+
+              {/* Starter */}
+              <Reveal delay={0}>
+                <div className="flex flex-col h-full bg-white rounded-3xl border border-slate-200 p-8 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="mb-6">
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Starter</p>
+                    <div className="flex items-end gap-1">
+                      <span className="text-xs text-slate-400 mb-1">{t.pricing.startingFrom}</span>
+                      <span className="text-4xl font-extrabold text-slate-900">€69</span>
+                      <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-1">{t.pricing.htva}</p>
+                  </div>
+                  <ul className="space-y-3 flex-1 mb-8">
+                    {[
+                      t.pricing.features.mobileApp,
+                      t.pricing.features.kioskApp,
+                      t.pricing.features.backoffice,
+                      t.pricing.features.sections,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-700">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      2 GB {t.pricing.features.storage}
+                    </li>
+                    {[
+                      t.pricing.features.autoTranslation,
+                      t.pricing.features.pushNotif,
+                      t.pricing.features.stats,
+                      t.pricing.features.ai,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-400">
+                        <span className="material-symbols-outlined text-slate-300 text-base shrink-0">cancel</span>
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                  <button onClick={scrollToContact} className="w-full py-3 rounded-2xl border-2 border-slate-200 text-slate-700 font-bold text-sm hover:border-primary hover:text-primary transition-all">
+                    {t.pricing.ctaStart}
+                  </button>
+                </div>
+              </Reveal>
+
+              {/* Standard */}
+              <Reveal delay={80}>
+                <div className="flex flex-col h-full bg-white rounded-3xl border-2 border-primary p-8 shadow-xl shadow-primary/10 relative">
+                  <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+                    <span className="bg-primary text-slate-900 text-xs font-extrabold px-4 py-1.5 rounded-full uppercase tracking-wider">{t.pricing.recommended}</span>
+                  </div>
+                  <div className="mb-6">
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Standard</p>
+                    <div className="flex items-end gap-1">
+                      <span className="text-xs text-slate-400 mb-1">{t.pricing.startingFrom}</span>
+                      <span className="text-4xl font-extrabold text-slate-900">€99</span>
+                      <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-1">{t.pricing.htva}</p>
+                  </div>
+                  <ul className="space-y-3 flex-1 mb-8">
+                    {[
+                      t.pricing.features.mobileApp,
+                      t.pricing.features.kioskApp,
+                      t.pricing.features.backoffice,
+                      t.pricing.features.sections,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-700">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      10 GB {t.pricing.features.storage}
+                    </li>
+                    {[
+                      t.pricing.features.autoTranslation,
+                      t.pricing.features.pushNotif,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-700">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.stats} ({t.pricing.features.statsBasic})
+                    </li>
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.ai} — 500 {t.pricing.features.reqPerMonth}
+                    </li>
+                  </ul>
+                  <button onClick={scrollToContact} className="w-full py-3 rounded-2xl bg-primary text-slate-900 font-extrabold text-sm hover:brightness-110 transition-all shadow-lg shadow-primary/20">
+                    {t.pricing.ctaStart}
+                  </button>
+                </div>
+              </Reveal>
+
+              {/* Premium */}
+              <Reveal delay={160}>
+                <div className="flex flex-col h-full bg-white rounded-3xl border border-slate-200 p-8 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="mb-6">
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Premium</p>
+                    <div className="flex items-end gap-1">
+                      <span className="text-xs text-slate-400 mb-1">{t.pricing.startingFrom}</span>
+                      <span className="text-4xl font-extrabold text-slate-900">€199</span>
+                      <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-1">{t.pricing.htva}</p>
+                  </div>
+                  <ul className="space-y-3 flex-1 mb-8">
+                    {[
+                      t.pricing.features.mobileApp,
+                      t.pricing.features.kioskApp,
+                      t.pricing.features.backoffice,
+                      t.pricing.features.sections,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-700">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      50 GB {t.pricing.features.storage}
+                    </li>
+                    {[
+                      t.pricing.features.autoTranslation,
+                      t.pricing.features.pushNotif,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-700">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.stats} ({t.pricing.features.statsAdvanced})
+                    </li>
+                    <li className="flex items-center gap-3 text-sm text-slate-700">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.ai} — 2 000 {t.pricing.features.reqPerMonth}
+                    </li>
+                  </ul>
+                  <button onClick={scrollToContact} className="w-full py-3 rounded-2xl border-2 border-slate-200 text-slate-700 font-bold text-sm hover:border-primary hover:text-primary transition-all">
+                    {t.pricing.ctaStart}
+                  </button>
+                </div>
+              </Reveal>
+
+              {/* Entreprise */}
+              <Reveal delay={240}>
+                <div className="flex flex-col h-full bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl p-8 shadow-xl">
+                  <div className="mb-6">
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Entreprise</p>
+                    <p className="text-3xl font-extrabold text-white">{t.pricing.enterprisePrice}</p>
+                  </div>
+                  <p className="text-slate-400 text-sm leading-relaxed flex-1 mb-8">{t.pricing.enterpriseDesc}</p>
+                  <ul className="space-y-3 mb-8">
+                    {[
+                      t.pricing.features.mobileApp,
+                      t.pricing.features.kioskApp,
+                      t.pricing.features.autoTranslation,
+                      t.pricing.features.pushNotif,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-300">
+                        <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                    <li className="flex items-center gap-3 text-sm text-slate-300">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.storage} {t.pricing.features.custom}
+                    </li>
+                    <li className="flex items-center gap-3 text-sm text-slate-300">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.stats} {t.pricing.features.custom}
+                    </li>
+                    <li className="flex items-center gap-3 text-sm text-slate-300">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
+                      {t.pricing.features.ai} {t.pricing.features.custom}
+                    </li>
+                  </ul>
+                  <button onClick={scrollToContact} className="w-full py-3 rounded-2xl bg-white/10 text-white font-bold text-sm hover:bg-white/20 transition-all text-center border border-white/10">
+                    {t.pricing.ctaContact}
+                  </button>
+                </div>
+              </Reveal>
+
+            </div>
+
+            <Reveal delay={100}>
+              <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 bg-white rounded-2xl border border-slate-200 px-8 py-6">
+                <div className="flex items-center gap-4">
+                  <span className="material-symbols-outlined text-primary text-3xl shrink-0">calendar_month</span>
+                  <div>
+                    <p className="font-extrabold text-slate-900">{t.pricing.multiYearLabel}</p>
+                    <p className="text-sm text-slate-500">{t.pricing.multiYearDesc}</p>
+                  </div>
+                </div>
+                <button
+                  onClick={scrollToContact}
+                  className="shrink-0 px-6 py-3 rounded-full border-2 border-primary text-primary font-bold text-sm hover:bg-primary hover:text-slate-900 transition-all whitespace-nowrap"
+                >
+                  {t.pricing.multiYearCta}
+                </button>
+              </div>
+            </Reveal>
+
+          </div>
+        </section>
+
         {/* Final CTA */}
         <section className="py-20 bg-slate-50">
           <div className="max-w-7xl mx-auto px-6">

src/data/stitch-images.ts

@@ -4,10 +4,10 @@
  */
 export const STITCH_IMAGES: Record<string, string> = {
     "{{DATA:IMAGE:IMAGE_14}}": "/myinfomate-logo.png",
-    "{{DATA:IMAGE:IMAGE_4}}": "https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=2000",
+    "{{DATA:IMAGE:IMAGE_4}}": "/map_generated.png",
-    "{{DATA:IMAGE:IMAGE_5}}": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&q=80&w=500",
+    "{{DATA:IMAGE:IMAGE_5}}": "/app-screenshot-2.png",
-    "{{DATA:IMAGE:IMAGE_6}}": "https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=200",
+    "{{DATA:IMAGE:IMAGE_6}}": "/app-screenshot-1.png",
-    "{{DATA:IMAGE:IMAGE_7}}": "https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=200",
+    "{{DATA:IMAGE:IMAGE_7}}": "/app-screenshot-1.png",
 };
 
 /**

src/data/translations.ts

@@ -142,14 +142,20 @@ const translations = {
       themeApplied: 'Thème Appliqué avec succès',
     },
     audience: {
-      title: 'Une solution pensée pour vous',
+      title: 'Tout lieu qui accueille du public',
-      subtitle: "Que vous soyez une petite galerie ou un monument national, MyInfoMate s'adapte à vos besoins.",
+      subtitle: "MyInfoMate s'adapte à chaque contexte. Si vous avez des visiteurs à guider, du contenu à partager ou des expériences à créer — cette solution est faite pour vous.",
-      item1Title: 'Musées & Galeries',
+      item1Title: 'Musées & Patrimoine',
-      item1Desc: "Digitalisez vos collections et créez des guides multimédias captivants pour vos expositions permanentes et temporaires.",
+      item1Desc: "Digitalisez vos collections, créez des parcours multimédias immersifs et offrez à chaque visiteur un guide intelligent dans sa langue.",
       item2Title: 'Offices de Tourisme',
-      item2Desc: "Guidez les visiteurs à travers votre ville ou région avec des cartes interactives et des points d'intérêt géo-localisés.",
+      item2Desc: "Guidez les visiteurs à travers votre ville ou région avec des cartes interactives, un agenda des événements et un assistant IA disponible 24h/24.",
-      item3Title: 'Hôtels & Loisirs',
+      item3Title: 'Parcs & Sites Naturels',
-      item3Desc: "Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.",
+      item3Desc: "Balisez vos sentiers, valorisez votre biodiversité et proposez des quiz et jeux de piste pour toute la famille — même en zone sans réseau.",
+      item4Title: 'Hôtels & Loisirs',
+      item4Desc: "Offrez à vos clients une expérience premium : services, activités, carte interactive du domaine et concierge virtuel disponible à toute heure.",
+      item5Title: 'Événementiel',
+      item5Desc: "Festivals, salons, foires : donnez à vos participants un plan interactif, un agenda en temps réel et un assistant pour ne rien manquer.",
+      item6Title: 'Éducation & Culture',
+      item6Desc: "Campus, centres de science, bibliothèques : guidez, informez et engagez votre public avec des contenus adaptés à chaque espace.",
     },
     cta: {
       titleBefore: 'Prêt à transformer votre ',
@@ -177,6 +183,38 @@ const translations = {
       messagePlaceholder: 'Parlez-nous de votre projet...',
       submitButton: 'Envoyer ma demande',
     },
+    pricing: {
+      sectionLabel: 'Tarifs',
+      sectionTitle: 'Un plan pour chaque lieu',
+      sectionDesc: "Tous nos plans incluent l'app mobile, le kiosk et le back-office. Abonnement mensuel. Frais de mise en place à l'activation.",
+      perMonth: '/mois',
+      htva: 'HTVA',
+      startingFrom: 'À partir de',
+      recommended: 'Recommandé',
+      ctaStart: 'Demander une démo',
+      ctaContact: 'Nous contacter',
+      enterprisePrice: 'Sur devis',
+      enterpriseDesc: 'Pour les organisations multi-sites ou aux besoins spécifiques (développements custom, accompagnement, SLA renforcé).',
+      multiYearLabel: 'Budget pluriannuel ?',
+      multiYearDesc: 'Nous proposons des engagements 2 ou 3 ans avec facturation annuelle et tarif préférentiel — idéal pour les financements sur plusieurs années.',
+      multiYearCta: 'Contactez-nous pour en discuter',
+      features: {
+        mobileApp: 'App mobile visiteurs',
+        kioskApp: 'App kiosk tablette',
+        backoffice: 'Back-office CMS',
+        sections: 'Toutes les sections de contenu',
+        storage: 'Stockage',
+        autoTranslation: 'Traduction automatique',
+        pushNotif: 'Notifications push',
+        stats: 'Stats de visite',
+        ai: 'Assistant IA visiteur',
+        reqPerMonth: 'req/mois',
+        statsBasic: '30 jours',
+        statsAdvanced: 'Illimitées',
+        custom: 'Sur mesure',
+        none: 'Non inclus',
+      },
+    },
     footer: {
       desc: "La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.",
       contactTitle: 'Contact',
@@ -327,14 +365,20 @@ const translations = {
       themeApplied: 'Theme Applied successfully',
     },
     audience: {
-      title: 'A solution designed for you',
+      title: 'Every venue that welcomes visitors',
-      subtitle: 'Whether you are a small gallery or a national monument, MyInfoMate adapts to your needs.',
+      subtitle: "MyInfoMate adapts to any context. If you have visitors to guide, content to share or experiences to create — this solution is made for you.",
-      item1Title: 'Museums & Galleries',
+      item1Title: 'Museums & Heritage',
-      item1Desc: 'Digitize your collections and create captivating multimedia guides for your permanent and temporary exhibitions.',
+      item1Desc: 'Digitize your collections, create immersive multimedia tours and offer every visitor an intelligent guide in their language.',
       item2Title: 'Tourism Offices',
-      item2Desc: 'Guide visitors through your city or region with interactive maps and geo-located points of interest.',
+      item2Desc: 'Guide visitors through your city or region with interactive maps, an event agenda and an AI assistant available 24/7.',
-      item3Title: 'Hotels & Leisure',
+      item3Title: 'Parks & Natural Sites',
-      item3Desc: 'Offer your clients a premium experience: services, activities, interactive venue map and personalized recommendations.',
+      item3Desc: 'Mark your trails, showcase your biodiversity and offer quizzes and treasure hunts for the whole family — even offline.',
+      item4Title: 'Hotels & Leisure',
+      item4Desc: 'Offer your guests a premium experience: services, activities, interactive map of the estate and a virtual concierge available at any time.',
+      item5Title: 'Events & Exhibitions',
+      item5Desc: 'Festivals, trade shows, fairs: give your attendees an interactive map, a real-time agenda and an assistant so they never miss a thing.',
+      item6Title: 'Education & Culture',
+      item6Desc: 'Campuses, science centers, libraries: guide, inform and engage your audience with content tailored to every space.',
     },
     cta: {
       titleBefore: 'Ready to transform your ',
@@ -362,6 +406,38 @@ const translations = {
       messagePlaceholder: 'Tell us about your project...',
       submitButton: 'Send my request',
     },
+    pricing: {
+      sectionLabel: 'Pricing',
+      sectionTitle: 'A plan for every venue',
+      sectionDesc: 'All plans include the mobile app, kiosk and back-office. Monthly subscription. Setup fee applies at activation.',
+      perMonth: '/month',
+      htva: 'excl. VAT',
+      startingFrom: 'Starting from',
+      recommended: 'Recommended',
+      ctaStart: 'Request a demo',
+      ctaContact: 'Contact us',
+      enterprisePrice: 'Custom quote',
+      enterpriseDesc: 'For multi-site organizations or specific needs (custom development, onboarding, enhanced SLA).',
+      multiYearLabel: 'Multi-year budget?',
+      multiYearDesc: 'We offer 2 or 3-year commitments with annual billing and preferential rates — ideal for multi-year funding cycles.',
+      multiYearCta: 'Contact us to discuss',
+      features: {
+        mobileApp: 'Visitor mobile app',
+        kioskApp: 'Kiosk tablet app',
+        backoffice: 'CMS back-office',
+        sections: 'All content sections',
+        storage: 'Storage',
+        autoTranslation: 'Automatic translation',
+        pushNotif: 'Push notifications',
+        stats: 'Visit statistics',
+        ai: 'AI visitor assistant',
+        reqPerMonth: 'req/month',
+        statsBasic: '30 days',
+        statsAdvanced: 'Unlimited',
+        custom: 'Custom',
+        none: 'Not included',
+      },
+    },
     footer: {
       desc: 'The SaaS solution for digitalizing your venues. Creativity and technology at the service of visitor experience.',
       contactTitle: 'Contact',
@@ -512,14 +588,20 @@ const translations = {
       themeApplied: 'Thema Succesvol Toegepast',
     },
     audience: {
-      title: 'Een oplossing ontworpen voor u',
+      title: 'Elke locatie die bezoekers verwelkomt',
-      subtitle: 'Of u nu een kleine galerie of een nationaal monument bent, MyInfoMate past zich aan uw behoeften aan.',
+      subtitle: "MyInfoMate past zich aan elke context aan. Als u bezoekers te begeleiden heeft, inhoud te delen of ervaringen te creëren — deze oplossing is voor u gemaakt.",
-      item1Title: 'Musea & Galerijen',
+      item1Title: 'Musea & Erfgoed',
-      item1Desc: 'Digitaliseer uw collecties en maak boeiende multimediale gidsen voor uw vaste en tijdelijke tentoonstellingen.',
+      item1Desc: 'Digitaliseer uw collecties, creëer meeslepende multimediale routes en bied elke bezoeker een intelligente gids in zijn taal.',
       item2Title: 'VVV-kantoren',
-      item2Desc: 'Begeleid bezoekers door uw stad of regio met interactieve kaarten en geogelokaliseerde bezienswaardigheden.',
+      item2Desc: 'Begeleid bezoekers door uw stad of regio met interactieve kaarten, een evenementenagenda en een AI-assistent die 24/7 beschikbaar is.',
-      item3Title: 'Hotels & Vrije Tijd',
+      item3Title: 'Parken & Natuurgebieden',
-      item3Desc: 'Bied uw klanten een premium ervaring: services, activiteiten, interactieve locatiekaart en gepersonaliseerde aanbevelingen.',
+      item3Desc: 'Markeer uw wandelpaden, toon uw biodiversiteit en bied quizzen en schattenjachten voor het hele gezin — ook offline.',
+      item4Title: 'Hotels & Vrije Tijd',
+      item4Desc: 'Bied uw gasten een premium ervaring: services, activiteiten, interactieve kaart van het domein en een virtuele conciërge op elk moment.',
+      item5Title: 'Evenementen & Beurzen',
+      item5Desc: 'Festivals, beurzen, markten: geef uw deelnemers een interactief plan, een realtime agenda en een assistent zodat ze niets missen.',
+      item6Title: 'Onderwijs & Cultuur',
+      item6Desc: 'Campussen, wetenschapscentra, bibliotheken: begeleid, informeer en betrek uw publiek met inhoud op maat van elke ruimte.',
     },
     cta: {
       titleBefore: 'Klaar om uw ',
@@ -547,6 +629,38 @@ const translations = {
       messagePlaceholder: 'Vertel ons over uw project...',
       submitButton: 'Mijn aanvraag verzenden',
     },
+    pricing: {
+      sectionLabel: 'Tarieven',
+      sectionTitle: 'Een plan voor elke locatie',
+      sectionDesc: 'Alle plannen bevatten de mobiele app, kiosk en back-office. Maandelijks abonnement. Opstartkosten bij activatie.',
+      perMonth: '/maand',
+      htva: 'excl. BTW',
+      startingFrom: 'Vanaf',
+      recommended: 'Aanbevolen',
+      ctaStart: 'Demo aanvragen',
+      ctaContact: 'Neem contact op',
+      enterprisePrice: 'Op maat',
+      enterpriseDesc: 'Voor organisaties met meerdere locaties of specifieke behoeften (maatwerk ontwikkeling, begeleiding, verbeterde SLA).',
+      multiYearLabel: 'Meerjarig budget?',
+      multiYearDesc: 'Wij bieden engagementen van 2 of 3 jaar met jaarlijkse facturatie en voordelig tarief — ideaal voor meerjarige financiering.',
+      multiYearCta: 'Neem contact op voor meer info',
+      features: {
+        mobileApp: 'Mobiele app bezoekers',
+        kioskApp: 'Kiosk tablet app',
+        backoffice: 'CMS back-office',
+        sections: 'Alle contentmodules',
+        storage: 'Opslag',
+        autoTranslation: 'Automatische vertaling',
+        pushNotif: 'Pushmeldingen',
+        stats: 'Bezoekstatistieken',
+        ai: 'AI-bezoekersassistent',
+        reqPerMonth: 'req/maand',
+        statsBasic: '30 dagen',
+        statsAdvanced: 'Onbeperkt',
+        custom: 'Op maat',
+        none: 'Niet inbegrepen',
+      },
+    },
     footer: {
       desc: 'De SaaS-oplossing voor de digitalisering van uw locaties. Creativiteit en technologie ten dienste van de bezoekerservaring.',
       contactTitle: 'Contact',
@@ -697,14 +811,20 @@ const translations = {
       themeApplied: 'Thema erfolgreich angewendet',
     },
     audience: {
-      title: 'Eine Lösung, die für Sie konzipiert wurde',
+      title: 'Jeder Ort, der Besucher empfängt',
-      subtitle: 'Ob kleine Galerie oder nationales Denkmal, MyInfoMate passt sich Ihren Bedürfnissen an.',
+      subtitle: "MyInfoMate passt sich jedem Kontext an. Wenn Sie Besucher zu führen, Inhalte zu teilen oder Erlebnisse zu schaffen haben — diese Lösung ist für Sie gemacht.",
-      item1Title: 'Museen & Galerien',
+      item1Title: 'Museen & Kulturerbe',
-      item1Desc: 'Digitalisieren Sie Ihre Sammlungen und erstellen Sie fesselnde Multimedia-Guides für Ihre Dauer- und Wechselausstellungen.',
+      item1Desc: 'Digitalisieren Sie Ihre Sammlungen, erstellen Sie immersive Multimedia-Touren und bieten Sie jedem Besucher einen intelligenten Führer in seiner Sprache.',
       item2Title: 'Tourismusbüros',
-      item2Desc: 'Führen Sie Besucher durch Ihre Stadt oder Region mit interaktiven Karten und geolokalisierten Sehenswürdigkeiten.',
+      item2Desc: 'Führen Sie Besucher durch Ihre Stadt oder Region mit interaktiven Karten, einer Veranstaltungsagenda und einem KI-Assistenten, der rund um die Uhr verfügbar ist.',
-      item3Title: 'Hotels & Freizeit',
+      item3Title: 'Parks & Naturgebiete',
-      item3Desc: 'Bieten Sie Ihren Kunden ein Premium-Erlebnis: Services, Aktivitäten, interaktive Standortkarte und personalisierte Empfehlungen.',
+      item3Desc: 'Markieren Sie Ihre Wanderwege, präsentieren Sie Ihre Biodiversität und bieten Sie Quizze und Schatzsuchen für die ganze Familie — auch offline.',
+      item4Title: 'Hotels & Freizeit',
+      item4Desc: 'Bieten Sie Ihren Gästen ein Premium-Erlebnis: Services, Aktivitäten, interaktive Karte des Geländes und einen virtuellen Concierge jederzeit.',
+      item5Title: 'Veranstaltungen & Messen',
+      item5Desc: 'Festivals, Messen, Märkte: geben Sie Ihren Teilnehmern einen interaktiven Plan, eine Echtzeit-Agenda und einen Assistenten, damit sie nichts verpassen.',
+      item6Title: 'Bildung & Kultur',
+      item6Desc: 'Campusse, Wissenschaftszentren, Bibliotheken: führen, informieren und begeistern Sie Ihr Publikum mit auf jeden Raum zugeschnittenen Inhalten.',
     },
     cta: {
       titleBefore: 'Bereit, Ihr ',
@@ -732,6 +852,38 @@ const translations = {
       messagePlaceholder: 'Erzählen Sie uns von Ihrem Projekt...',
       submitButton: 'Meine Anfrage senden',
     },
+    pricing: {
+      sectionLabel: 'Preise',
+      sectionTitle: 'Ein Plan für jeden Standort',
+      sectionDesc: 'Alle Pläne beinhalten die mobile App, den Kiosk und das Back-Office. Monatliches Abonnement. Einrichtungsgebühr bei Aktivierung.',
+      perMonth: '/Monat',
+      htva: 'zzgl. MwSt.',
+      startingFrom: 'Ab',
+      recommended: 'Empfohlen',
+      ctaStart: 'Demo anfordern',
+      ctaContact: 'Kontaktieren Sie uns',
+      enterprisePrice: 'Auf Anfrage',
+      enterpriseDesc: 'Für Organisationen mit mehreren Standorten oder spezifischen Anforderungen (individuelle Entwicklung, Begleitung, erweiterter SLA).',
+      multiYearLabel: 'Mehrjähriges Budget?',
+      multiYearDesc: 'Wir bieten 2- oder 3-jährige Engagements mit jährlicher Abrechnung und Vorzugspreisen — ideal für mehrjährige Finanzierungen.',
+      multiYearCta: 'Kontaktieren Sie uns',
+      features: {
+        mobileApp: 'Mobile Besucher-App',
+        kioskApp: 'Kiosk-Tablet-App',
+        backoffice: 'CMS Back-Office',
+        sections: 'Alle Inhaltsmodule',
+        storage: 'Speicher',
+        autoTranslation: 'Automatische Übersetzung',
+        pushNotif: 'Push-Benachrichtigungen',
+        stats: 'Besucherstatistiken',
+        ai: 'KI-Besucherassistent',
+        reqPerMonth: 'Req/Monat',
+        statsBasic: '30 Tage',
+        statsAdvanced: 'Unbegrenzt',
+        custom: 'Individuell',
+        none: 'Nicht enthalten',
+      },
+    },
     footer: {
       desc: 'Die SaaS-Lösung für die Digitalisierung Ihrer Standorte. Kreativität und Technologie im Dienst des Besuchererlebnisses.',
       contactTitle: 'Kontakt',