update pricing + clarification + update seo

README.md

@@ -26,6 +26,10 @@ docker push registry.unov.be/myinfomate/landing:latest
 docker pull registry.unov.be/myinfomate/landing:latest
 docker compose up -d myinfomate-landing
 ```
+```bash
+docker-compose -f docker-compose-landing.yml pull
+docker-compose -f docker-compose-landing.yml up -d
+```
 
 ### Config Traefik (docker-compose sur le VPS)
 

TODO-SEO.md

@@ -32,8 +32,8 @@
 
 ### Actions rapides (< 1h chacune)
 
-- [ ] **Google Search Console** — soumettre `https://myinfomate.be/sitemap.xml`, vérifier qu'il n'y a pas d'erreurs d'indexation
-- [ ] **Bing Webmaster Tools** — même chose (souvent oublié, représente ~10% du trafic desktop)
+- [x] **Google Search Console** — soumettre `https://myinfomate.be/sitemap.xml`, vérifier qu'il n'y a pas d'erreurs d'indexation
+- [x] **Bing Webmaster Tools** — même chose (souvent oublié, représente ~10% du trafic desktop)
 - [ ] **Lighthouse audit** — ouvrir Chrome DevTools sur myinfomate.be, onglet Lighthouse, mode Mobile → viser > 90. Les points rouges qui sortent sont à corriger en priorité.
 - [ ] **LinkedIn entreprise Unov** — si pas encore actif, créer la page et pointer vers myinfomate.be. Google valorise les signaux sociaux B2B.
 

package.json

@@ -13,6 +13,12 @@
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions"
+  ],
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",

src/app/[lang]/HomeClient.tsx

@@ -484,6 +484,10 @@ export default function Home({ lang }: { lang: Language }) {
                   </div>
                   <div className="mb-6">
                     <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Essentiel</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-100 text-slate-500 mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>language</span>
+                      {t.pricing.channelWeb}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-slate-900">€39</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -524,6 +528,10 @@ export default function Home({ lang }: { lang: Language }) {
                   </div>
                   <div className="mb-6">
                     <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Pro</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-slate-900">€99</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -567,7 +575,11 @@ export default function Home({ lang }: { lang: Language }) {
               <Reveal delay={120}>
                 <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">Bundle</p>
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Premium</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-white">€179</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -617,6 +629,10 @@ export default function Home({ lang }: { lang: Language }) {
                 <div className="flex flex-col h-full bg-gradient-to-br from-violet-950 to-slate-900 rounded-3xl p-8 shadow-xl border border-violet-800/40 relative">
                   <div className="mb-6">
                     <p className="text-sm font-bold text-violet-400 uppercase tracking-widest mb-2">Enterprise</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-violet-500/10 text-violet-400 mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-3xl font-extrabold text-white">{t.pricing.enterprisePrice}</span>
                     </div>

src/app/[lang]/[segment]/SegmentPageClient.tsx

@@ -399,7 +399,7 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
               <h3 className="text-3xl lg:text-4xl 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>
             </Reveal>
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 items-stretch pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 items-stretch pt-6">
 
               {/* Essentiel */}
               <Reveal delay={0}>
@@ -409,6 +409,10 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
                   </div>
                   <div className="mb-6">
                     <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Essentiel</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-100 text-slate-500 mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>language</span>
+                      {t.pricing.channelWeb}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-slate-900">€39</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -451,6 +455,10 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
                   </div>
                   <div className="mb-6">
                     <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Pro</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-slate-900">€99</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -492,11 +500,15 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
                 </div>
               </Reveal>
 
-              {/* Bundle */}
+              {/* Premium */}
               <Reveal delay={120}>
                 <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">Bundle</p>
+                    <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Premium</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
                     <div className="flex items-end gap-1">
                       <span className="text-4xl font-extrabold text-white">€179</span>
                       <span className="text-slate-400 mb-1">{t.pricing.perMonth}</span>
@@ -525,9 +537,12 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
                       <span className="material-symbols-outlined text-primary text-base shrink-0">check_circle</span>
                       {t.pricing.features.statsAdvancedFeature}
                     </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} — 2 000 {t.pricing.features.reqPerMonth}
+                    <li className="flex items-start gap-3 text-sm text-slate-300">
+                      <span className="material-symbols-outlined text-primary text-base shrink-0 mt-0.5">check_circle</span>
+                      <span>
+                        {t.pricing.features.ai} — 2 000 {t.pricing.features.reqPerMonth}
+                        <span className="block text-xs text-slate-500 mt-0.5">{t.pricing.features.aiNeedMore} → Enterprise</span>
+                      </span>
                     </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>
