-
-
-
-
-
- {t.nav.login}
-
-
- {/* Language selector - desktop */}
-
-
-
- {isLangOpen && (
-
-
-
- {LANGUAGES.map((l) => (
-
- ))}
-
- )}
- setIsMenuOpen(false)}
- />
-
- {/* Mobile Menu Sidebar */}
-
-
+
- {/* Close Button Header */}
-
-
-
-
-
-
-
{/* Hero Section */}
@@ -327,19 +33,17 @@ export default function Home({ lang }: { lang: Language }) {
{t.hero.subtitle}
-
+
- {/* UI Mockup Group - Improved for Mobile */}
@@ -379,7 +79,6 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Interactive Map Tablet Preview */}
{t.mockup.mapSubtitle}
-
- {/* Agenda Mobile Preview - Hidden or repositioned on very small screens */}
-
-
- {/* Tours Mobile Preview */}
-
{t.strategic.sectionTitle}
- {/* Feature 1 */}
- {/* Feature 2 */}
- {/* Feature 3 */}
- {/* Feature 4 */}
sync
@@ -389,7 +88,6 @@ export default function Home({ lang }: { lang: Language }) {
{t.strategic.feature1Desc}
code_off
@@ -399,7 +97,6 @@ export default function Home({ lang }: { lang: Language }) {
{t.strategic.feature2Desc}
download_for_offline
@@ -409,7 +106,6 @@ export default function Home({ lang }: { lang: Language }) {
{t.strategic.feature3Desc}
dashboard_customize
@@ -423,18 +119,15 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Deployment Modes Section */}
+ {/* Deployment Modes */}
{t.deployment.sectionLabel}
{t.deployment.sectionTitle}
-- {t.deployment.sectionDesc} -
+{t.deployment.sectionDesc}
- {/* Mode 1: Mobile BYOD */}
smartphone
@@ -442,7 +135,6 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Mode 2: Kiosk Tablet */}
{t.deployment.mode1Title}
{t.deployment.mode1Desc}
tablet_android
@@ -450,7 +142,6 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Mode 3: Web App */}
{t.deployment.mode2Title}
{t.deployment.mode2Desc}
language
@@ -458,9 +149,8 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Mode 4: Future VR/AR */}
{t.deployment.mode3Title}
{t.deployment.mode3Desc}
-
+
-
+ {/* Module Explorer */}
+
@@ -665,12 +185,11 @@ export default function Home({ lang }: { lang: Language }) {
{t.deployment.comingSoon}
@@ -473,178 +163,8 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Interactive Modules Section (Module Explorer) */}
-
-
-
-
-
- {t.modules.sectionLabel}
-{t.modules.sectionTitle}
-- {t.modules.sectionDesc} -
-
- {/* Sidebar (Tabs) */}
-
-
-
-
-
- {/* Main Display */}
-
-
- {/* Mobile: single centered card */}
-
-
-
- {modules.map((module, index) => (
-
- ))}
-
-
-
-
- {/* Desktop: original layout + enobase-style 3D phone stack */}
-
-
-
- {modules[activeModule].icon}
- {modules[activeModule].title}
-
- {modules[activeModule].title}
-{modules[activeModule].description}
-
-
- - verified - {modules[activeModule].value} -
-
-
-
-
-
-
-
-
-
-
-
-
- {modules[activeModule].icon}
-
- {modules[activeModule].title}
-
-
-
- {modules[activeModule].icon}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Description */}
-
-
-
-
-
- {/* Enobase-style 3D horizontal perspective phone stack */}
-
- {modules[activeModule].icon}
- {modules[activeModule].title}
-
- {modules[activeModule].title}
-{modules[activeModule].description}
-
-
- - verified - {t.modules.valueLabel} {modules[activeModule].value} -
-
-
-
- {modules.map((module, index) => {
- const deckPos = (index - activeModule + modules.length) % modules.length;
- const isActive = deckPos === 0;
- return (
-
-
-
- );
- })}
-
-
-
-
-
-
-
-
-
-
- {module.icon}
-
- {module.title}
-
-
-
- {module.icon}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t.ai.desc}
- {/* Chat mockup */}
- {/* Features grid */}
+
+
+ {/* Pricing */}
@@ -908,10 +476,7 @@ export default function Home({ lang }: { lang: Language }) {
-
- smart_toy
+ smart_toy
{t.ai.mockupName}
@@ -681,37 +200,30 @@ export default function Home({ lang }: { lang: Language }) {
- smart_toy
-
-
- {t.ai.mockupMsg1}
+ smart_toy
+ {t.ai.mockupMsg1}
-
- {t.ai.mockupMsg2}
-
+ {t.ai.mockupMsg2}
- smart_toy
-
-
- {t.ai.mockupMsg3}
+ smart_toy
+ {t.ai.mockupMsg3}
{t.ai.mockupInputPlaceholder}
- send
+ send
@@ -746,7 +258,7 @@ export default function Home({ lang }: { lang: Language }) {
- {/* White Label / Value Proposition */}
+ {/* White Label */}
@@ -898,7 +410,63 @@ export default function Home({ lang }: { lang: Language }) {
- {/* Pricing Section */}
+ {/* Cas Clients - Social Proof */}
+
+
+
+
+
+
+
+
+
+
+ {t.casClients.ctaAll}
+ arrow_forward
+
+
+
+ {t.casClients.sectionLabel}
+{t.casClients.title}
+{t.casClients.subtitle}
+
+ {casClients.map((client, i) => {
+ const ct = client.translations[lang];
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ {ct.badge}
+
+ {client.year}
+
+ + {client.client} +
++ {ct.description} +
+ + {t.casClients.readCase} + arrow_forward + + +{t.pricing.sectionDesc}
-
- {/* Essentiel */}
-
-
+
-
@@ -1139,19 +695,17 @@ export default function Home({ lang }: { lang: Language }) {
+
{
+ const { lang, slug } = await params;
+ if (!isLocale(lang)) return {};
+ const data = getCasClientData(slug);
+ if (!data) return {};
+ const m = data.meta[lang];
+ const languages = Object.fromEntries(
+ LOCALES.map((l) => [LOCALE_HTML_LANG[l], `/${l}/cas-clients/${slug}`])
+ );
+ return {
+ title: m.title,
+ description: m.description,
+ openGraph: {
+ title: m.title,
+ description: m.description,
+ url: `${SITE_URL}/${lang}/cas-clients/${slug}`,
+ siteName: 'MyInfoMate',
+ locale: LOCALE_OG[lang],
+ type: 'website',
+ },
+ alternates: {
+ canonical: `/${lang}/cas-clients/${slug}`,
+ languages: { ...languages, 'x-default': `/${DEFAULT_LOCALE}/cas-clients/${slug}` },
+ },
+ };
+}
+
+export default async function CasClientPage({
+ params,
+}: {
+ params: Promise<{ lang: string; slug: string }>;
+}) {
+ const { lang, slug } = await params;
+ if (!isLocale(lang)) notFound();
+ const data = getCasClientData(slug);
+ if (!data) notFound();
+
+ const t = data.translations[lang];
+
+ const caseStudySchema = {
+ '@context': 'https://schema.org',
+ '@type': 'Article',
+ headline: t.headline,
+ description: t.description,
+ author: { '@type': 'Organization', name: 'Unov', url: SITE_URL },
+ publisher: { '@type': 'Organization', name: 'MyInfoMate', url: SITE_URL },
+ datePublished: `${data.year}-01-01`,
+ url: `${SITE_URL}/${lang}/cas-clients/${slug}`,
+ };
+
+ return (
+ <>
+
+
+
+ {/* Nav */}
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/[lang]/cas-clients/page.tsx b/src/app/[lang]/cas-clients/page.tsx
new file mode 100644
index 0000000..e62cb03
--- /dev/null
+++ b/src/app/[lang]/cas-clients/page.tsx
@@ -0,0 +1,212 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { LOCALES, LOCALE_HTML_LANG, LOCALE_OG, DEFAULT_LOCALE, isLocale } from '@/i18n';
+import { getAllCasClients } from '@/data/cas-clients';
+
+const SITE_URL = 'https://myinfomate.be';
+
+const META_BY_LOCALE: Record = {
+ fr: {
+ title: 'Cas clients MyInfoMate — Musées, offices de tourisme & patrimoine',
+ description: 'Découvrez comment des lieux culturels belges utilisent MyInfoMate : Musée de la Fraise, Fort de Saint-Héribert, Visit Namur. App mobile, kiosk, offline.',
+ },
+ en: {
+ title: 'MyInfoMate Case Studies — Museums, tourism offices & heritage',
+ description: 'See how Belgian cultural venues use MyInfoMate: Musée de la Fraise, Fort de Saint-Héribert, Visit Namur. Mobile app, kiosk, offline.',
+ },
+ nl: {
+ title: "MyInfoMate Klantcases — Musea, toerismekantoren & erfgoed",
+ description: 'Ontdek hoe Belgische culturele locaties MyInfoMate gebruiken: Musée de la Fraise, Fort de Saint-Héribert, Visit Namur. Mobiele app, kiosk, offline.',
+ },
+ de: {
+ title: 'MyInfoMate Referenzen — Museen, Tourismusbüros & Kulturerbe',
+ description: 'Erfahren Sie, wie belgische Kulturstätten MyInfoMate nutzen: Musée de la Fraise, Fort de Saint-Héribert, Visit Namur. Mobile App, Kiosk, Offline.',
+ },
+};
+
+const HEADING_BY_LOCALE: Record = {
+ fr: {
+ badge: 'Cas clients',
+ h1: 'Ils ont choisi MyInfoMate',
+ subtitle: 'Musées, offices de tourisme, sites patrimoniaux — des lieux réels, des défis concrets, des résultats mesurables.',
+ },
+ en: {
+ badge: 'Case studies',
+ h1: 'They chose MyInfoMate',
+ subtitle: 'Museums, tourism offices, heritage sites — real venues, concrete challenges, measurable results.',
+ },
+ nl: {
+ badge: 'Klantcases',
+ h1: 'Zij kozen voor MyInfoMate',
+ subtitle: "Musea, toerismekantoren, erfgoedsites — echte locaties, concrete uitdagingen, meetbare resultaten.",
+ },
+ de: {
+ badge: 'Referenzen',
+ h1: 'Sie haben sich für MyInfoMate entschieden',
+ subtitle: 'Museen, Tourismusbüros, Kulturstätten — echte Orte, konkrete Herausforderungen, messbare Ergebnisse.',
+ },
+};
+
+const BACK_BY_LOCALE: Record = {
+ fr: "Retour à l'accueil",
+ en: 'Back to home',
+ nl: 'Terug naar home',
+ de: 'Zurück zur Startseite',
+};
+
+export function generateStaticParams() {
+ return LOCALES.map((lang) => ({ lang }));
+}
+
+export async function generateMetadata({
+ params,
+}: {
+ params: Promise<{ lang: string }>;
+}): Promise {
+ const { lang } = await params;
+ if (!isLocale(lang)) return {};
+ const m = META_BY_LOCALE[lang];
+ const languages = Object.fromEntries(LOCALES.map((l) => [LOCALE_HTML_LANG[l], `/${l}/cas-clients`]));
+ return {
+ title: m.title,
+ description: m.description,
+ openGraph: {
+ title: m.title,
+ description: m.description,
+ url: `${SITE_URL}/${lang}/cas-clients`,
+ siteName: 'MyInfoMate',
+ locale: LOCALE_OG[lang],
+ type: 'website',
+ },
+ alternates: {
+ canonical: `/${lang}/cas-clients`,
+ languages: { ...languages, 'x-default': `/${DEFAULT_LOCALE}/cas-clients` },
+ },
+ };
+}
+
+const SECTOR_LABEL_BY_LOCALE: Record> = {
+ fr: { musees: 'Musée', 'parcs-naturels': 'Patrimoine', 'offices-tourisme': 'Office de Tourisme' },
+ en: { musees: 'Museum', 'parcs-naturels': 'Heritage', 'offices-tourisme': 'Tourism Office' },
+ nl: { musees: 'Museum', 'parcs-naturels': 'Erfgoed', 'offices-tourisme': 'Toeristenbureau' },
+ de: { musees: 'Museum', 'parcs-naturels': 'Kulturerbe', 'offices-tourisme': 'Tourismusbüro' },
+};
+
+export default async function CasClientsListPage({
+ params,
+}: {
+ params: Promise<{ lang: string }>;
+}) {
+ const { lang } = await params;
+ if (!isLocale(lang)) notFound();
+
+ const clients = getAllCasClients();
+ const h = HEADING_BY_LOCALE[lang];
+ const back = BACK_BY_LOCALE[lang];
+ const sectorLabels = SECTOR_LABEL_BY_LOCALE[lang];
+
+ return (
+
+ {/* Nav */}
+
+
+
+
+
+ );
+}
diff --git a/src/app/[lang]/opengraph-image.tsx b/src/app/[lang]/opengraph-image.tsx
new file mode 100644
index 0000000..64733fa
--- /dev/null
+++ b/src/app/[lang]/opengraph-image.tsx
@@ -0,0 +1,172 @@
+import { ImageResponse } from 'next/og';
+import { isLocale } from '@/i18n';
+
+export const runtime = 'edge';
+export const alt = 'MyInfoMate — Digital visitor app for museums, parks & venues';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+const TAGLINES: Record = {
+ fr: 'Guide visiteur digital pour musées, parcs & événements',
+ en: 'Digital visitor guide for museums, parks & events',
+ nl: 'Digitale bezoekersgids voor musea, parken & evenementen',
+ de: 'Digitaler Besucherguide für Museen, Parks & Events',
+};
+
+const FEATURES: Record = {
+ fr: ['Carte interactive', 'Audioguide', 'Quiz & Escape', 'Assistant IA'],
+ en: ['Interactive map', 'Audio guide', 'Quiz & Escape', 'AI assistant'],
+ nl: ['Interactieve kaart', 'Audiogids', 'Quiz & Escape', 'AI-assistent'],
+ de: ['Interaktive Karte', 'Audioguide', 'Quiz & Escape', 'KI-Assistent'],
+};
+
+export default function Image({ params }: { params: { lang: string } }) {
+ const lang = isLocale(params.lang) ? params.lang : 'fr';
+ const tagline = TAGLINES[lang];
+ const features = FEATURES[lang];
+
+ return new ImageResponse(
+ (
+ = {
fr: {
- 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.",
+ title: "MyInfoMate — Application guide visiteur pour musées & lieux",
+ description: "Créez votre app guide visiteur sans code. Cartes interactives, audioguide, quiz, escape game et assistant IA pour musées, parcs et offices de tourisme. Dès €39/mois.",
},
en: {
- title: "MyInfoMate | Technology serving the visitor experience",
- description: "The SaaS solution to digitalize your visitor experience. Creativity and technology at the service of the visitor experience.",
+ title: "MyInfoMate — Digital Visitor App for Museums & Venues",
+ description: "Build your visitor guide app with no code. Interactive maps, audio guides, quizzes, escape game and AI assistant for museums, parks and tourism offices. From €39/month.",
},
nl: {
- title: "MyInfoMate | Technologie ten dienste van de bezoekerservaring",
- description: "De SaaS-oplossing om uw bezoekerservaring te digitaliseren. Creativiteit en technologie ten dienste van de bezoekerservaring.",
+ title: "MyInfoMate — Digitale bezoekersgids voor musea & locaties",
+ description: "Maak uw bezoekersgids-app zonder code. Interactieve kaarten, audiogids, quiz, escape game en AI-assistent voor musea, parken en toerismekantoren. Vanaf €39/maand.",
},
de: {
- title: "MyInfoMate | Technologie im Dienste des Besuchererlebnisses",
- description: "Die SaaS-Lösung zur Digitalisierung Ihres Besuchererlebnisses. Kreativität und Technologie im Dienste des Besuchererlebnisses.",
+ title: "MyInfoMate — Digitaler Besucherguide für Museen & Orte",
+ description: "Erstellen Sie Ihre Besucher-App ohne Code. Interaktive Karten, Audioguide, Quiz, Escape Game und KI-Assistent für Museen, Parks und Tourismusbüros. Ab €39/Monat.",
},
};
@@ -50,7 +50,6 @@ export async function generateMetadata({
locale: LOCALE_OG[lang],
alternateLocale: LOCALES.filter((l) => l !== lang).map((l) => LOCALE_OG[l]),
type: 'website',
- images: [{ url: '/myinfomate-logo.png' }],
},
twitter: {
card: 'summary_large_image',
@@ -67,5 +66,58 @@ export async function generateMetadata({
export default async function HomePage({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params;
if (!isLocale(lang)) notFound();
- return = {
fr: {
- 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.",
+ title: "MyInfoMate — Application guide visiteur pour musées & lieux",
+ description: "Créez votre app guide visiteur sans code. Cartes interactives, audioguide, quiz, escape game et assistant IA pour musées, parcs et offices de tourisme. Dès €39/mois.",
},
en: {
- title: "MyInfoMate | Technology serving the visitor experience",
- description: "The SaaS solution to digitalize your visitor experience. Creativity and technology at the service of the visitor experience.",
+ title: "MyInfoMate — Digital Visitor App for Museums & Venues",
+ description: "Build your visitor guide app with no code. Interactive maps, audio guides, quizzes, escape game and AI assistant for museums, parks and tourism offices. From €39/month.",
},
nl: {
- title: "MyInfoMate | Technologie ten dienste van de bezoekerservaring",
- description: "De SaaS-oplossing om uw bezoekerservaring te digitaliseren. Creativiteit en technologie ten dienste van de bezoekerservaring.",
+ title: "MyInfoMate — Digitale bezoekersgids voor musea & locaties",
+ description: "Maak uw bezoekersgids-app zonder code. Interactieve kaarten, audiogids, quiz, escape game en AI-assistent voor musea, parken en toerismekantoren. Vanaf €39/maand.",
},
de: {
- title: "MyInfoMate | Technologie im Dienste des Besuchererlebnisses",
- description: "Die SaaS-Lösung zur Digitalisierung Ihres Besuchererlebnisses. Kreativität und Technologie im Dienste des Besuchererlebnisses.",
+ title: "MyInfoMate — Digitaler Besucherguide für Museen & Orte",
+ description: "Erstellen Sie Ihre Besucher-App ohne Code. Interaktive Karten, Audioguide, Quiz, Escape Game und KI-Assistent für Museen, Parks und Tourismusbüros. Ab €39/Monat.",
},
};
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index d26d14c..8353527 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,6 +1,7 @@
import { MetadataRoute } from "next";
import { LOCALES, LOCALE_HTML_LANG, DEFAULT_LOCALE } from "@/i18n";
import { getAllSegmentSlugs } from "@/data/segments";
+import { getAllCasClientSlugs } from "@/data/cas-clients";
const SITE_URL = "https://myinfomate.be";
@@ -39,6 +40,28 @@ export default function sitemap(): MetadataRoute.Sitemap {
}
}
+ for (const lang of LOCALES) {
+ entries.push({
+ url: `${SITE_URL}/${lang}/cas-clients`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.8,
+ alternates: { languages: alternates((l) => `/${l}/cas-clients`) },
+ });
+ }
+
+ for (const slug of getAllCasClientSlugs()) {
+ for (const lang of LOCALES) {
+ entries.push({
+ url: `${SITE_URL}/${lang}/cas-clients/${slug}`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.75,
+ alternates: { languages: alternates((l) => `/${l}/cas-clients/${slug}`) },
+ });
+ }
+ }
+
entries.push(
{
url: `${SITE_URL}/mentions-legales`,
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
new file mode 100644
index 0000000..2625542
--- /dev/null
+++ b/src/components/ContactForm.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+import translations, { Language } from '@/data/translations';
+
+export default function ContactForm({ lang }: { lang: Language }) {
+ const t = translations[lang].contact;
+ const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', message: '' });
+ const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({ ...prev, [name]: value }));
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setStatus('loading');
+ try {
+ const response = await fetch('https://formspree.io/f/xbdaajlo', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+ body: JSON.stringify(formData),
+ });
+ if (response.ok) {
+ setStatus('success');
+ setFormData({ firstName: '', lastName: '', email: '', message: '' });
+ } else {
+ setStatus('error');
+ }
+ } catch {
+ setStatus('error');
+ }
+ };
+
+ if (status === 'success') {
+ return (
+
+
+ );
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..ed50a4c
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { resolveImage } from '@/data/stitch-images';
+import translations, { Language } from '@/data/translations';
+
+const LANGUAGES: { code: Language; label: string; name: string }[] = [
+ { code: 'fr', label: 'FR', name: 'Français' },
+ { code: 'en', label: 'EN', name: 'English' },
+ { code: 'nl', label: 'NL', name: 'Nederlands' },
+ { code: 'de', label: 'DE', name: 'Deutsch' },
+];
+
+export default function NavBar({ lang }: { lang: Language }) {
+ const router = useRouter();
+ const t = translations[lang];
+
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isLangOpen, setIsLangOpen] = useState(false);
+ const [navVisible, setNavVisible] = useState(true);
+ const langDropdownRef = useRef(null);
+ const lastScrollY = useRef(0);
+
+ const setLang = (next: Language) => {
+ if (next !== lang) router.push(`/${next}`);
+ };
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const currentY = window.scrollY;
+ setNavVisible(currentY < lastScrollY.current || currentY < 10);
+ lastScrollY.current = currentY;
+ };
+ window.addEventListener('scroll', handleScroll, { passive: true });
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ useEffect(() => {
+ document.body.style.overflow = isMenuOpen ? 'hidden' : 'auto';
+ return () => { document.body.style.overflow = 'auto'; };
+ }, [isMenuOpen]);
+
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (langDropdownRef.current && !langDropdownRef.current.contains(e.target as Node)) {
+ setIsLangOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
+ }, []);
+
+ return (
+ <>
+
+
+
+ {/* Mobile Menu Backdrop */}
+
@@ -947,13 +512,11 @@ export default function Home({ lang }: { lang: Language }) {
))}
-
+
-
- {/* Pro */}
@@ -996,13 +559,11 @@ export default function Home({ lang }: { lang: Language }) {
))}
-
+
-
- {/* Bundle */}
@@ -1047,13 +608,11 @@ export default function Home({ lang }: { lang: Language }) {
{t.pricing.features.autoTranslation}
-
+
-
- {/* Enterprise */}
@@ -1099,14 +658,12 @@ export default function Home({ lang }: { lang: Language }) {
))}
-
+
-
@@ -1116,15 +673,14 @@ export default function Home({ lang }: { lang: Language }) {
{t.pricing.multiYearDesc}
{t.cta.titleBefore}{t.cta.titleHighlight}{t.cta.titleAfter}
-- {t.cta.subtitle} -
+{t.cta.subtitle}
-
+
{t.cta.button2}
@@ -1164,7 +718,6 @@ export default function Home({ lang }: { lang: Language }) {
-
@@ -1280,9 +746,7 @@ export default function Home({ lang }: { lang: Language }) {
/>
MyInfoMate
-
@@ -1172,94 +725,7 @@ export default function Home({ lang }: { lang: Language }) {
-
- {status === 'success' ? (
- {t.contact.title}
{t.contact.subtitle}
-
- ) : (
-
- )}
+
- task_alt
-
- {t.contact.successTitle}
-{t.contact.successDesc}
- -- {t.footer.desc} -
+{t.footer.desc}
- {/*
- Produit
+{t.footer.casClientsLink}
-
-
- Fonctionnalités -
- Marque Blanche -
- CMS Centralisé -
- Tarifs -
- {/*
+
+ {c.client}
+
+
+ ))}
+
+
+ {t.casClients.ctaAll} →
+
+
+
Entreprise
--
-
- À propos -
- Blog -
- Partenaires -
- Contact -
{t.footer.contactTitle}
diff --git a/src/app/[lang]/[segment]/opengraph-image.tsx b/src/app/[lang]/[segment]/opengraph-image.tsx new file mode 100644 index 0000000..ac1442a --- /dev/null +++ b/src/app/[lang]/[segment]/opengraph-image.tsx @@ -0,0 +1,143 @@ +import { ImageResponse } from 'next/og'; +import { isLocale } from '@/i18n'; +import { getSegmentData } from '@/data/segments'; + +export const runtime = 'edge'; +export const size = { width: 1200, height: 630 }; +export const contentType = 'image/png'; + +export default function Image({ params }: { params: { lang: string; segment: string } }) { + const lang = isLocale(params.lang) ? params.lang : 'fr'; + const data = getSegmentData(params.segment); + const badge = data?.translations[lang].hero.badge ?? 'MyInfoMate'; + const title = data?.meta[lang].title ?? 'MyInfoMate'; + const description = data?.meta[lang].description ?? ''; + + return new ImageResponse( + ( +
+ {/* Cyan glow top-left */}
+
+ {/* Purple glow bottom-right */}
+
+
+ {/* Content */}
+
+ ),
+ { ...size }
+ );
+}
diff --git a/src/app/[lang]/cas-clients/[slug]/page.tsx b/src/app/[lang]/cas-clients/[slug]/page.tsx
new file mode 100644
index 0000000..aab6552
--- /dev/null
+++ b/src/app/[lang]/cas-clients/[slug]/page.tsx
@@ -0,0 +1,200 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { LOCALES, LOCALE_HTML_LANG, LOCALE_OG, DEFAULT_LOCALE, isLocale } from '@/i18n';
+import { getCasClientData, getAllCasClientSlugs } from '@/data/cas-clients';
+
+const SITE_URL = 'https://myinfomate.be';
+
+export function generateStaticParams() {
+ const slugs = getAllCasClientSlugs();
+ return LOCALES.flatMap((lang) => slugs.map((slug) => ({ lang, slug })));
+}
+
+export async function generateMetadata({
+ params,
+}: {
+ params: Promise<{ lang: string; slug: string }>;
+}): Promise
+ {/* Segment badge */}
+
+
+ {/* Bottom URL */}
+
+
+
+ {badge}
+
+
+
+ {/* Product name */}
+
+ MyInfoMate
+
+
+ {/* Page title */}
+
+ {title.replace(' | MyInfoMate', '').replace(' — MyInfoMate', '')}
+
+
+ myinfomate.be
+
+
+ {/* Hero */}
+
+
+
+
+ {/* Challenge */}
+
+
+
+ {/* Solution */}
+
+
+
+ {/* Results */}
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+ {t.badge}
+
+ {data.year} · {data.location}
+
+ {data.client}
++ {t.headline} +
+{t.description}
+ + {/* Key stats */} +
+ {t.results.items.map((r) => (
+
+
+ {r.value}
+ {r.label}
+
+ ))}
+
+
+ {t.challenge.label}
+{t.challenge.title}
+
+ {t.challenge.items.map((item, i) => (
+
+
+
+ ))}
+
+ priority_high
+
+ {item}
+
+
+ {t.solution.label}
+{t.solution.title}
+{t.solution.description}
+
+ {t.solution.tags.map((tag) => (
+
+ check_circle
+ {tag}
+
+ ))}
+
+
+
+
+
+
+
+ {t.results.label}
+{t.results.title}
+
+ {t.results.items.map((r) => (
+
+
+
+ ))}
+ {r.value}
+ {r.label}
+
+
+ {t.cta.title}
+ +
+ {/* Hero */}
+
+
+
+ {/* Case studies grid */}
+
+
+
+ {/* Footer CTA */}
+
+
+
+
+
+
+
+ {h.badge}
+
+ + {h.h1} +
+{h.subtitle}
+
+
+
+ {clients.map((client) => {
+ const t = client.translations[lang];
+ const sector = sectorLabels[client.segmentSlug] ?? client.segmentSlug;
+ return (
+
+
+
+
+
+
+ {sector}
+
+ {client.year} · {client.location}
+
+ + {client.client} +
+{t.description}
+
+ {t.solution.tags.slice(0, 4).map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ );
+ })}
+
+ {t.results.items.map((r) => (
+
+
+ Lire le cas
+ arrow_forward
+
+
+
+ ))}
+ {r.value}
+ {r.label}
+
+
+ + {lang === 'fr' ? 'Votre lieu sera le prochain ?' : + lang === 'en' ? 'Will your venue be next?' : + lang === 'nl' ? 'Is uw locatie de volgende?' : + 'Wird Ihr Ort der nächste sein?'} +
+ + {lang === 'fr' ? 'Demander une démo gratuite' : + lang === 'en' ? 'Request a free demo' : + lang === 'nl' ? 'Gratis demo aanvragen' : + 'Kostenlose Demo anfordern'} + arrow_forward + +
+ {/* Cyan glow top-left */}
+
+ {/* Purple glow bottom-right */}
+
+
+ {/* Content */}
+
+ ),
+ { ...size }
+ );
+}
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index ca4ef64..5c91455 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -7,20 +7,20 @@ const SITE_URL = 'https://myinfomate.be';
const META_BY_LOCALE: Record
+ {/* Badge */}
+
+
+ {/* Bottom URL */}
+
+
+
+ SaaS · No-code · White Label
+
+
+
+ {/* Product name */}
+
+ MyInfoMate
+
+
+ {/* Tagline */}
+
+ {tagline}
+
+
+ {/* Feature pills */}
+
+ {features.map((f) => (
+
+
+ {f}
+
+ ))}
+
+ myinfomate.be
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/ModulesSection.tsx b/src/components/ModulesSection.tsx
new file mode 100644
index 0000000..0c5acf7
--- /dev/null
+++ b/src/components/ModulesSection.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import { useState } from 'react';
+import translations, { Language } from '@/data/translations';
+import Reveal from '@/components/Reveal';
+
+const MODULE_META = [
+ { id: 'map', icon: 'map' },
+ { id: 'quiz', icon: 'sports_esports' },
+ { id: 'video', icon: 'videocam' },
+ { id: 'article', icon: 'article' },
+ { id: 'agenda', icon: 'calendar_month' },
+ { id: 'offline', icon: 'download_for_offline' },
+ { id: 'web', icon: 'public' },
+ { id: 'stats', icon: 'monitoring' },
+ { id: 'escapegame', icon: 'explore' },
+];
+
+export default function ModulesSection({ lang }: { lang: Language }) {
+ const [activeModule, setActiveModule] = useState(0);
+ const t = translations[lang];
+
+ const modules = MODULE_META.map((meta, i) => ({
+ ...meta,
+ title: t.modules.items[i].title,
+ description: t.modules.items[i].description,
+ value: t.modules.items[i].value,
+ }));
+
+ return (
+
+ task_alt
+
+ {t.successTitle}
+{t.successDesc}
+ +
+
+
+
+
+ {t.modules.sectionLabel}
+{t.modules.sectionTitle}
+{t.modules.sectionDesc}
+
+ {/* Sidebar (Tabs) */}
+
+
+
+
+
+ {/* Main Display */}
+
+ {/* Mobile: single centered card */}
+
+
+
+ {modules.map((module, index) => (
+
+ ))}
+
+
+
+
+ {/* Desktop: 3D phone stack */}
+
+
+
+ {modules[activeModule].icon}
+ {modules[activeModule].title}
+
+ {modules[activeModule].title}
+{modules[activeModule].description}
+
+
+ + verified + {modules[activeModule].value} +
+
+
+
+
+
+
+
+
+
+
+
+
+ {modules[activeModule].icon}
+
+ {modules[activeModule].title}
+
+
+
+ {modules[activeModule].icon}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {modules[activeModule].icon}
+ {modules[activeModule].title}
+
+ {modules[activeModule].title}
+{modules[activeModule].description}
+
+
+ + verified + {t.modules.valueLabel} {modules[activeModule].value} +
+
+
+
+ {modules.map((module, index) => {
+ const deckPos = (index - activeModule + modules.length) % modules.length;
+ const isActive = deckPos === 0;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+ {module.icon}
+
+ {module.title}
+
+
+
+ {module.icon}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t.nav.login}
+
+
+ {t.nav.demo}
+
+
+
+
+ {isLangOpen && (
+
+
+
+ {LANGUAGES.map((l) => (
+
+ ))}
+
+ )}
+ setIsMenuOpen(false)}
+ />
+
+ {/* Mobile Menu Sidebar */}
+ (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 (
+ ;
+ translations: Record;
+}
+
+// ─── Musée de la Fraise ──────────────────────────────────────────────────────
+
+const museeDelaFraise: CasClient = {
+ slug: 'musee-de-la-fraise',
+ client: 'Musée de la Fraise de Wépion',
+ year: 2021,
+ location: 'Wépion, Belgique',
+ segmentSlug: 'musees',
+ meta: {
+ fr: {
+ title: 'Musée de la Fraise — Premier client MyInfoMate | Kiosk & App Mobile',
+ description: 'Découvrez comment le Musée de la Fraise de Wépion a digitalisé son expérience visiteur avec MyInfoMate : kiosk tablette no-code dès 2021, puis extension mobile.',
+ },
+ en: {
+ title: 'Musée de la Fraise — First MyInfoMate Client | Kiosk & Mobile App',
+ description: 'See how the Musée de la Fraise de Wépion digitalized its visitor experience with MyInfoMate: no-code tablet kiosk from 2021, then mobile extension.',
+ },
+ nl: {
+ title: 'Musée de la Fraise — Eerste MyInfoMate-klant | Kiosk & Mobiele App',
+ description: 'Ontdek hoe het Musée de la Fraise de Wépion zijn bezoekerservaring digitaliseerde met MyInfoMate: no-code tablet kiosk vanaf 2021, daarna mobiele uitbreiding.',
+ },
+ de: {
+ title: 'Musée de la Fraise — Erster MyInfoMate-Kunde | Kiosk & Mobile App',
+ description: 'Erfahren Sie, wie das Musée de la Fraise de Wépion sein Besuchererlebnis mit MyInfoMate digitalisierte: No-Code-Tablet-Kiosk ab 2021, dann mobile Erweiterung.',
+ },
+ },
+ translations: {
+ fr: {
+ backLabel: "Retour à l'accueil",
+ badge: 'Musée & Culture',
+ headline: 'De la vitrine au numérique : la naissance de MyInfoMate',
+ description: "Premier client MyInfoMate — solution kiosk tablette avec CMS no-code dès novembre 2021, puis extension vers une application mobile pour le musée et le jardin de petits fruits.",
+ challenge: {
+ label: 'Le contexte',
+ title: 'Un musée riche en histoire, pauvre en outils digitaux',
+ items: [
+ "Collections riches mais expérience visiteur uniquement papier et vitrines statiques",
+ "Équipe du musée sans compétences techniques pour créer du contenu digital",
+ "Budget limité : besoin d'une solution autonome, simple et pérenne",
+ "Extension vers le jardin de petits fruits : un deuxième parcours à créer en outdoor",
+ ],
+ },
+ solution: {
+ label: 'La solution',
+ title: 'Kiosk tablette no-code, puis application mobile',
+ description: "Déploiement en mode kiosk tablette en novembre 2021 — le premier déploiement de MyInfoMate. L'équipe du musée gère le contenu en totale autonomie via le CMS no-code : textes, images, vidéos, sans aucune intervention externe. Extension progressive vers une application mobile visiteurs couvrant le musée et le jardin de petits fruits.",
+ tags: ['Kiosk tablette', 'App mobile visiteurs', 'CMS no-code', 'Parcours outdoor', 'White label', 'Zéro développement'],
+ },
+ results: {
+ label: 'Résultats',
+ title: "Un musée autonome, une solution qui a évolué avec eux",
+ items: [
+ { value: '2021', label: 'Premier déploiement' },
+ { value: 'Kiosk + Mobile', label: 'Double déploiement' },
+ { value: '100%', label: 'Autonomie éditoriale' },
+ ],
+ },
+ cta: {
+ title: 'Vous avez un musée ou un lieu culturel ?',
+ button1: 'Demander une démo gratuite',
+ button2: 'Voir la solution musées',
+ },
+ },
+ en: {
+ backLabel: 'Back to home',
+ badge: 'Museum & Culture',
+ headline: 'From display cases to digital: the birth of MyInfoMate',
+ description: 'First MyInfoMate client — no-code tablet kiosk solution from November 2021, then extended to a mobile app for the museum and the fruit garden.',
+ challenge: {
+ label: 'Context',
+ title: 'A history-rich museum, digitally underequipped',
+ items: [
+ 'Rich collections but visitor experience limited to paper and static displays',
+ 'Museum team with no technical skills to create digital content',
+ 'Limited budget: need for an autonomous, simple and sustainable solution',
+ 'Extension to the fruit garden: a second outdoor trail to create',
+ ],
+ },
+ solution: {
+ label: 'Solution',
+ title: 'No-code tablet kiosk, then mobile app',
+ description: 'Tablet kiosk deployment in November 2021 — the very first MyInfoMate deployment. The museum team manages content autonomously via the no-code CMS: texts, images, videos, with no external intervention. Progressive extension to a visitor mobile app covering the museum and the fruit garden.',
+ tags: ['Tablet kiosk', 'Visitor mobile app', 'No-code CMS', 'Outdoor trail', 'White label', 'Zero development'],
+ },
+ results: {
+ label: 'Results',
+ title: 'An autonomous museum, a solution that grew with them',
+ items: [
+ { value: '2021', label: 'First deployment' },
+ { value: 'Kiosk + Mobile', label: 'Dual deployment' },
+ { value: '100%', label: 'Editorial autonomy' },
+ ],
+ },
+ cta: {
+ title: 'Do you manage a museum or cultural venue?',
+ button1: 'Request a free demo',
+ button2: 'See the museum solution',
+ },
+ },
+ nl: {
+ backLabel: 'Terug naar home',
+ badge: 'Museum & Cultuur',
+ headline: 'Van vitrine naar digitaal: de geboorte van MyInfoMate',
+ description: 'Eerste MyInfoMate-klant — no-code tablet kiosk-oplossing vanaf november 2021, daarna uitgebreid met een mobiele app voor het museum en de fruittuin.',
+ challenge: {
+ label: 'Context',
+ title: 'Een historisch rijk museum, digitaal onderbenut',
+ items: [
+ 'Rijke collecties maar bezoekerservaring beperkt tot papier en statische vitrines',
+ 'Museumteam zonder technische kennis om digitale content te maken',
+ 'Beperkt budget: behoefte aan een autonome, eenvoudige en duurzame oplossing',
+ 'Uitbreiding naar de fruittuin: een tweede outdoor parcours',
+ ],
+ },
+ solution: {
+ label: 'Oplossing',
+ title: 'No-code tablet kiosk, daarna mobiele app',
+ description: 'Tablet kiosk-implementatie in november 2021 — de allereerste MyInfoMate-implementatie. Het museumteam beheert de inhoud volledig autonoom via het no-code CMS. Progressieve uitbreiding naar een bezoekers-app voor het museum en de fruittuin.',
+ tags: ['Tablet kiosk', 'Bezoekers mobiele app', 'No-code CMS', 'Outdoor parcours', 'White label', 'Geen ontwikkeling'],
+ },
+ results: {
+ label: 'Resultaten',
+ title: 'Een autonoom museum, een oplossing die met hen meegroeit',
+ items: [
+ { value: '2021', label: 'Eerste implementatie' },
+ { value: 'Kiosk + Mobiel', label: 'Dubbele implementatie' },
+ { value: '100%', label: 'Redactionele autonomie' },
+ ],
+ },
+ cta: {
+ title: 'Beheert u een museum of culturele locatie?',
+ button1: 'Gratis demo aanvragen',
+ button2: 'Bekijk de museum-oplossing',
+ },
+ },
+ de: {
+ backLabel: 'Zurück zur Startseite',
+ badge: 'Museum & Kultur',
+ headline: 'Von der Vitrine zur Digitalisierung: die Geburt von MyInfoMate',
+ description: 'Erster MyInfoMate-Kunde — No-Code-Tablet-Kiosk-Lösung ab November 2021, dann Erweiterung auf eine mobile App für das Museum und den Obstgarten.',
+ challenge: {
+ label: 'Kontext',
+ title: 'Ein geschichtsreiches Museum, digital unterausgestattet',
+ items: [
+ 'Reiche Sammlungen, aber Besuchererlebnis auf Papier und statische Vitrinen beschränkt',
+ 'Museumsteam ohne technische Kenntnisse zur Erstellung digitaler Inhalte',
+ 'Begrenztes Budget: Bedarf an einer autonomen, einfachen und nachhaltigen Lösung',
+ 'Erweiterung auf den Obstgarten: ein zweiter Outdoor-Parcours',
+ ],
+ },
+ solution: {
+ label: 'Lösung',
+ title: 'No-Code-Tablet-Kiosk, dann mobile App',
+ description: 'Tablet-Kiosk-Einsatz im November 2021 — die allererste MyInfoMate-Implementierung. Das Museumsteam verwaltet Inhalte vollständig autonom über das No-Code-CMS. Schrittweise Erweiterung auf eine Besucher-App für Museum und Obstgarten.',
+ tags: ['Tablet-Kiosk', 'Mobile Besucher-App', 'No-Code-CMS', 'Outdoor-Parcours', 'White Label', 'Null Entwicklung'],
+ },
+ results: {
+ label: 'Ergebnisse',
+ title: 'Ein autonomes Museum, eine Lösung die mit ihnen wächst',
+ items: [
+ { value: '2021', label: 'Erste Implementierung' },
+ { value: 'Kiosk + Mobil', label: 'Doppelte Implementierung' },
+ { value: '100%', label: 'Redaktionelle Autonomie' },
+ ],
+ },
+ cta: {
+ title: 'Verwalten Sie ein Museum oder eine Kulturstätte?',
+ button1: 'Kostenlose Demo anfordern',
+ button2: 'Museum-Lösung entdecken',
+ },
+ },
+ },
+};
+
+// ─── Fort de Saint-Héribert ──────────────────────────────────────────────────
+
+const fortDeSaintHeribert: CasClient = {
+ slug: 'fort-de-saint-heribert',
+ client: 'Fort de Saint-Héribert',
+ year: 2023,
+ location: 'Belgique',
+ segmentSlug: 'parcs-naturels',
+ meta: {
+ fr: {
+ title: 'Fort de Saint-Héribert — Application mobile offline | MyInfoMate',
+ description: "Découvrez comment MyInfoMate a équipé le Fort de Saint-Héribert d'une app mobile 100% offline avec balises iBeacon et codes QR — sans Wi-Fi dans les galeries.",
+ },
+ en: {
+ title: 'Fort de Saint-Héribert — Offline Mobile App | MyInfoMate',
+ description: 'See how MyInfoMate equipped Fort de Saint-Héribert with a 100% offline mobile app using iBeacon beacons and QR codes — no Wi-Fi needed in the galleries.',
+ },
+ nl: {
+ title: 'Fort de Saint-Héribert — Offline Mobiele App | MyInfoMate',
+ description: 'Ontdek hoe MyInfoMate het Fort de Saint-Héribert uitrustte met een 100% offline mobiele app met iBeacon-bakens en QR-codes — geen Wi-Fi nodig.',
+ },
+ de: {
+ title: 'Fort de Saint-Héribert — Offline Mobile App | MyInfoMate',
+ description: 'Erfahren Sie, wie MyInfoMate Fort de Saint-Héribert mit einer 100% Offline-App mit iBeacon-Beacons und QR-Codes ausgestattet hat — kein WLAN nötig.',
+ },
+ },
+ translations: {
+ fr: {
+ backLabel: "Retour à l'accueil",
+ badge: 'Patrimoine & Tourisme',
+ headline: 'Un fort historique souterrain, connecté sans réseau',
+ description: "Application mobile iOS + Android en mode 100% offline sur un site patrimonial unique : balises iBeacon pour la localisation dans les galeries souterraines, codes QR et audioguide, sans Wi-Fi.",
+ challenge: {
+ label: 'Le contexte',
+ title: 'Un site souterrain impossible à connecter',
+ items: [
+ "Galeries souterraines : impossible de déployer du Wi-Fi dans l'ensemble du fort",
+ "Visiteurs équipés de smartphones, sans expérience digitale proposée jusqu'alors",
+ "Contenu riche (audio, images, textes, historique) à diffuser en autonomie",
+ "Localisation des visiteurs dans les galeries sans GPS",
+ ],
+ },
+ solution: {
+ label: 'La solution',
+ title: 'Application mobile 100% offline avec iBeacon',
+ description: "Déploiement d'une application mobile iOS + Android en mode offline complet. Le contenu est téléchargé à l'entrée du fort. Des balises iBeacon positionnées stratégiquement dans les galeries détectent la position du visiteur en temps réel et déclenchent l'affichage des contenus correspondants. Les codes QR permettent un accès alternatif instantané à chaque point d'intérêt.",
+ tags: ['App mobile iOS & Android', 'Mode offline 100%', 'Balises iBeacon', 'Codes QR', 'Audioguide', 'Localisation intérieure'],
+ },
+ results: {
+ label: 'Résultats',
+ title: 'Une expérience immersive, partout dans le fort',
+ items: [
+ { value: '100%', label: 'Disponibilité hors réseau' },
+ { value: '2023', label: 'Mise en production' },
+ { value: 'iOS + Android', label: 'Plateformes couvertes' },
+ ],
+ },
+ cta: {
+ title: 'Vous avez un site sans connexion fiable ?',
+ button1: 'Demander une démo gratuite',
+ button2: 'Voir la solution parcs & patrimoine',
+ },
+ },
+ en: {
+ backLabel: 'Back to home',
+ badge: 'Heritage & Tourism',
+ headline: 'A historic underground fort, connected without network',
+ description: 'iOS + Android mobile app in 100% offline mode on a unique heritage site: iBeacon beacons for location in underground galleries, QR codes and audio guide — no Wi-Fi.',
+ challenge: {
+ label: 'Context',
+ title: 'An underground site impossible to connect',
+ items: [
+ "Underground galleries: impossible to deploy Wi-Fi throughout the fort",
+ "Visitors with smartphones, with no digital experience previously offered",
+ "Rich content (audio, images, texts, history) to distribute autonomously",
+ "Locating visitors in the galleries without GPS",
+ ],
+ },
+ solution: {
+ label: 'Solution',
+ title: '100% offline mobile app with iBeacon',
+ description: 'Deployment of an iOS + Android mobile app in full offline mode. Content is downloaded at the fort entrance. Strategically placed iBeacon beacons in the galleries detect visitor position in real time and trigger the display of corresponding content. QR codes provide instant alternative access to each point of interest.',
+ tags: ['iOS & Android mobile app', '100% offline mode', 'iBeacon beacons', 'QR codes', 'Audio guide', 'Indoor location'],
+ },
+ results: {
+ label: 'Results',
+ title: 'An immersive experience, everywhere in the fort',
+ items: [
+ { value: '100%', label: 'Offline availability' },
+ { value: '2023', label: 'Production launch' },
+ { value: 'iOS + Android', label: 'Platforms covered' },
+ ],
+ },
+ cta: {
+ title: 'Do you have a site without reliable connectivity?',
+ button1: 'Request a free demo',
+ button2: 'See the parks & heritage solution',
+ },
+ },
+ nl: {
+ backLabel: 'Terug naar home',
+ badge: 'Erfgoed & Toerisme',
+ headline: 'Een historisch ondergronds fort, verbonden zonder netwerk',
+ description: 'iOS + Android mobiele app in 100% offline modus op een unieke erfgoedsite: iBeacon-bakens voor locatie in ondergrondse galerijen, QR-codes en audiogids — geen Wi-Fi.',
+ challenge: {
+ label: 'Context',
+ title: 'Een ondergrondse site die onmogelijk te verbinden is',
+ items: [
+ 'Ondergrondse galerijen: onmogelijk om Wi-Fi door het hele fort te installeren',
+ 'Bezoekers met smartphones, zonder eerder digitaal aanbod',
+ 'Rijke inhoud (audio, afbeeldingen, teksten, geschiedenis) autonoom verspreiden',
+ 'Bezoekers lokaliseren in de galerijen zonder GPS',
+ ],
+ },
+ solution: {
+ label: 'Oplossing',
+ title: '100% offline mobiele app met iBeacon',
+ description: 'Implementatie van een iOS + Android mobiele app in volledig offline modus. Inhoud wordt gedownload bij de ingang van het fort. Strategisch geplaatste iBeacon-bakens in de galerijen detecteren de positie van de bezoeker in realtime.',
+ tags: ['iOS & Android mobiele app', '100% offline modus', 'iBeacon-bakens', 'QR-codes', 'Audiogids', 'Indoor locatie'],
+ },
+ results: {
+ label: 'Resultaten',
+ title: 'Een meeslepende ervaring, overal in het fort',
+ items: [
+ { value: '100%', label: 'Offline beschikbaarheid' },
+ { value: '2023', label: 'Productielancering' },
+ { value: 'iOS + Android', label: 'Gedekte platformen' },
+ ],
+ },
+ cta: {
+ title: 'Heeft u een site zonder betrouwbare verbinding?',
+ button1: 'Gratis demo aanvragen',
+ button2: 'Bekijk de parken & erfgoed-oplossing',
+ },
+ },
+ de: {
+ backLabel: 'Zurück zur Startseite',
+ badge: 'Kulturerbe & Tourismus',
+ headline: 'Ein historisches unterirdisches Fort, ohne Netz verbunden',
+ description: 'iOS + Android Mobile App im 100% Offline-Modus an einer einzigartigen Kulturstätte: iBeacon-Beacons zur Ortung in unterirdischen Galerien, QR-Codes und Audioguide — kein WLAN.',
+ challenge: {
+ label: 'Kontext',
+ title: 'Eine unterirdische Stätte, die unmöglich zu verbinden ist',
+ items: [
+ 'Unterirdische Galerien: unmöglich, überall im Fort WLAN einzurichten',
+ 'Besucher mit Smartphones, bisher ohne digitales Angebot',
+ 'Reichhaltige Inhalte (Audio, Bilder, Texte, Geschichte) autonom verteilen',
+ 'Besucher in den Galerien ohne GPS orten',
+ ],
+ },
+ solution: {
+ label: 'Lösung',
+ title: '100% Offline Mobile App mit iBeacon',
+ description: 'Einsatz einer iOS + Android Mobile App im vollständigen Offline-Modus. Inhalte werden am Fort-Eingang heruntergeladen. Strategisch platzierte iBeacon-Beacons in den Galerien erkennen die Besucherposition in Echtzeit.',
+ tags: ['iOS & Android Mobile App', '100% Offline-Modus', 'iBeacon-Beacons', 'QR-Codes', 'Audioguide', 'Indoor-Ortung'],
+ },
+ results: {
+ label: 'Ergebnisse',
+ title: 'Ein immersives Erlebnis überall im Fort',
+ items: [
+ { value: '100%', label: 'Offline-Verfügbarkeit' },
+ { value: '2023', label: 'Produktionsstart' },
+ { value: 'iOS + Android', label: 'Abgedeckte Plattformen' },
+ ],
+ },
+ cta: {
+ title: 'Haben Sie eine Stätte ohne zuverlässige Verbindung?',
+ button1: 'Kostenlose Demo anfordern',
+ button2: 'Parks & Kulturerbe-Lösung entdecken',
+ },
+ },
+ },
+};
+
+// ─── Visit Namur ─────────────────────────────────────────────────────────────
+
+const visitNamur: CasClient = {
+ slug: 'visit-namur',
+ client: 'Visit Namur',
+ year: 2024,
+ location: 'Namur, Belgique',
+ segmentSlug: 'offices-tourisme',
+ meta: {
+ fr: {
+ title: 'Visit Namur — Borne tactile XXL touristique | MyInfoMate',
+ description: "Découvrez comment l'Office du Tourisme de Namur a déployé une borne tactile interactive XXL MyInfoMate pour guider les visiteurs avec une carte, un agenda et des itinéraires.",
+ },
+ en: {
+ title: 'Visit Namur — XXL Interactive Tourist Kiosk | MyInfoMate',
+ description: "See how the Namur Tourist Office deployed a MyInfoMate XXL interactive tablet kiosk to guide visitors with a map, agenda and itineraries.",
+ },
+ nl: {
+ title: 'Visit Namur — XXL Interactieve Toeristische Kiosk | MyInfoMate',
+ description: "Ontdek hoe het Toeristenbureau van Namen een MyInfoMate XXL interactieve tablet-kiosk inzette om bezoekers te begeleiden met een kaart, agenda en routes.",
+ },
+ de: {
+ title: 'Visit Namur — XXL Interaktiver Tourismus-Kiosk | MyInfoMate',
+ description: "Erfahren Sie, wie das Tourismusbüro Namur einen XXL interaktiven MyInfoMate-Tablet-Kiosk einsetzte, um Besucher mit Karte, Agenda und Routen zu führen.",
+ },
+ },
+ translations: {
+ fr: {
+ backLabel: "Retour à l'accueil",
+ badge: 'Office de Tourisme',
+ headline: 'Namur offre un accueil touristique digital et interactif',
+ description: "Déploiement d'une borne tactile interactive XXL MyInfoMate dans l'Office du Tourisme de Namur : carte interactive de la ville, points d'intérêt géolocalisés, agenda des événements et planification d'itinéraires.",
+ challenge: {
+ label: 'Le contexte',
+ title: "Un accueil touristique en attente de modernisation",
+ items: [
+ "Accueil basé sur supports papier, brochures et conseils oraux des agents",
+ "Touristes cherchant une exploration autonome et interactive de la ville",
+ "Besoin de mettre en avant les points d'intérêt, restaurants et événements de Namur",
+ "Mise à jour du contenu sans dépendance à une agence externe",
+ ],
+ },
+ solution: {
+ label: 'La solution',
+ title: 'Borne tactile XXL avec carte interactive et agenda',
+ description: "Déploiement d'une grande tablette XXL en mode kiosk dans l'Office du Tourisme. La carte interactive de Namur présente les points d'intérêt géolocalisés, les itinéraires suggérés et l'agenda des événements en temps réel. L'équipe de l'office gère le contenu en autonomie via le CMS MyInfoMate, sans intervention externe.",
+ tags: ['Kiosk tablette XXL', 'Carte interactive', "Points d'intérêt", 'Agenda événements', 'Planification itinéraires', 'CMS no-code'],
+ },
+ results: {
+ label: 'Résultats',
+ title: "Une expérience d'accueil moderne pour les touristes namurois",
+ items: [
+ { value: 'Namur', label: 'Ville couverte' },
+ { value: '1 borne XXL', label: 'Mode de déploiement' },
+ { value: 'Temps réel', label: 'Mise à jour contenu' },
+ ],
+ },
+ cta: {
+ title: 'Vous gérez un office de tourisme ?',
+ button1: 'Demander une démo gratuite',
+ button2: 'Voir la solution offices de tourisme',
+ },
+ },
+ en: {
+ backLabel: 'Back to home',
+ badge: 'Tourism Office',
+ headline: 'Namur offers digital and interactive tourist reception',
+ description: 'MyInfoMate XXL tablet kiosk deployment at the Namur Tourist Office: interactive city map, geolocated points of interest, events agenda and itinerary planning.',
+ challenge: {
+ label: 'Context',
+ title: 'A tourist reception awaiting modernization',
+ items: [
+ 'Reception based on paper materials, brochures and verbal advice from agents',
+ 'Tourists seeking autonomous and interactive city exploration',
+ 'Need to highlight Namur\'s points of interest, restaurants and events',
+ 'Content updates without dependency on an external agency',
+ ],
+ },
+ solution: {
+ label: 'Solution',
+ title: 'XXL tablet kiosk with interactive map and agenda',
+ description: 'Deployment of a large XXL tablet kiosk at the Tourist Office. The interactive map of Namur displays geolocated points of interest, suggested itineraries and real-time events agenda. The office team manages content autonomously via the MyInfoMate CMS.',
+ tags: ['XXL tablet kiosk', 'Interactive map', 'Points of interest', 'Events agenda', 'Itinerary planning', 'No-code CMS'],
+ },
+ results: {
+ label: 'Results',
+ title: 'A modern welcome experience for Namur tourists',
+ items: [
+ { value: 'Namur', label: 'City covered' },
+ { value: '1 XXL kiosk', label: 'Deployment mode' },
+ { value: 'Real-time', label: 'Content updates' },
+ ],
+ },
+ cta: {
+ title: 'Do you manage a tourism office?',
+ button1: 'Request a free demo',
+ button2: 'See the tourism office solution',
+ },
+ },
+ nl: {
+ backLabel: 'Terug naar home',
+ badge: 'Toeristenbureau',
+ headline: 'Namen biedt digitale en interactieve toeristische ontvangst',
+ description: 'MyInfoMate XXL tablet kiosk-implementatie bij het Toeristenbureau van Namen: interactieve stadskaart, geogelokaliseerde bezienswaardigheden, evenementenagenda en routeplanning.',
+ challenge: {
+ label: 'Context',
+ title: 'Een toeristische ontvangst die modernisering verwacht',
+ items: [
+ 'Ontvangst gebaseerd op papieren materialen, brochures en mondeling advies',
+ 'Toeristen die op zoek zijn naar autonome en interactieve stadsverkenning',
+ 'Behoefte om de bezienswaardigheden, restaurants en evenementen van Namen te promoten',
+ 'Inhoud bijwerken zonder afhankelijkheid van een extern bureau',
+ ],
+ },
+ solution: {
+ label: 'Oplossing',
+ title: 'XXL tablet-kiosk met interactieve kaart en agenda',
+ description: 'Implementatie van een grote XXL tablet-kiosk bij het Toeristenbureau. De interactieve kaart van Namen toont geogelokaliseerde bezienswaardigheden, voorgestelde routes en realtime evenementenagenda. Het team beheert inhoud autonoom via MyInfoMate CMS.',
+ tags: ['XXL tablet kiosk', 'Interactieve kaart', 'Bezienswaardigheden', 'Evenementenagenda', 'Routeplanning', 'No-code CMS'],
+ },
+ results: {
+ label: 'Resultaten',
+ title: 'Een moderne ontvangstervaring voor toeristen in Namen',
+ items: [
+ { value: 'Namen', label: 'Stad gedekt' },
+ { value: '1 XXL kiosk', label: 'Implementatiemodus' },
+ { value: 'Realtime', label: 'Inhoud bijwerken' },
+ ],
+ },
+ cta: {
+ title: 'Beheert u een toeristenbureau?',
+ button1: 'Gratis demo aanvragen',
+ button2: 'Bekijk de toerisme-oplossing',
+ },
+ },
+ de: {
+ backLabel: 'Zurück zur Startseite',
+ badge: 'Tourismusbüro',
+ headline: 'Namur bietet digitalen und interaktiven Tourismusempfang',
+ description: 'MyInfoMate XXL Tablet-Kiosk-Einsatz im Tourismusbüro Namur: interaktive Stadtkarte, geolokalisierte Sehenswürdigkeiten, Veranstaltungsagenda und Routenplanung.',
+ challenge: {
+ label: 'Kontext',
+ title: 'Ein Tourismusempfang wartet auf Modernisierung',
+ items: [
+ 'Empfang basierend auf Papiermaterial, Broschüren und mündlichen Ratschlägen',
+ 'Touristen suchen eine autonome und interaktive Stadterkundung',
+ 'Bedarf, Sehenswürdigkeiten, Restaurants und Veranstaltungen von Namur hervorzuheben',
+ 'Inhaltsaktualisierungen ohne Abhängigkeit von einer externen Agentur',
+ ],
+ },
+ solution: {
+ label: 'Lösung',
+ title: 'XXL Tablet-Kiosk mit interaktiver Karte und Agenda',
+ description: 'Einsatz eines großen XXL Tablet-Kiosks im Tourismusbüro. Die interaktive Karte von Namur zeigt geolokalisierte Sehenswürdigkeiten, vorgeschlagene Routen und Echtzeit-Veranstaltungsagenda. Das Team verwaltet Inhalte autonom über MyInfoMate CMS.',
+ tags: ['XXL Tablet-Kiosk', 'Interaktive Karte', 'Sehenswürdigkeiten', 'Veranstaltungsagenda', 'Routenplanung', 'No-Code-CMS'],
+ },
+ results: {
+ label: 'Ergebnisse',
+ title: 'Ein modernes Empfangserlebnis für Namur-Touristen',
+ items: [
+ { value: 'Namur', label: 'Abgedeckte Stadt' },
+ { value: '1 XXL-Kiosk', label: 'Implementierungsmodus' },
+ { value: 'Echtzeit', label: 'Inhaltsaktualisierungen' },
+ ],
+ },
+ cta: {
+ title: 'Verwalten Sie ein Tourismusbüro?',
+ button1: 'Kostenlose Demo anfordern',
+ button2: 'Tourismusbüro-Lösung entdecken',
+ },
+ },
+ },
+};
+
+// ─── Exports ───────────────────────────────────────────────────────────────��─
+
+const casClients: CasClient[] = [museeDelaFraise, fortDeSaintHeribert, visitNamur];
+
+export function getAllCasClientSlugs(): string[] {
+ return casClients.map((c) => c.slug);
+}
+
+export function getCasClientData(slug: string): CasClient | undefined {
+ return casClients.find((c) => c.slug === slug);
+}
+
+export function getAllCasClients(): CasClient[] {
+ return casClients;
+}
diff --git a/src/data/translations.ts b/src/data/translations.ts
index 6a936ce..86f00b8 100644
--- a/src/data/translations.ts
+++ b/src/data/translations.ts
@@ -243,9 +243,17 @@ const translations = {
customDev: 'Développements sur mesure',
},
},
+ casClients: {
+ sectionLabel: 'Cas clients',
+ title: 'Ils nous font confiance',
+ subtitle: "Des musées, sites patrimoniaux et offices de tourisme ont choisi MyInfoMate pour digitaliser l'expérience de leurs visiteurs.",
+ ctaAll: 'Voir tous les cas clients',
+ readCase: 'Lire le cas',
+ },
footer: {
desc: "La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.",
contactTitle: 'Contact',
+ casClientsLink: 'Cas clients',
copyright: '© 2026 MyInfoMate. Tous droits réservés.',
legal: 'Mentions Légales',
privacy: 'Confidentialité',
@@ -494,9 +502,17 @@ const translations = {
customDev: 'Custom development',
},
},
+ casClients: {
+ sectionLabel: 'Case studies',
+ title: 'They trust us',
+ subtitle: 'Museums, heritage sites and tourism offices chose MyInfoMate to digitalize their visitor experience.',
+ ctaAll: 'View all case studies',
+ readCase: 'Read case',
+ },
footer: {
desc: 'The SaaS solution for digitalizing your venues. Creativity and technology at the service of visitor experience.',
contactTitle: 'Contact',
+ casClientsLink: 'Case studies',
copyright: '© 2026 MyInfoMate. All rights reserved.',
legal: 'Legal Notice',
privacy: 'Privacy',
@@ -745,9 +761,17 @@ const translations = {
customDev: 'Maatwerkontwikkeling',
},
},
+ casClients: {
+ sectionLabel: 'Klantcases',
+ title: 'Zij vertrouwen ons',
+ subtitle: 'Musea, erfgoedsites en toerismekantoren kozen voor MyInfoMate om hun bezoekerservaring te digitaliseren.',
+ ctaAll: 'Bekijk alle klantcases',
+ readCase: 'Lees case',
+ },
footer: {
desc: 'De SaaS-oplossing voor de digitalisering van uw locaties. Creativiteit en technologie ten dienste van de bezoekerservaring.',
contactTitle: 'Contact',
+ casClientsLink: 'Klantcases',
copyright: '© 2026 MyInfoMate. Alle rechten voorbehouden.',
legal: 'Wettelijke vermeldingen',
privacy: 'Privacy',
@@ -996,9 +1020,17 @@ const translations = {
customDev: 'Individuelle Entwicklung',
},
},
+ casClients: {
+ sectionLabel: 'Referenzen',
+ title: 'Sie vertrauen uns',
+ subtitle: 'Museen, Kulturstätten und Tourismusbüros haben sich für MyInfoMate entschieden, um ihr Besuchererlebnis zu digitalisieren.',
+ ctaAll: 'Alle Referenzen ansehen',
+ readCase: 'Fall lesen',
+ },
footer: {
desc: 'Die SaaS-Lösung für die Digitalisierung Ihrer Standorte. Kreativität und Technologie im Dienst des Besuchererlebnisses.',
contactTitle: 'Kontakt',
+ casClientsLink: 'Referenzen',
copyright: '© 2026 MyInfoMate. Alle Rechte vorbehalten.',
legal: 'Rechtliche Hinweise',
privacy: 'Datenschutz',
+
+
+ );
+}
diff --git a/src/components/Reveal.tsx b/src/components/Reveal.tsx
new file mode 100644
index 0000000..60cd7ea
--- /dev/null
+++ b/src/components/Reveal.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+export default function Reveal({
+ children,
+ delay = 0,
+ className = '',
+}: {
+ children: React.ReactNode;
+ delay?: number;
+ className?: string;
+}) {
+ const ref = React.useRef
+
+
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/data/cas-clients.ts b/src/data/cas-clients.ts
new file mode 100644
index 0000000..1c0d40e
--- /dev/null
+++ b/src/data/cas-clients.ts
@@ -0,0 +1,582 @@
+export type CasClientLanguage = 'fr' | 'en' | 'nl' | 'de';
+
+export interface CasClientMeta {
+ title: string;
+ description: string;
+}
+
+export interface CasClientTranslation {
+ backLabel: string;
+ badge: string;
+ headline: string;
+ description: string;
+ challenge: {
+ label: string;
+ title: string;
+ items: string[];
+ };
+ solution: {
+ label: string;
+ title: string;
+ description: string;
+ tags: string[];
+ };
+ results: {
+ label: string;
+ title: string;
+ items: { value: string; label: string }[];
+ };
+ cta: {
+ title: string;
+ button1: string;
+ button2: string;
+ };
+}
+
+export interface CasClient {
+ slug: string;
+ client: string;
+ year: number;
+ location: string;
+ segmentSlug: string;
+ meta: Record