Added translations

This commit is contained in:
Thomas Fransolet 2026-03-10 16:09:06 +01:00
parent 586d4e8118
commit f2a4bdbac8
2 changed files with 797 additions and 160 deletions

View File

@ -2,6 +2,25 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { resolveImage } from '@/data/stitch-images'; import { resolveImage } from '@/data/stitch-images';
import translations, { Language } from '@/data/translations';
const MODULE_META = [
{ id: 'map', icon: 'map', theme: 'rose' },
{ id: 'quiz', icon: 'sports_esports', theme: 'rose' },
{ id: 'video', icon: 'videocam', theme: 'rose' },
{ id: 'article', icon: 'article', theme: 'rose' },
{ id: 'agenda', icon: 'calendar_month', theme: 'rose' },
{ id: 'offline', icon: 'download_for_offline', theme: 'rose' },
{ id: 'web', icon: 'public', theme: 'rose' },
{ id: 'stats', icon: 'monitoring', theme: 'rose' },
];
const LANGUAGES: { code: Language; label: string }[] = [
{ code: 'fr', label: 'FR' },
{ code: 'en', label: 'EN' },
{ code: 'nl', label: 'NL' },
{ code: 'de', label: 'DE' },
];
export default function Home() { export default function Home() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@ -14,6 +33,16 @@ export default function Home() {
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle'); const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [activeModule, setActiveModule] = useState(0); const [activeModule, setActiveModule] = useState(0);
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [lang, setLang] = useState<Language>('fr');
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,
}));
// Lock body scroll when mobile menu is open // Lock body scroll when mobile menu is open
useEffect(() => { useEffect(() => {
@ -25,72 +54,10 @@ export default function Home() {
return () => { document.body.style.overflow = 'auto'; }; return () => { document.body.style.overflow = 'auto'; };
}, [isMenuOpen]); }, [isMenuOpen]);
const modules = [ // Update html lang attribute
{ useEffect(() => {
id: 'map', document.documentElement.lang = lang;
title: 'Cartes & Plans', }, [lang]);
icon: 'map',
theme: 'rose',
description: 'Une cartographie interactive ultra-précise pour guider vos visiteurs. Géolocalisation en temps réel, points dintérêt cliquables et navigation fluide.',
value: 'Améliorez lorientation et augmentez la satisfaction visiteur.'
},
{
id: 'quiz',
title: 'Jeux & Quiz',
icon: 'sports_esports',
theme: 'rose',
description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter lattention de tous vos visiteurs.',
value: 'Augmentez lengagement et la fidélisation de vos visiteurs.'
},
{
id: 'video',
title: 'Audio & Vidéo',
icon: 'videocam',
theme: 'rose',
description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos et témoignages accessibles en un clic.',
value: 'Enrichissez lexpérience visiteur par le multimédia.'
},
{
id: 'article',
title: 'Articles & PDF',
icon: 'article',
theme: 'rose',
description: 'Offrez une lecture confortable de vos contenus. Fiches descriptives, brochures PDF et catalogues numérisés.',
value: 'Digitalisez vos supports papier sans perte de qualité.'
},
{
id: 'agenda',
title: 'Agenda & Événements',
icon: 'calendar_month',
theme: 'rose',
description: 'Gérez dynamiquement votre programmation. Événements, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
value: 'Optimisez la fréquentation de vos activités.'
},
{
id: 'offline',
title: 'Accès Hors Ligne',
icon: 'download_for_offline',
theme: 'rose',
description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des contenus pour une consultation fluide même sans connexion 4G/Wifi.',
value: 'Garantissez un service continu partout sur votre site.'
},
{
id: 'web',
title: 'Contenu Web & Social',
icon: 'public',
theme: 'rose',
description: 'Intégrez le meilleur du web. Formulaires, réseaux sociaux ou liens externes : ouvrez votre app sur le monde.',
value: 'Connectez votre écosystème digital en un seul lieu.'
},
{
id: 'stats',
title: 'Statistiques & Data',
icon: 'monitoring',
theme: 'rose',
description: 'Analysez le comportement de vos visiteurs. Contenus populaires, temps de lecture et engagement : pilotez par la donnée.',
value: 'Prenez des décisions éclairées basées sur lusage réel.'
}
];
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@ -126,6 +93,7 @@ export default function Home() {
e.preventDefault(); e.preventDefault();
document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' }); document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
}; };
return ( return (
<main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display"> <main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
{/* Top Navigation */} {/* Top Navigation */}
@ -140,23 +108,34 @@ export default function Home() {
<span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span> <span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
</a> </a>
<nav className="hidden lg:flex items-center gap-10"> <nav className="hidden lg:flex items-center gap-10">
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#deployment-modes">Solution</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#deployment-modes">{t.nav.solution}</a>
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#features">Fonctionnalités</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#features">{t.nav.features}</a>
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#audience">Public</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#audience">{t.nav.audience}</a>
{/* <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#tarifs">Tarifs</a> */}
</nav> </nav>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Language selector - desktop */}
<div className="hidden lg:flex items-center gap-0.5 border border-slate-200 rounded-full px-1 py-1">
{LANGUAGES.map((l) => (
<button
key={l.code}
onClick={() => setLang(l.code)}
className={`text-xs font-bold px-3 py-1.5 rounded-full transition-all ${lang === l.code ? 'bg-primary text-slate-900' : 'text-slate-500 hover:text-slate-900'}`}
>
{l.label}
</button>
))}
</div>
<a <a
href="https://manager.myinfomate.be" href="https://manager.myinfomate.be"
className="hidden lg:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors" className="hidden lg:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors"
> >
Connexion {t.nav.login}
</a> </a>
<button <button
onClick={scrollToContact} onClick={scrollToContact}
className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95 hidden sm:block" className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95 hidden sm:block"
> >
Demander une démo {t.nav.demo}
</button> </button>
<button <button
onClick={() => setIsMenuOpen(!isMenuOpen)} onClick={() => setIsMenuOpen(!isMenuOpen)}
@ -194,11 +173,11 @@ export default function Home() {
<nav className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto scrollbar-hide"> <nav className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto scrollbar-hide">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{[ {[
{ label: 'ACCUEIL', href: '#' }, { label: t.mobileMenu.home, href: '#' },
{ label: 'SOLUTION', href: '#deployment-modes' }, { label: t.mobileMenu.solution, href: '#deployment-modes' },
{ label: 'FONCTIONNALITÉS', href: '#features' }, { label: t.mobileMenu.features, href: '#features' },
{ label: 'PUBLIC', href: '#audience' }, { label: t.mobileMenu.audience, href: '#audience' },
{ label: 'CONTACT', href: '#contact' } { label: t.mobileMenu.contact, href: '#contact' }
].map((item) => ( ].map((item) => (
<a <a
key={item.label} key={item.label}
@ -219,18 +198,31 @@ export default function Home() {
))} ))}
</div> </div>
{/* Language selector - mobile */}
<div className="flex items-center gap-2">
{LANGUAGES.map((l) => (
<button
key={l.code}
onClick={() => setLang(l.code)}
className={`flex-1 py-2 text-xs font-bold rounded-xl border-2 transition-all ${lang === l.code ? 'bg-primary border-primary text-slate-900' : 'border-slate-200 text-slate-500 hover:border-slate-400'}`}
>
{l.label}
</button>
))}
</div>
<div className="mt-auto py-8 flex flex-col gap-4"> <div className="mt-auto py-8 flex flex-col gap-4">
<a <a
href="https://manager.myinfomate.be" href="https://manager.myinfomate.be"
className="w-full text-center py-4 text-xs font-black tracking-widest text-slate-800 border-2 border-slate-100 rounded-xl hover:border-primary transition-all" className="w-full text-center py-4 text-xs font-black tracking-widest text-slate-800 border-2 border-slate-100 rounded-xl hover:border-primary transition-all"
> >
CONNEXION {t.mobileMenu.login}
</a> </a>
<button <button
onClick={(e) => { scrollToContact(e); setIsMenuOpen(false); }} onClick={(e) => { scrollToContact(e); setIsMenuOpen(false); }}
className="w-full py-4 bg-primary text-slate-900 font-black text-xs tracking-widest rounded-xl shadow-xl shadow-primary/20 active:scale-95 transition-all" className="w-full py-4 bg-primary text-slate-900 font-black text-xs tracking-widest rounded-xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
> >
DEMANDER UNE DÉMO {t.mobileMenu.demo}
</button> </button>
</div> </div>
</nav> </nav>
@ -246,25 +238,22 @@ export default function Home() {
<div className="flex-1 text-center lg:text-left"> <div className="flex-1 text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-slate-700 text-xs font-bold uppercase tracking-wider mb-6"> <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-slate-700 text-xs font-bold uppercase tracking-wider mb-6">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span> <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
La technologie au service de l'expérience visiteur {t.hero.badge}
</div> </div>
<h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8"> <h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8">
MyInfoMate - La solution facile pour créer, gérer et diffuser du <span className="gradient-text">contenu interactif</span> {t.hero.titleBefore}<span className="gradient-text">{t.hero.titleHighlight}</span>{t.hero.titleAfter}
</h1> </h1>
<p className="text-lg text-slate-600 leading-relaxed mb-10 max-w-2xl mx-auto lg:mx-0"> <p className="text-lg text-slate-600 leading-relaxed mb-10 max-w-2xl mx-auto lg:mx-0">
Transformez l'expérience de vos visiteurs. Gérez vos parcours sur tablettes et mobiles en temps réel, sans aucune connaissance technique. {t.hero.subtitle}
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
<button <button
onClick={scrollToContact} onClick={scrollToContact}
className="w-full sm:w-auto px-8 py-4 bg-primary text-slate-900 font-extrabold rounded-full shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group transition-all" className="w-full sm:w-auto px-8 py-4 bg-primary text-slate-900 font-extrabold rounded-full shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group transition-all"
> >
Demander une démo {t.hero.cta}
<span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span> <span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
</button> </button>
{/* <button className="w-full sm:w-auto px-8 py-4 bg-white border border-slate-200 text-slate-700 font-bold rounded-full hover:bg-slate-50 transition-all shadow-sm">
Voir un exemple
</button> */}
</div> </div>
</div> </div>
<div className="flex-1 relative w-full mt-12 lg:mt-0"> <div className="flex-1 relative w-full mt-12 lg:mt-0">
@ -278,8 +267,8 @@ export default function Home() {
className="w-full h-full object-cover opacity-80" className="w-full h-full object-cover 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"> <div className="absolute top-4 left-6 bg-white/90 backdrop-blur px-4 py-2 rounded-xl shadow-lg border border-primary/20">
<p className="text-[10px] font-bold text-slate-400 uppercase">Carte Interactive</p> <p className="text-[10px] font-bold text-slate-400 uppercase">{t.mockup.mapTitle}</p>
<p className="text-xs font-extrabold text-slate-900">Parcours Découverte</p> <p className="text-xs font-extrabold text-slate-900">{t.mockup.mapSubtitle}</p>
</div> </div>
</div> </div>
@ -287,7 +276,7 @@ export default function Home() {
<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="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"> <div className="h-full bg-slate-50 flex flex-col">
<div className="p-2 lg:p-3 bg-accent-violet text-white text-center"> <div className="p-2 lg:p-3 bg-accent-violet text-white text-center">
<p className="text-[8px] lg:text-[10px] font-bold uppercase">Agenda</p> <p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.agenda}</p>
</div> </div>
<div className="p-2 space-y-2 overflow-hidden flex-1"> <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"> <div className="rounded-lg overflow-hidden h-12 lg:h-16 bg-slate-200 relative">
@ -304,7 +293,7 @@ export default function Home() {
<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="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"> <div className="h-full flex flex-col">
<div className="p-2 lg:p-3 bg-primary text-slate-900 text-center"> <div className="p-2 lg:p-3 bg-primary text-slate-900 text-center">
<p className="text-[8px] lg:text-[10px] font-bold uppercase">Visites</p> <p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.tours}</p>
</div> </div>
<div className="p-2 space-y-2 flex-1"> <div className="p-2 space-y-2 flex-1">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
@ -329,8 +318,8 @@ export default function Home() {
<section className="py-24 bg-white" id="points"> <section className="py-24 bg-white" id="points">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-20"> <div className="text-center mb-20">
<h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">Points Stratégiques</h2> <h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">{t.strategic.sectionLabel}</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service de l'expérience visiteur</h3> <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">{t.strategic.sectionTitle}</h3>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Feature 1 */} {/* Feature 1 */}
@ -338,32 +327,32 @@ export default function Home() {
<div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-3xl">sync</span> <span className="material-symbols-outlined text-3xl">sync</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Mises à jour instantanées</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature1Title}</h4>
<p className="text-slate-600 leading-relaxed text-sm">Modifiez vos parcours de visite, textes et médias instantanément depuis votre navigateur.</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
</div> </div>
{/* Feature 2 */} {/* Feature 2 */}
<div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300"> <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent-violet/20 text-accent-violet flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <div className="w-14 h-14 rounded-2xl bg-accent-violet/20 text-accent-violet flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-3xl">code_off</span> <span className="material-symbols-outlined text-3xl">code_off</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Zéro développement</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature2Title}</h4>
<p className="text-slate-600 leading-relaxed text-sm">Créez des applications professionnelles sans écrire une seule ligne de code. Tout est visuel.</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
</div> </div>
{/* Feature 3 */} {/* Feature 3 */}
<div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300"> <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent-orange/20 text-accent-orange flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <div className="w-14 h-14 rounded-2xl bg-accent-orange/20 text-accent-orange flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-3xl">download_for_offline</span> <span className="material-symbols-outlined text-3xl">download_for_offline</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Contenu hors ligne</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature3Title}</h4>
<p className="text-slate-600 leading-relaxed text-sm">Permettez à vos visiteurs de télécharger tout ou partie de vos parcours pour une consultation fluide même sans internet.</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
</div> </div>
{/* Feature 4 */} {/* Feature 4 */}
<div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300"> <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
<div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-3xl">dashboard_customize</span> <span className="material-symbols-outlined text-3xl">dashboard_customize</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Gestion Centralisée (CMS)</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature4Title}</h4>
<p className="text-slate-600 leading-relaxed text-sm">Un seul outil pour piloter l'ensemble de vos dispositifs numériques et flottes de tablettes.</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
</div> </div>
</div> </div>
</div> </div>
@ -373,10 +362,10 @@ export default function Home() {
<section className="py-24 bg-slate-50 border-y border-slate-100" id="deployment-modes"> <section className="py-24 bg-slate-50 border-y border-slate-100" id="deployment-modes">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">Modes de déploiement</h2> <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">{t.deployment.sectionLabel}</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Une plateforme, plusieurs solutions</h3> <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">{t.deployment.sectionTitle}</h3>
<p className="text-lg text-slate-600 max-w-2xl mx-auto"> <p className="text-lg text-slate-600 max-w-2xl mx-auto">
Choisissez le mode de diffusion le plus adapté à votre lieu et à vos visiteurs. MyInfoMate s'adapte à tous les terminaux. {t.deployment.sectionDesc}
</p> </p>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
@ -385,35 +374,35 @@ export default function Home() {
<div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all"> <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
<span className="material-symbols-outlined text-3xl">smartphone</span> <span className="material-symbols-outlined text-3xl">smartphone</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Mobile (BYOD)</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode1Title}</h4>
<p className="text-slate-600 text-sm leading-relaxed">Les visiteurs utilisent leur propre smartphone pour accéder à vos parcours en toute liberté.</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode1Desc}</p>
</div> </div>
{/* Mode 2: Kiosk Tablet */} {/* Mode 2: Kiosk Tablet */}
<div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300"> <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-all"> <div className="w-14 h-14 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-all">
<span className="material-symbols-outlined text-3xl">tablet_android</span> <span className="material-symbols-outlined text-3xl">tablet_android</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Mode Kiosk (Tablette)</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode2Title}</h4>
<p className="text-slate-600 text-sm leading-relaxed">Solution robuste pré-installée sur vos flottes de tablettes pour une expérience guidée et contrôlée.</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode2Desc}</p>
</div> </div>
{/* Mode 3: Web App */} {/* Mode 3: Web App */}
<div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300"> <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent-orange/10 text-accent-orange flex items-center justify-center mb-6 group-hover:bg-accent-orange group-hover:text-white transition-all"> <div className="w-14 h-14 rounded-2xl bg-accent-orange/10 text-accent-orange flex items-center justify-center mb-6 group-hover:bg-accent-orange group-hover:text-white transition-all">
<span className="material-symbols-outlined text-3xl">language</span> <span className="material-symbols-outlined text-3xl">language</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Web</h4> <h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode3Title}</h4>
<p className="text-slate-600 text-sm leading-relaxed">Accessible instantanément depuis n'importe quel navigateur moderne, sans installation préalable.</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode3Desc}</p>
</div> </div>
{/* Mode 4: Future VR/AR */} {/* Mode 4: Future VR/AR */}
<div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden"> <div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden">
<div className="absolute top-0 right-0 p-3" title="Innovation à venir"> <div className="absolute top-0 right-0 p-3" title="Innovation à venir">
<span className="px-2 py-1 bg-primary text-slate-900 text-[10px] font-black uppercase rounded-md">Bientôt</span> <span className="px-2 py-1 bg-primary text-slate-900 text-[10px] font-black uppercase rounded-md">{t.deployment.comingSoon}</span>
</div> </div>
<div className="w-14 h-14 rounded-2xl bg-white/10 text-primary flex items-center justify-center mb-6"> <div className="w-14 h-14 rounded-2xl bg-white/10 text-primary flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-3xl">view_in_ar</span> <span className="material-symbols-outlined text-3xl">view_in_ar</span>
</div> </div>
<h4 className="text-xl font-extrabold mb-4">Innovation VR & AR</h4> <h4 className="text-xl font-extrabold mb-4">{t.deployment.mode4Title}</h4>
<p className="text-slate-400 text-sm leading-relaxed">Préparez-vous pour le futur avec des expériences immersives sur Meta Quest et lunettes connectées.</p> <p className="text-slate-400 text-sm leading-relaxed">{t.deployment.mode4Desc}</p>
</div> </div>
</div> </div>
</div> </div>
@ -423,10 +412,10 @@ export default function Home() {
<section className="py-24 bg-white" id="features"> <section className="py-24 bg-white" id="features">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">Fonctionnalités & Modules</h2> <h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">{t.modules.sectionLabel}</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Explorateur de modules</h3> <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">{t.modules.sectionTitle}</h3>
<p className="text-lg text-slate-600 max-w-2xl mx-auto"> <p className="text-lg text-slate-600 max-w-2xl mx-auto">
Plongez au cœur des possibilités offertes par MyInfoMate. Découvrez comment chaque module transforme l'expérience de vos visiteurs. {t.modules.sectionDesc}
</p> </p>
</div> </div>
@ -523,7 +512,7 @@ export default function Home() {
<div className="p-5 bg-rose-600/5 border border-rose-100 rounded-2xl"> <div className="p-5 bg-rose-600/5 border border-rose-100 rounded-2xl">
<p className="text-rose-600 font-bold text-sm flex items-center gap-2"> <p className="text-rose-600 font-bold text-sm flex items-center gap-2">
<span className="material-symbols-outlined text-base">verified</span> <span className="material-symbols-outlined text-base">verified</span>
Valeur ajoutée : {modules[activeModule].value} {t.modules.valueLabel} {modules[activeModule].value}
</p> </p>
</div> </div>
</div> </div>
@ -617,7 +606,7 @@ export default function Home() {
</div> </div>
<div className="absolute -bottom-6 -right-6 w-48 h-48 bg-white p-4 rounded-3xl shadow-2xl border border-slate-200 transform rotate-6 hover:rotate-0 transition-transform duration-500 z-10"> <div className="absolute -bottom-6 -right-6 w-48 h-48 bg-white p-4 rounded-3xl shadow-2xl border border-slate-200 transform rotate-6 hover:rotate-0 transition-transform duration-500 z-10">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<p className="text-[10px] font-bold text-slate-400 uppercase">Palette de Couleurs</p> <p className="text-[10px] font-bold text-slate-400 uppercase">{t.whitelabel.colorPalette}</p>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
<div className="w-full aspect-square rounded-lg bg-primary"></div> <div className="w-full aspect-square rounded-lg bg-primary"></div>
<div className="w-full aspect-square rounded-lg bg-accent-violet"></div> <div className="w-full aspect-square rounded-lg bg-accent-violet"></div>
@ -625,34 +614,32 @@ export default function Home() {
<div className="w-full aspect-square rounded-lg bg-slate-900"></div> <div className="w-full aspect-square rounded-lg bg-slate-900"></div>
</div> </div>
<div className="mt-4 p-2 bg-primary/10 rounded-xl text-center"> <div className="mt-4 p-2 bg-primary/10 rounded-xl text-center">
<p className="text-[10px] text-primary font-bold">Thème Appliqué avec succès</p> <p className="text-[10px] text-primary font-bold">{t.whitelabel.themeApplied}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex-1 order-1 lg:order-2"> <div className="flex-1 order-1 lg:order-2">
<h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2> <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">{t.whitelabel.sectionLabel}</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">Votre marque, votre application. Pas la nôtre.</h3> <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">{t.whitelabel.title}</h3>
<p className="text-lg text-slate-600 leading-relaxed mb-8"> <p className="text-lg text-slate-600 leading-relaxed mb-8" dangerouslySetInnerHTML={{ __html: t.whitelabel.desc }} />
Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre lieu, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
</p>
<ul className="space-y-4 mb-10 text-slate-700 font-semibold"> <ul className="space-y-4 mb-10 text-slate-700 font-semibold">
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<span className="material-symbols-outlined text-accent-orange">check_circle</span> <span className="material-symbols-outlined text-accent-orange">check_circle</span>
Personnalisation complète des interfaces {t.whitelabel.item1}
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<span className="material-symbols-outlined text-accent-orange">check_circle</span> <span className="material-symbols-outlined text-accent-orange">check_circle</span>
Votre logo sur l'écran d'accueil {t.whitelabel.item2}
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<span className="material-symbols-outlined text-accent-orange">check_circle</span> <span className="material-symbols-outlined text-accent-orange">check_circle</span>
Typographies et iconographies sur-mesure {t.whitelabel.item3}
</li> </li>
</ul> </ul>
<button className="bg-slate-900 text-white font-bold px-8 py-4 rounded-full hover:bg-slate-800 transition-all flex items-center gap-2"> <button className="bg-slate-900 text-white font-bold px-8 py-4 rounded-full hover:bg-slate-800 transition-all flex items-center gap-2">
Découvrir la personnalisation {t.whitelabel.cta}
<span className="material-symbols-outlined">brush</span> <span className="material-symbols-outlined">brush</span>
</button> </button>
</div> </div>
@ -664,30 +651,30 @@ export default function Home() {
<section className="py-24 bg-white" id="audience"> <section className="py-24 bg-white" id="audience">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Une solution pensée pour vous</h3> <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">Que vous soyez une petite galerie ou un monument national, MyInfoMate s'adapte à vos besoins.</p> <p className="text-slate-600 max-w-2xl mx-auto">{t.audience.subtitle}</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-10"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
<div className="text-center p-6 flex flex-col items-center"> <div className="text-center p-6 flex flex-col items-center">
<div className="w-24 h-24 icon-circle mb-6 text-accent-violet"> <div className="w-24 h-24 icon-circle mb-6 text-accent-violet">
<span className="material-symbols-outlined text-5xl">museum</span> <span className="material-symbols-outlined text-5xl">museum</span>
</div> </div>
<h4 className="text-2xl font-bold mb-3">Musées & Galeries</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item1Title}</h4>
<p className="text-slate-600 text-sm">Digitalisez vos collections et créez des guides multimédias captivants pour vos expositions permanentes et temporaires.</p> <p className="text-slate-600 text-sm">{t.audience.item1Desc}</p>
</div> </div>
<div className="text-center p-6 flex flex-col items-center"> <div className="text-center p-6 flex flex-col items-center">
<div className="w-24 h-24 icon-circle mb-6 text-primary"> <div className="w-24 h-24 icon-circle mb-6 text-primary">
<span className="material-symbols-outlined text-5xl">travel_explore</span> <span className="material-symbols-outlined text-5xl">travel_explore</span>
</div> </div>
<h4 className="text-2xl font-bold mb-3">Offices de Tourisme</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item2Title}</h4>
<p className="text-slate-600 text-sm">Guidez les visiteurs à travers votre ville ou région avec des cartes interactives et des points d'intérêt géo-localisés.</p> <p className="text-slate-600 text-sm">{t.audience.item2Desc}</p>
</div> </div>
<div className="text-center p-6 flex flex-col items-center"> <div className="text-center p-6 flex flex-col items-center">
<div className="w-24 h-24 icon-circle mb-6 text-accent-orange"> <div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
<span className="material-symbols-outlined text-5xl">hotel</span> <span className="material-symbols-outlined text-5xl">hotel</span>
</div> </div>
<h4 className="text-2xl font-bold mb-3">Hôtels & Loisirs</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item3Title}</h4>
<p className="text-slate-600 text-sm">Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.</p> <p className="text-slate-600 text-sm">{t.audience.item3Desc}</p>
</div> </div>
</div> </div>
</div> </div>
@ -702,23 +689,23 @@ export default function Home() {
<div className="absolute bottom-10 right-10 w-60 h-60 bg-accent-violet rounded-full blur-3xl"></div> <div className="absolute bottom-10 right-10 w-60 h-60 bg-accent-violet rounded-full blur-3xl"></div>
</div> </div>
<h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-8 relative z-10"> <h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-8 relative z-10">
Prêt à transformer votre <span className="text-primary">expérience visiteur</span> ? {t.cta.titleBefore}<span className="text-primary">{t.cta.titleHighlight}</span>{t.cta.titleAfter}
</h2> </h2>
<p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10"> <p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10">
Rejoignez des dizaines de lieux qui font confiance à MyInfoMate pour engager leurs visiteurs. {t.cta.subtitle}
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10"> <div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
<button <button
onClick={scrollToContact} onClick={scrollToContact}
className="w-full sm:w-auto px-10 py-5 bg-primary text-slate-900 font-extrabold rounded-full shadow-2xl shadow-primary/40 hover:scale-105 transition-all" className="w-full sm:w-auto px-10 py-5 bg-primary text-slate-900 font-extrabold rounded-full shadow-2xl shadow-primary/40 hover:scale-105 transition-all"
> >
Demander une démo gratuite {t.cta.button1}
</button> </button>
<a <a
href="mailto:contact@unov.be" href="mailto:contact@unov.be"
className="w-full sm:w-auto px-10 py-5 bg-white/10 text-white font-bold rounded-full hover:bg-white/20 transition-all border border-white/10 text-center" className="w-full sm:w-auto px-10 py-5 bg-white/10 text-white font-bold rounded-full hover:bg-white/20 transition-all border border-white/10 text-center"
> >
Nous contacter {t.cta.button2}
</a> </a>
</div> </div>
</div> </div>
@ -733,9 +720,9 @@ export default function Home() {
<div className="max-w-4xl mx-auto px-6"> <div className="max-w-4xl mx-auto px-6">
<div className="bg-white rounded-[3rem] shadow-2xl border border-slate-100 p-10 lg:p-16 relative"> <div className="bg-white rounded-[3rem] shadow-2xl border border-slate-100 p-10 lg:p-16 relative">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">Contact & Démo</h2> <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">{t.contact.sectionLabel}</h2>
<h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Prêt à commencer l'aventure ?</h3> <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">{t.contact.title}</h3>
<p className="text-slate-600">Remplissez ce formulaire et nous reviendrons vers vous pour une démo personnalisée.</p> <p className="text-slate-600">{t.contact.subtitle}</p>
</div> </div>
{status === 'success' ? ( {status === 'success' ? (
@ -743,13 +730,13 @@ export default function Home() {
<div className="w-20 h-20 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6"> <div className="w-20 h-20 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
<span className="material-symbols-outlined text-5xl">task_alt</span> <span className="material-symbols-outlined text-5xl">task_alt</span>
</div> </div>
<h3 className="text-3xl font-extrabold text-slate-900 mb-4">Message envoyé !</h3> <h3 className="text-3xl font-extrabold text-slate-900 mb-4">{t.contact.successTitle}</h3>
<p className="text-slate-600 mb-8">Merci pour votre intérêt. Nous reviendrons vers vous très prochainement.</p> <p className="text-slate-600 mb-8">{t.contact.successDesc}</p>
<button <button
onClick={() => setStatus('idle')} onClick={() => setStatus('idle')}
className="text-primary font-bold hover:underline" className="text-primary font-bold hover:underline"
> >
Envoyer un autre message {t.contact.successButton}
</button> </button>
</div> </div>
) : ( ) : (
@ -757,12 +744,12 @@ export default function Home() {
{status === 'error' && ( {status === 'error' && (
<div className="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium border border-red-100 flex items-center gap-2"> <div className="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium border border-red-100 flex items-center gap-2">
<span className="material-symbols-outlined text-sm">error</span> <span className="material-symbols-outlined text-sm">error</span>
Une erreur est survenue. Veuillez réessayer ou nous contacter directement par email. {t.contact.errorMsg}
</div> </div>
)} )}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-slate-700 ml-1">Prénom</label> <label className="text-sm font-bold text-slate-700 ml-1">{t.contact.firstNameLabel}</label>
<input <input
type="text" type="text"
name="firstName" name="firstName"
@ -770,11 +757,11 @@ export default function Home() {
value={formData.firstName} value={formData.firstName}
onChange={handleChange} onChange={handleChange}
className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="Jean" placeholder={t.contact.firstNamePlaceholder}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-slate-700 ml-1">Nom</label> <label className="text-sm font-bold text-slate-700 ml-1">{t.contact.lastNameLabel}</label>
<input <input
type="text" type="text"
name="lastName" name="lastName"
@ -782,12 +769,12 @@ export default function Home() {
value={formData.lastName} value={formData.lastName}
onChange={handleChange} onChange={handleChange}
className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="Dupont" placeholder={t.contact.lastNamePlaceholder}
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-slate-700 ml-1">Email</label> <label className="text-sm font-bold text-slate-700 ml-1">{t.contact.emailLabel}</label>
<input <input
type="email" type="email"
name="email" name="email"
@ -795,18 +782,18 @@ export default function Home() {
value={formData.email} value={formData.email}
onChange={handleChange} onChange={handleChange}
className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="jean.dupont@gmail.be" placeholder={t.contact.emailPlaceholder}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-slate-700 ml-1">Votre message (facultatif)</label> <label className="text-sm font-bold text-slate-700 ml-1">{t.contact.messageLabel}</label>
<textarea <textarea
name="message" name="message"
rows={4} rows={4}
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none" className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none"
placeholder="Parlez-nous de votre projet..." placeholder={t.contact.messagePlaceholder}
></textarea> ></textarea>
</div> </div>
<button <button
@ -818,7 +805,7 @@ export default function Home() {
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span> <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
) : ( ) : (
<> <>
Envoyer ma demande {t.contact.submitButton}
<span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span> <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
</> </>
)} )}
@ -844,7 +831,7 @@ export default function Home() {
<span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span> <span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
</div> </div>
<p className="text-slate-500 text-sm leading-relaxed mb-6"> <p className="text-slate-500 text-sm leading-relaxed mb-6">
La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur. {t.footer.desc}
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
<a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="#"> <a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="#">
@ -874,7 +861,7 @@ export default function Home() {
</ul> */} </ul> */}
</div> </div>
<div> <div>
<h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Contact</h4> <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">{t.footer.contactTitle}</h4>
<ul className="space-y-4"> <ul className="space-y-4">
<li className="flex items-start gap-3 text-sm text-slate-500"> <li className="flex items-start gap-3 text-sm text-slate-500">
<span className="material-symbols-outlined text-primary text-sm">location_on</span> <span className="material-symbols-outlined text-primary text-sm">location_on</span>
@ -892,10 +879,10 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4"> <div className="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-xs text-slate-400">© 2026 MyInfoMate. Tous droits réservés.</p> <p className="text-xs text-slate-400">{t.footer.copyright}</p>
<div className="flex gap-8"> <div className="flex gap-8">
<a className="text-xs text-slate-400 hover:text-slate-600" href="#">Mentions Légales</a> <a className="text-xs text-slate-400 hover:text-slate-600" href="#">{t.footer.legal}</a>
<a className="text-xs text-slate-400 hover:text-slate-600" href="#">Confidentialité</a> <a className="text-xs text-slate-400 hover:text-slate-600" href="#">{t.footer.privacy}</a>
</div> </div>
</div> </div>
</div> </div>

650
src/data/translations.ts Normal file
View File

@ -0,0 +1,650 @@
export type Language = 'fr' | 'en' | 'nl' | 'de';
const translations = {
fr: {
nav: {
solution: 'Solution',
features: 'Fonctionnalités',
audience: 'Public',
login: 'Connexion',
demo: 'Demander une démo',
},
mobileMenu: {
home: 'ACCUEIL',
solution: 'SOLUTION',
features: 'FONCTIONNALITÉS',
audience: 'PUBLIC',
contact: 'CONTACT',
login: 'CONNEXION',
demo: 'DEMANDER UNE DÉMO',
},
hero: {
badge: "La technologie au service de l'expérience visiteur",
titleBefore: 'MyInfoMate - La solution facile pour créer, gérer et diffuser du ',
titleHighlight: 'contenu interactif',
titleAfter: '',
subtitle: "Transformez l'expérience de vos visiteurs. Gérez vos parcours sur tablettes et mobiles en temps réel, sans aucune connaissance technique.",
cta: 'Demander une démo',
},
mockup: {
mapTitle: 'Carte Interactive',
mapSubtitle: 'Parcours Découverte',
agenda: 'Agenda',
tours: 'Visites',
},
strategic: {
sectionLabel: 'Points Stratégiques',
sectionTitle: "La technologie au service de l'expérience visiteur",
feature1Title: 'Mises à jour instantanées',
feature1Desc: 'Modifiez vos parcours de visite, textes et médias instantanément depuis votre navigateur.',
feature2Title: 'Zéro développement',
feature2Desc: "Créez des applications professionnelles sans écrire une seule ligne de code. Tout est visuel.",
feature3Title: 'Contenu hors ligne',
feature3Desc: "Permettez à vos visiteurs de télécharger tout ou partie de vos parcours pour une consultation fluide même sans internet.",
feature4Title: 'Gestion Centralisée (CMS)',
feature4Desc: "Un seul outil pour piloter l'ensemble de vos dispositifs numériques et flottes de tablettes.",
},
deployment: {
sectionLabel: 'Modes de déploiement',
sectionTitle: 'Une plateforme, plusieurs solutions',
sectionDesc: "Choisissez le mode de diffusion le plus adapté à votre lieu et à vos visiteurs. MyInfoMate s'adapte à tous les terminaux.",
mode1Title: 'Application Mobile (BYOD)',
mode1Desc: "Les visiteurs utilisent leur propre smartphone pour accéder à vos parcours en toute liberté.",
mode2Title: 'Mode Kiosk (Tablette)',
mode2Desc: "Solution robuste pré-installée sur vos flottes de tablettes pour une expérience guidée et contrôlée.",
mode3Title: 'Application Web',
mode3Desc: "Accessible instantanément depuis n'importe quel navigateur moderne, sans installation préalable.",
mode4Title: 'Innovation VR & AR',
mode4Desc: "Préparez-vous pour le futur avec des expériences immersives sur Meta Quest et lunettes connectées.",
comingSoon: 'Bientôt',
},
modules: {
sectionLabel: 'Fonctionnalités & Modules',
sectionTitle: 'Explorateur de modules',
sectionDesc: "Plongez au cœur des possibilités offertes par MyInfoMate. Découvrez comment chaque module transforme l'expérience de vos visiteurs.",
valueLabel: 'Valeur ajoutée :',
items: [
{
title: 'Cartes & Plans',
description: "Une cartographie interactive ultra-précise pour guider vos visiteurs. Géolocalisation en temps réel, points d'intérêt cliquables et navigation fluide.",
value: "Améliorez l'orientation et augmentez la satisfaction visiteur.",
},
{
title: 'Jeux & Quiz',
description: "Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter l'attention de tous vos visiteurs.",
value: "Augmentez l'engagement et la fidélisation de vos visiteurs.",
},
{
title: 'Audio & Vidéo',
description: "Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos et témoignages accessibles en un clic.",
value: "Enrichissez l'expérience visiteur par le multimédia.",
},
{
title: 'Articles & PDF',
description: "Offrez une lecture confortable de vos contenus. Fiches descriptives, brochures PDF et catalogues numérisés.",
value: "Digitalisez vos supports papier sans perte de qualité.",
},
{
title: 'Agenda & Événements',
description: "Gérez dynamiquement votre programmation. Événements, conférences ou ateliers : vos visiteurs ne ratent plus rien.",
value: "Optimisez la fréquentation de vos activités.",
},
{
title: 'Accès Hors Ligne',
description: "Éliminez les zones blanches. Permettez le téléchargement automatique des contenus pour une consultation fluide même sans connexion 4G/Wifi.",
value: "Garantissez un service continu partout sur votre site.",
},
{
title: 'Contenu Web & Social',
description: "Intégrez le meilleur du web. Formulaires, réseaux sociaux ou liens externes : ouvrez votre app sur le monde.",
value: "Connectez votre écosystème digital en un seul lieu.",
},
{
title: 'Statistiques & Data',
description: "Analysez le comportement de vos visiteurs. Contenus populaires, temps de lecture et engagement : pilotez par la donnée.",
value: "Prenez des décisions éclairées basées sur l'usage réel.",
},
],
},
whitelabel: {
sectionLabel: 'White label',
title: 'Votre marque, votre application. Pas la nôtre.',
desc: "Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre lieu, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.",
item1: 'Personnalisation complète des interfaces',
item2: "Votre logo sur l'écran d'accueil",
item3: 'Typographies et iconographies sur-mesure',
cta: 'Découvrir la personnalisation',
colorPalette: 'Palette de Couleurs',
themeApplied: 'Thème Appliqué avec succès',
},
audience: {
title: 'Une solution pensée pour vous',
subtitle: "Que vous soyez une petite galerie ou un monument national, MyInfoMate s'adapte à vos besoins.",
item1Title: 'Musées & Galeries',
item1Desc: "Digitalisez vos collections et créez des guides multimédias captivants pour vos expositions permanentes et temporaires.",
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.",
item3Title: 'Hôtels & Loisirs',
item3Desc: "Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.",
},
cta: {
titleBefore: 'Prêt à transformer votre ',
titleHighlight: 'expérience visiteur',
titleAfter: ' ?',
subtitle: "Rejoignez des dizaines de lieux qui font confiance à MyInfoMate pour engager leurs visiteurs.",
button1: 'Demander une démo gratuite',
button2: 'Nous contacter',
},
contact: {
sectionLabel: 'Contact & Démo',
title: "Prêt à commencer l'aventure ?",
subtitle: 'Remplissez ce formulaire et nous reviendrons vers vous pour une démo personnalisée.',
successTitle: 'Message envoyé !',
successDesc: 'Merci pour votre intérêt. Nous reviendrons vers vous très prochainement.',
successButton: 'Envoyer un autre message',
errorMsg: 'Une erreur est survenue. Veuillez réessayer ou nous contacter directement par email.',
firstNameLabel: 'Prénom',
firstNamePlaceholder: 'Jean',
lastNameLabel: 'Nom',
lastNamePlaceholder: 'Dupont',
emailLabel: 'Email',
emailPlaceholder: 'jean.dupont@gmail.be',
messageLabel: 'Votre message (facultatif)',
messagePlaceholder: 'Parlez-nous de votre projet...',
submitButton: 'Envoyer ma demande',
},
footer: {
desc: "La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.",
contactTitle: 'Contact',
copyright: '© 2026 MyInfoMate. Tous droits réservés.',
legal: 'Mentions Légales',
privacy: 'Confidentialité',
},
},
en: {
nav: {
solution: 'Solution',
features: 'Features',
audience: 'Audience',
login: 'Login',
demo: 'Request a demo',
},
mobileMenu: {
home: 'HOME',
solution: 'SOLUTION',
features: 'FEATURES',
audience: 'AUDIENCE',
contact: 'CONTACT',
login: 'LOGIN',
demo: 'REQUEST A DEMO',
},
hero: {
badge: 'Technology at the service of visitor experience',
titleBefore: 'MyInfoMate - The easy solution to create, manage and share ',
titleHighlight: 'interactive content',
titleAfter: '',
subtitle: "Transform your visitors' experience. Manage your tours on tablets and mobiles in real time, with no technical knowledge required.",
cta: 'Request a demo',
},
mockup: {
mapTitle: 'Interactive Map',
mapSubtitle: 'Discovery Tour',
agenda: 'Agenda',
tours: 'Tours',
},
strategic: {
sectionLabel: 'Key Features',
sectionTitle: 'Technology at the service of visitor experience',
feature1Title: 'Instant updates',
feature1Desc: 'Edit your tour routes, texts and media instantly from your browser.',
feature2Title: 'Zero development',
feature2Desc: 'Create professional applications without writing a single line of code. Everything is visual.',
feature3Title: 'Offline content',
feature3Desc: 'Allow your visitors to download all or part of your tours for smooth viewing even without internet.',
feature4Title: 'Centralized Management (CMS)',
feature4Desc: 'A single tool to manage all your digital devices and tablet fleets.',
},
deployment: {
sectionLabel: 'Deployment modes',
sectionTitle: 'One platform, multiple solutions',
sectionDesc: 'Choose the most suitable delivery mode for your venue and visitors. MyInfoMate adapts to all devices.',
mode1Title: 'Mobile App (BYOD)',
mode1Desc: 'Visitors use their own smartphone to access your tours freely.',
mode2Title: 'Kiosk Mode (Tablet)',
mode2Desc: 'Robust solution pre-installed on your tablet fleets for a guided and controlled experience.',
mode3Title: 'Web Application',
mode3Desc: 'Instantly accessible from any modern browser, without prior installation.',
mode4Title: 'VR & AR Innovation',
mode4Desc: 'Get ready for the future with immersive experiences on Meta Quest and connected glasses.',
comingSoon: 'Soon',
},
modules: {
sectionLabel: 'Features & Modules',
sectionTitle: 'Module Explorer',
sectionDesc: "Dive into the possibilities offered by MyInfoMate. Discover how each module transforms your visitors' experience.",
valueLabel: 'Added value:',
items: [
{
title: 'Maps & Plans',
description: 'Ultra-precise interactive mapping to guide your visitors. Real-time geolocation, clickable points of interest and smooth navigation.',
value: 'Improve orientation and increase visitor satisfaction.',
},
{
title: 'Games & Quizzes',
description: "Transform the visit into a playful adventure. Treasure hunts, knowledge quizzes and gamified tours to capture the attention of all your visitors.",
value: 'Increase engagement and visitor loyalty.',
},
{
title: 'Audio & Video',
description: 'Stream your HD multimedia content without latency. Immersive audio guides, videos and testimonials accessible in one click.',
value: 'Enrich the visitor experience through multimedia.',
},
{
title: 'Articles & PDF',
description: 'Offer a comfortable reading of your content. Descriptive sheets, PDF brochures and digitized catalogs.',
value: 'Digitize your paper materials without loss of quality.',
},
{
title: 'Agenda & Events',
description: 'Dynamically manage your schedule. Events, conferences or workshops: your visitors never miss anything.',
value: 'Optimize attendance at your activities.',
},
{
title: 'Offline Access',
description: 'Eliminate dead zones. Allow automatic downloading of content for smooth browsing even without 4G/Wifi.',
value: 'Guarantee continuous service everywhere on your site.',
},
{
title: 'Web & Social Content',
description: 'Integrate the best of the web. Forms, social networks or external links: open your app to the world.',
value: 'Connect your digital ecosystem in one place.',
},
{
title: 'Statistics & Data',
description: "Analyze your visitors' behavior. Popular content, reading time and engagement: manage by data.",
value: 'Make informed decisions based on actual usage.',
},
],
},
whitelabel: {
sectionLabel: 'White label',
title: 'Your brand, your app. Not ours.',
desc: "Benefit from a complete <strong>White Label</strong> solution. Customize the interface with your venue's colors, use your own logo and typography for a total immersion of your visitors in your universe.",
item1: 'Complete interface customization',
item2: 'Your logo on the home screen',
item3: 'Custom typography and iconography',
cta: 'Discover customization',
colorPalette: 'Color Palette',
themeApplied: 'Theme Applied successfully',
},
audience: {
title: 'A solution designed for you',
subtitle: 'Whether you are a small gallery or a national monument, MyInfoMate adapts to your needs.',
item1Title: 'Museums & Galleries',
item1Desc: 'Digitize your collections and create captivating multimedia guides for your permanent and temporary exhibitions.',
item2Title: 'Tourism Offices',
item2Desc: 'Guide visitors through your city or region with interactive maps and geo-located points of interest.',
item3Title: 'Hotels & Leisure',
item3Desc: 'Offer your clients a premium experience: services, activities, interactive venue map and personalized recommendations.',
},
cta: {
titleBefore: 'Ready to transform your ',
titleHighlight: 'visitor experience',
titleAfter: '?',
subtitle: 'Join dozens of venues that trust MyInfoMate to engage their visitors.',
button1: 'Request a free demo',
button2: 'Contact us',
},
contact: {
sectionLabel: 'Contact & Demo',
title: 'Ready to start the adventure?',
subtitle: 'Fill in this form and we will get back to you for a personalized demo.',
successTitle: 'Message sent!',
successDesc: 'Thank you for your interest. We will get back to you very soon.',
successButton: 'Send another message',
errorMsg: 'An error occurred. Please try again or contact us directly by email.',
firstNameLabel: 'First name',
firstNamePlaceholder: 'John',
lastNameLabel: 'Last name',
lastNamePlaceholder: 'Smith',
emailLabel: 'Email',
emailPlaceholder: 'john.smith@gmail.com',
messageLabel: 'Your message (optional)',
messagePlaceholder: 'Tell us about your project...',
submitButton: 'Send my request',
},
footer: {
desc: 'The SaaS solution for digitalizing your venues. Creativity and technology at the service of visitor experience.',
contactTitle: 'Contact',
copyright: '© 2026 MyInfoMate. All rights reserved.',
legal: 'Legal Notice',
privacy: 'Privacy',
},
},
nl: {
nav: {
solution: 'Oplossing',
features: 'Functies',
audience: 'Doelgroep',
login: 'Inloggen',
demo: 'Demo aanvragen',
},
mobileMenu: {
home: 'HOME',
solution: 'OPLOSSING',
features: 'FUNCTIES',
audience: 'DOELGROEP',
contact: 'CONTACT',
login: 'INLOGGEN',
demo: 'DEMO AANVRAGEN',
},
hero: {
badge: 'Technologie ten dienste van de bezoekerservaring',
titleBefore: 'MyInfoMate - De eenvoudige oplossing om ',
titleHighlight: 'interactieve content',
titleAfter: ' te maken, beheren en verspreiden',
subtitle: 'Transformeer de ervaring van uw bezoekers. Beheer uw routes op tablets en mobiele telefoons in real time, zonder technische kennis.',
cta: 'Demo aanvragen',
},
mockup: {
mapTitle: 'Interactieve Kaart',
mapSubtitle: 'Ontdekkingsroute',
agenda: 'Agenda',
tours: 'Bezoeken',
},
strategic: {
sectionLabel: 'Strategische Punten',
sectionTitle: 'Technologie ten dienste van de bezoekerservaring',
feature1Title: 'Directe updates',
feature1Desc: 'Wijzig uw bezoekerroutes, teksten en media direct vanuit uw browser.',
feature2Title: 'Nul ontwikkeling',
feature2Desc: 'Maak professionele applicaties zonder één regel code te schrijven. Alles is visueel.',
feature3Title: 'Offline content',
feature3Desc: 'Laat uw bezoekers alle of een deel van uw routes downloaden voor vlot bekijken ook zonder internet.',
feature4Title: 'Centraal Beheer (CMS)',
feature4Desc: 'Één tool om al uw digitale apparaten en tabletflottes te beheren.',
},
deployment: {
sectionLabel: 'Implementatiemodi',
sectionTitle: 'Eén platform, meerdere oplossingen',
sectionDesc: 'Kies de meest geschikte distributiemodus voor uw locatie en bezoekers. MyInfoMate past zich aan alle terminals aan.',
mode1Title: 'Mobiele App (BYOD)',
mode1Desc: 'Bezoekers gebruiken hun eigen smartphone om vrij toegang te krijgen tot uw routes.',
mode2Title: 'Kioskmodus (Tablet)',
mode2Desc: 'Robuuste oplossing vooraf geïnstalleerd op uw tabletflottes voor een begeleide en gecontroleerde ervaring.',
mode3Title: 'Webapplicatie',
mode3Desc: 'Direct toegankelijk vanuit elke moderne browser, zonder voorafgaande installatie.',
mode4Title: 'VR & AR Innovatie',
mode4Desc: 'Bereid u voor op de toekomst met meeslepende ervaringen op Meta Quest en verbonden brillen.',
comingSoon: 'Binnenkort',
},
modules: {
sectionLabel: 'Functies & Modules',
sectionTitle: 'Module Verkenner',
sectionDesc: 'Duik in de mogelijkheden van MyInfoMate. Ontdek hoe elke module de ervaring van uw bezoekers transformeert.',
valueLabel: 'Toegevoegde waarde:',
items: [
{
title: 'Kaarten & Plannen',
description: "Ultra-nauwkeurige interactieve cartografie om uw bezoekers te begeleiden. Realtime geolocatie, klikbare interessante punten en soepele navigatie.",
value: 'Verbeter de oriëntatie en verhoog de bezoekerssatisfactie.',
},
{
title: 'Spelen & Quiz',
description: 'Transformeer het bezoek in een speelse avontuur. Schattenjachten, kennisquizzen en gamified routes om de aandacht van al uw bezoekers te vangen.',
value: 'Verhoog betrokkenheid en bezoekersretentie.',
},
{
title: 'Audio & Video',
description: "Stream uw HD-multimediainhoud zonder latentie. Meeslepende audiogidsen, video's en getuigenissen in één klik toegankelijk.",
value: 'Verrijk de bezoekerservaring via multimedia.',
},
{
title: 'Artikelen & PDF',
description: 'Bied comfortabel lezen van uw inhoud. Beschrijvende fiches, PDF-brochures en gedigitaliseerde catalogi.',
value: 'Digitaliseer uw papieren materialen zonder kwaliteitsverlies.',
},
{
title: 'Agenda & Evenementen',
description: 'Beheer uw programma dynamisch. Evenementen, conferenties of workshops: uw bezoekers missen niets meer.',
value: 'Optimaliseer het bezoek aan uw activiteiten.',
},
{
title: 'Offline Toegang',
description: 'Elimineer dode zones. Laat automatisch downloaden van inhoud toe voor soepel bladeren ook zonder 4G/Wifi.',
value: 'Garandeer continue service overal op uw locatie.',
},
{
title: 'Web & Sociale Content',
description: 'Integreer het beste van het web. Formulieren, sociale netwerken of externe links: open uw app voor de wereld.',
value: 'Verbind uw digitaal ecosysteem op één plek.',
},
{
title: 'Statistieken & Data',
description: 'Analyseer het gedrag van uw bezoekers. Populaire inhoud, leestijd en betrokkenheid: stuur op basis van gegevens.',
value: 'Neem weloverwogen beslissingen op basis van werkelijk gebruik.',
},
],
},
whitelabel: {
sectionLabel: 'White label',
title: 'Uw merk, uw applicatie. Niet het onze.',
desc: "Profiteer van een complete <strong>White Label</strong>-oplossing. Pas de interface aan met de kleuren van uw locatie, gebruik uw eigen logo en typografie voor een totale onderdompeling van uw bezoekers in uw universum.",
item1: 'Volledige aanpassing van interfaces',
item2: 'Uw logo op het startscherm',
item3: 'Op maat gemaakte typografieën en iconografieën',
cta: 'Ontdek aanpassing',
colorPalette: 'Kleurenpalet',
themeApplied: 'Thema Succesvol Toegepast',
},
audience: {
title: 'Een oplossing ontworpen voor u',
subtitle: 'Of u nu een kleine galerie of een nationaal monument bent, MyInfoMate past zich aan uw behoeften aan.',
item1Title: 'Musea & Galerijen',
item1Desc: 'Digitaliseer uw collecties en maak boeiende multimediale gidsen voor uw vaste en tijdelijke tentoonstellingen.',
item2Title: 'VVV-kantoren',
item2Desc: 'Begeleid bezoekers door uw stad of regio met interactieve kaarten en geogelokaliseerde bezienswaardigheden.',
item3Title: 'Hotels & Vrije Tijd',
item3Desc: 'Bied uw klanten een premium ervaring: services, activiteiten, interactieve locatiekaart en gepersonaliseerde aanbevelingen.',
},
cta: {
titleBefore: 'Klaar om uw ',
titleHighlight: 'bezoekerservaring',
titleAfter: ' te transformeren?',
subtitle: 'Sluit u aan bij tientallen locaties die MyInfoMate vertrouwen om hun bezoekers te betrekken.',
button1: 'Gratis demo aanvragen',
button2: 'Neem contact op',
},
contact: {
sectionLabel: 'Contact & Demo',
title: 'Klaar om het avontuur te beginnen?',
subtitle: 'Vul dit formulier in en we nemen contact met u op voor een gepersonaliseerde demo.',
successTitle: 'Bericht verzonden!',
successDesc: 'Bedankt voor uw interesse. We nemen zo snel mogelijk contact met u op.',
successButton: 'Nog een bericht sturen',
errorMsg: 'Er is een fout opgetreden. Probeer het opnieuw of neem rechtstreeks contact met ons op via e-mail.',
firstNameLabel: 'Voornaam',
firstNamePlaceholder: 'Jan',
lastNameLabel: 'Achternaam',
lastNamePlaceholder: 'Janssen',
emailLabel: 'E-mail',
emailPlaceholder: 'jan.janssen@gmail.be',
messageLabel: 'Uw bericht (facultatief)',
messagePlaceholder: 'Vertel ons over uw project...',
submitButton: 'Mijn aanvraag verzenden',
},
footer: {
desc: 'De SaaS-oplossing voor de digitalisering van uw locaties. Creativiteit en technologie ten dienste van de bezoekerservaring.',
contactTitle: 'Contact',
copyright: '© 2026 MyInfoMate. Alle rechten voorbehouden.',
legal: 'Wettelijke vermeldingen',
privacy: 'Privacy',
},
},
de: {
nav: {
solution: 'Lösung',
features: 'Funktionen',
audience: 'Zielgruppe',
login: 'Anmelden',
demo: 'Demo anfordern',
},
mobileMenu: {
home: 'STARTSEITE',
solution: 'LÖSUNG',
features: 'FUNKTIONEN',
audience: 'ZIELGRUPPE',
contact: 'KONTAKT',
login: 'ANMELDEN',
demo: 'DEMO ANFORDERN',
},
hero: {
badge: 'Technologie im Dienst des Besuchererlebnisses',
titleBefore: 'MyInfoMate - Die einfache Lösung zur Erstellung, Verwaltung und Verbreitung von ',
titleHighlight: 'interaktiven Inhalten',
titleAfter: '',
subtitle: 'Transformieren Sie das Erlebnis Ihrer Besucher. Verwalten Sie Ihre Touren auf Tablets und Mobilgeräten in Echtzeit, ohne technische Kenntnisse.',
cta: 'Demo anfordern',
},
mockup: {
mapTitle: 'Interaktive Karte',
mapSubtitle: 'Entdeckungsroute',
agenda: 'Agenda',
tours: 'Besichtigungen',
},
strategic: {
sectionLabel: 'Strategische Punkte',
sectionTitle: 'Technologie im Dienst des Besuchererlebnisses',
feature1Title: 'Sofortige Updates',
feature1Desc: 'Bearbeiten Sie Ihre Besucherrouten, Texte und Medien sofort über Ihren Browser.',
feature2Title: 'Null Entwicklung',
feature2Desc: 'Erstellen Sie professionelle Anwendungen ohne eine einzige Zeile Code zu schreiben. Alles ist visuell.',
feature3Title: 'Offline-Inhalte',
feature3Desc: 'Erlauben Sie Ihren Besuchern, alle oder einen Teil Ihrer Touren herunterzuladen, um sie auch ohne Internet reibungslos anzuzeigen.',
feature4Title: 'Zentrale Verwaltung (CMS)',
feature4Desc: 'Ein einziges Tool zur Verwaltung aller Ihrer digitalen Geräte und Tablet-Flotten.',
},
deployment: {
sectionLabel: 'Einsatzmodi',
sectionTitle: 'Eine Plattform, mehrere Lösungen',
sectionDesc: 'Wählen Sie den am besten geeigneten Übertragungsmodus für Ihren Standort und Ihre Besucher. MyInfoMate passt sich allen Endgeräten an.',
mode1Title: 'Mobile App (BYOD)',
mode1Desc: 'Besucher nutzen ihr eigenes Smartphone, um frei auf Ihre Touren zuzugreifen.',
mode2Title: 'Kiosk-Modus (Tablet)',
mode2Desc: 'Robuste Lösung, die auf Ihren Tablet-Flotten vorinstalliert ist, für ein geführtes und kontrolliertes Erlebnis.',
mode3Title: 'Webanwendung',
mode3Desc: 'Sofort über jeden modernen Browser zugänglich, ohne vorherige Installation.',
mode4Title: 'VR & AR Innovation',
mode4Desc: 'Bereiten Sie sich auf die Zukunft mit immersiven Erlebnissen auf Meta Quest und vernetzten Brillen vor.',
comingSoon: 'Bald',
},
modules: {
sectionLabel: 'Funktionen & Module',
sectionTitle: 'Modul-Explorer',
sectionDesc: 'Tauchen Sie in die Möglichkeiten von MyInfoMate ein. Entdecken Sie, wie jedes Modul das Erlebnis Ihrer Besucher transformiert.',
valueLabel: 'Mehrwert:',
items: [
{
title: 'Karten & Pläne',
description: 'Ultra-präzise interaktive Kartierung zur Führung Ihrer Besucher. Echtzeit-Geolokalisierung, klickbare Sehenswürdigkeiten und flüssige Navigation.',
value: 'Verbessern Sie die Orientierung und steigern Sie die Besucherzufriedenheit.',
},
{
title: 'Spiele & Quiz',
description: 'Verwandeln Sie den Besuch in ein spielerisches Abenteuer. Schatzsuchen, Wissensquizze und Gamified-Touren, um die Aufmerksamkeit all Ihrer Besucher zu gewinnen.',
value: 'Steigern Sie Engagement und Besucherbindung.',
},
{
title: 'Audio & Video',
description: 'Streamen Sie Ihre HD-Multimedia-Inhalte ohne Latenz. Immersive Audioguides, Videos und Testimonials in einem Klick zugänglich.',
value: 'Bereichern Sie das Besuchererlebnis durch Multimedia.',
},
{
title: 'Artikel & PDF',
description: 'Bieten Sie eine komfortable Lektüre Ihrer Inhalte. Beschreibungsblätter, PDF-Broschüren und digitalisierte Kataloge.',
value: 'Digitalisieren Sie Ihre Papiermaterialien ohne Qualitätsverlust.',
},
{
title: 'Agenda & Veranstaltungen',
description: 'Verwalten Sie Ihr Programm dynamisch. Veranstaltungen, Konferenzen oder Workshops: Ihre Besucher verpassen nichts mehr.',
value: 'Optimieren Sie den Besuch Ihrer Aktivitäten.',
},
{
title: 'Offline-Zugang',
description: 'Beseitigen Sie tote Zonen. Ermöglichen Sie den automatischen Download von Inhalten für reibungsloses Surfen auch ohne 4G/WLAN.',
value: 'Garantieren Sie einen kontinuierlichen Service überall auf Ihrem Gelände.',
},
{
title: 'Web- & Social-Inhalte',
description: 'Integrieren Sie das Beste des Webs. Formulare, soziale Netzwerke oder externe Links: Öffnen Sie Ihre App für die Welt.',
value: 'Verbinden Sie Ihr digitales Ökosystem an einem Ort.',
},
{
title: 'Statistiken & Daten',
description: 'Analysieren Sie das Verhalten Ihrer Besucher. Beliebte Inhalte, Lesezeit und Engagement: Steuern Sie durch Daten.',
value: 'Treffen Sie fundierte Entscheidungen auf Basis der tatsächlichen Nutzung.',
},
],
},
whitelabel: {
sectionLabel: 'White Label',
title: 'Ihre Marke, Ihre Anwendung. Nicht unsere.',
desc: "Profitieren Sie von einer vollständigen <strong>White-Label</strong>-Lösung. Passen Sie die Benutzeroberfläche an die Farben Ihres Standorts an, verwenden Sie Ihr eigenes Logo und Ihre Typografie für ein vollständiges Eintauchen Ihrer Besucher in Ihr Universum.",
item1: 'Vollständige Anpassung der Benutzeroberflächen',
item2: 'Ihr Logo auf dem Startbildschirm',
item3: 'Maßgeschneiderte Typografien und Ikonografien',
cta: 'Anpassung entdecken',
colorPalette: 'Farbpalette',
themeApplied: 'Thema erfolgreich angewendet',
},
audience: {
title: 'Eine Lösung, die für Sie konzipiert wurde',
subtitle: 'Ob kleine Galerie oder nationales Denkmal, MyInfoMate passt sich Ihren Bedürfnissen an.',
item1Title: 'Museen & Galerien',
item1Desc: 'Digitalisieren Sie Ihre Sammlungen und erstellen Sie fesselnde Multimedia-Guides für Ihre Dauer- und Wechselausstellungen.',
item2Title: 'Tourismusbüros',
item2Desc: 'Führen Sie Besucher durch Ihre Stadt oder Region mit interaktiven Karten und geolokalisierten Sehenswürdigkeiten.',
item3Title: 'Hotels & Freizeit',
item3Desc: 'Bieten Sie Ihren Kunden ein Premium-Erlebnis: Services, Aktivitäten, interaktive Standortkarte und personalisierte Empfehlungen.',
},
cta: {
titleBefore: 'Bereit, Ihr ',
titleHighlight: 'Besuchererlebnis',
titleAfter: ' zu transformieren?',
subtitle: 'Schließen Sie sich Dutzenden von Standorten an, die MyInfoMate vertrauen, um ihre Besucher einzubinden.',
button1: 'Kostenlose Demo anfordern',
button2: 'Kontaktieren Sie uns',
},
contact: {
sectionLabel: 'Kontakt & Demo',
title: 'Bereit, das Abenteuer zu beginnen?',
subtitle: 'Füllen Sie dieses Formular aus und wir melden uns für eine personalisierte Demo.',
successTitle: 'Nachricht gesendet!',
successDesc: 'Vielen Dank für Ihr Interesse. Wir werden uns sehr bald bei Ihnen melden.',
successButton: 'Eine weitere Nachricht senden',
errorMsg: 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut oder kontaktieren Sie uns direkt per E-Mail.',
firstNameLabel: 'Vorname',
firstNamePlaceholder: 'Hans',
lastNameLabel: 'Nachname',
lastNamePlaceholder: 'Müller',
emailLabel: 'E-Mail',
emailPlaceholder: 'hans.mueller@gmail.de',
messageLabel: 'Ihre Nachricht (optional)',
messagePlaceholder: 'Erzählen Sie uns von Ihrem Projekt...',
submitButton: 'Meine Anfrage senden',
},
footer: {
desc: 'Die SaaS-Lösung für die Digitalisierung Ihrer Standorte. Kreativität und Technologie im Dienst des Besuchererlebnisses.',
contactTitle: 'Kontakt',
copyright: '© 2026 MyInfoMate. Alle Rechte vorbehalten.',
legal: 'Rechtliche Hinweise',
privacy: 'Datenschutz',
},
},
};
export default translations;
export type Translations = typeof translations.fr;