@@ -540,7 +555,80 @@ export default function SegmentPageClient({ data, lang }: { data: Segment; lang:
                 </div>
               </Reveal>
 
+              {/* Enterprise */}
+              <Reveal delay={180}>
+                <div className="flex flex-col h-full bg-gradient-to-br from-violet-950 to-slate-900 rounded-3xl p-8 shadow-xl border border-violet-800/40 relative">
+                  <div className="mb-6">
+                    <p className="text-sm font-bold text-violet-400 uppercase tracking-widest mb-2">Enterprise</p>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full bg-violet-500/10 text-violet-400 mb-3">
+                      <span className="material-symbols-outlined" style={{fontSize: '14px'}}>smartphone</span>
+                      {t.pricing.channelNative}
+                    </span>
+                    <div className="flex items-end gap-1">
+                      <span className="text-3xl font-extrabold text-white">{t.pricing.enterprisePrice}</span>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">{t.pricing.enterpriseDesc}</p>
+                  </div>
+                  <ul className="space-y-3 flex-1 mb-8">
+                    {[
+                      t.pricing.features.webAndKiosk,
+                      t.pricing.features.nativeApp,
+                      t.pricing.features.backoffice,
+                      t.pricing.features.sections,
+                      t.pricing.features.multiSite,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-300">
+                        <span className="material-symbols-outlined text-violet-400 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-violet-400 text-base shrink-0">check_circle</span>
+                      {t.pricing.features.customStorage}
+                    </li>
+                    <li className="flex items-center gap-3 text-sm text-slate-300">
+                      <span className="material-symbols-outlined text-violet-400 text-base shrink-0">check_circle</span>
+                      {t.pricing.features.customAiQuota}
+                    </li>
+                    {[
+                      t.pricing.features.statsAdvancedFeature,
+                      t.pricing.features.offlineBeacons,
+                      t.pricing.features.pushNotif,
+                      t.pricing.features.autoTranslation,
+                      t.pricing.features.slaEnhanced,
+                      t.pricing.features.dedicatedSupport,
+                      t.pricing.features.customDev,
+                    ].map((f) => (
+                      <li key={f} className="flex items-center gap-3 text-sm text-slate-300">
+                        <span className="material-symbols-outlined text-violet-400 text-base shrink-0">check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                  <button onClick={scrollToContact} className="w-full py-3 rounded-2xl bg-violet-600 text-white font-bold text-sm hover:bg-violet-500 transition-all shadow-lg shadow-violet-900/40">
+                    {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>
 

src/data/translations.ts

@@ -197,7 +197,7 @@ const translations = {
     pricing: {
       sectionLabel: 'Tarifs',
       sectionTitle: 'Un plan pour chaque lieu',
-      sectionDesc: "Du simple affichage web à la solution complète. Abonnement mensuel.",
+      sectionDesc: "Interface web incluse dans tous les plans. Ajoutez une app mobile à votre nom pour aller plus loin.",
       setupFeeNote: "Frais de mise en place + engagement 12 mois (app mobile).",
       noCommitment: "Sans engagement.",
       perMonth: '/mois',
@@ -212,6 +212,8 @@ const translations = {
       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',
+      channelWeb: 'Mode Web',
+      channelNative: 'Web + App native',
       features: {
         mobileApp: 'App mobile visiteurs',
         kioskApp: 'App kiosk tablette',
@@ -226,8 +228,8 @@ const translations = {
         statsBasic: '30 jours',
         statsAdvanced: 'Illimitées',
         webDisplayUrl: 'Affichage web sur URL dédiée',
-        webAndKiosk: 'Display web + kiosk tablette',
-        nativeApp: 'App mobile white-label publiée sur les stores (iOS & Android)',
+        webAndKiosk: 'Interface visiteur web + mode kiosk',
+        nativeApp: 'Votre propre app mobile sur l\'App Store & Google Play',
         offlineBeacons: 'Offline + beacons BLE',
         statsBasicLabel: 'Visiteurs / jour',
         statsAdvancedLabel: 'Parcours, temps, clics',
@@ -456,7 +458,7 @@ const translations = {
     pricing: {
       sectionLabel: 'Pricing',
       sectionTitle: 'A plan for every venue',
-      sectionDesc: 'From simple web display to the full solution. Monthly subscription.',
+      sectionDesc: 'Web interface included in every plan. Add a branded mobile app to go further.',
       setupFeeNote: 'Setup fee + 12-month commitment (mobile app).',
       noCommitment: 'No commitment.',
       perMonth: '/month',
@@ -471,6 +473,8 @@ const translations = {
       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',
+      channelWeb: 'Web mode',
+      channelNative: 'Web + Native app',
       features: {
         mobileApp: 'Visitor mobile app',
         kioskApp: 'Kiosk tablet app',
@@ -485,8 +489,8 @@ const translations = {
         statsBasic: '30 days',
         statsAdvanced: 'Unlimited',
         webDisplayUrl: 'Web display on dedicated URL',
-        webAndKiosk: 'Web display + tablet kiosk',
-        nativeApp: 'White-label mobile app published on stores (iOS & Android)',
+        webAndKiosk: 'Visitor web interface + kiosk mode',
+        nativeApp: 'Your own mobile app on App Store & Google Play',
         offlineBeacons: 'Offline + BLE beacons',
         statsBasicLabel: 'Visitors / day',
         statsAdvancedLabel: 'Paths, time, clicks',
@@ -715,7 +719,7 @@ const translations = {
     pricing: {
       sectionLabel: 'Tarieven',
       sectionTitle: 'Een plan voor elke locatie',
-      sectionDesc: 'Van eenvoudige webweergave tot de volledige oplossing. Maandelijks abonnement.',
+      sectionDesc: 'Webinterface inbegrepen in elk plan. Voeg een app op uw naam toe om verder te gaan.',
       setupFeeNote: 'Opstartkosten + 12 maanden engagement (mobiele app).',
       noCommitment: 'Zonder engagement.',
       perMonth: '/maand',
@@ -730,6 +734,8 @@ const translations = {
       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',
+      channelWeb: 'Webmodus',
+      channelNative: 'Web + Eigen app',
       features: {
         mobileApp: 'Mobiele app bezoekers',
         kioskApp: 'Kiosk tablet app',
@@ -744,8 +750,8 @@ const translations = {
         statsBasic: '30 dagen',
         statsAdvanced: 'Onbeperkt',
         webDisplayUrl: 'Webweergave op toegewijd URL',
-        webAndKiosk: 'Webweergave + tablet kiosk',
-        nativeApp: 'White-label mobiele app gepubliceerd in de stores (iOS & Android)',
+        webAndKiosk: 'Webinterface bezoekers + kioskmodus',
+        nativeApp: 'Uw eigen mobiele app op App Store & Google Play',
         offlineBeacons: 'Offline + BLE-bakens',
         statsBasicLabel: 'Bezoekers / dag',
         statsAdvancedLabel: 'Trajecten, tijd, klikken',
@@ -974,7 +980,7 @@ const translations = {
     pricing: {
       sectionLabel: 'Preise',
       sectionTitle: 'Ein Plan für jeden Standort',
-      sectionDesc: 'Von der einfachen Web-Anzeige bis zur Komplettlösung. Monatliches Abonnement.',
+      sectionDesc: 'Web-Oberfläche in jedem Plan enthalten. Fügen Sie eine gebrandete App hinzu, um mehr zu erreichen.',
       setupFeeNote: 'Einrichtungsgebühr + 12 Monate Mindestlaufzeit (mobile App).',
       noCommitment: 'Ohne Verpflichtung.',
       perMonth: '/Monat',
@@ -989,6 +995,8 @@ const translations = {
       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',
+      channelWeb: 'Web-Modus',
+      channelNative: 'Web + Native App',
       features: {
         mobileApp: 'Mobile Besucher-App',
         kioskApp: 'Kiosk-Tablet-App',
@@ -1003,8 +1011,8 @@ const translations = {
         statsBasic: '30 Tage',
         statsAdvanced: 'Unbegrenzt',
         webDisplayUrl: 'Web-Anzeige auf dedizierter URL',
-        webAndKiosk: 'Web-Anzeige + Tablet-Kiosk',
-        nativeApp: 'White-Label-Mobile-App in den Stores veröffentlicht (iOS & Android)',
+        webAndKiosk: 'Web-Besucheroberfläche + Kioskmodus',
+        nativeApp: 'Ihre eigene mobile App im App Store & Google Play',
         offlineBeacons: 'Offline + BLE-Beacons',
         statsBasicLabel: 'Besucher / Tag',
         statsAdvancedLabel: 'Wege, Zeit, Klicks',