Add IA assistant info

This commit is contained in:
Thomas Fransolet 2026-03-13 17:45:29 +01:00
parent 784e859157
commit caddc5d0c9
2 changed files with 201 additions and 0 deletions

View File

@ -123,6 +123,10 @@ export default function Home() {
<nav className="hidden lg:flex items-center gap-8"> <nav className="hidden lg:flex items-center gap-8">
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[80px] text-center" href="#deployment-modes">{t.nav.solution}</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[80px] text-center" href="#deployment-modes">{t.nav.solution}</a>
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[128px] text-center" href="#features">{t.nav.features}</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[128px] text-center" href="#features">{t.nav.features}</a>
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors flex items-center gap-1" href="#ai-assistant">
<span className="material-symbols-outlined text-primary" style={{fontSize:'15px'}}>auto_awesome</span>
{t.nav.ai}
</a>
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[88px] text-center" href="#audience">{t.nav.audience}</a> <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[88px] text-center" href="#audience">{t.nav.audience}</a>
</nav> </nav>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -202,6 +206,7 @@ export default function Home() {
{ label: t.mobileMenu.home, href: '#' }, { label: t.mobileMenu.home, href: '#' },
{ label: t.mobileMenu.solution, href: '#deployment-modes' }, { label: t.mobileMenu.solution, href: '#deployment-modes' },
{ label: t.mobileMenu.features, href: '#features' }, { label: t.mobileMenu.features, href: '#features' },
{ label: t.mobileMenu.ai, href: '#ai-assistant' },
{ label: t.mobileMenu.audience, href: '#audience' }, { label: t.mobileMenu.audience, href: '#audience' },
{ label: t.mobileMenu.contact, href: '#contact' } { label: t.mobileMenu.contact, href: '#contact' }
].map((item) => ( ].map((item) => (
@ -608,6 +613,106 @@ export default function Home() {
</div> </div>
</section> </section>
{/* AI Assistant */}
<section className="py-24 bg-slate-900 relative overflow-hidden" id="ai-assistant">
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-20 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
<div className="absolute bottom-20 right-1/4 w-80 h-80 bg-accent-violet/10 rounded-full blur-3xl"></div>
</div>
<div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/30 text-primary text-xs font-extrabold uppercase tracking-widest px-4 py-2 rounded-full mb-6 animate-float">
<span className="material-symbols-outlined text-sm">auto_awesome</span>
{t.ai.badge}
</div>
<h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">{t.ai.sectionLabel}</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-white leading-tight mb-6">
{t.ai.titleBefore}<span className="gradient-text">{t.ai.titleHighlight}</span>{t.ai.titleAfter}
</h3>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">{t.ai.desc}</p>
</div>
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
{/* Chat mockup */}
<div className="w-full lg:w-auto flex justify-center">
<div className="w-full max-w-xs bg-slate-800 rounded-3xl border border-slate-700 shadow-2xl shadow-primary/10 overflow-hidden">
<div className="flex items-center gap-3 p-4 border-b border-slate-700">
<div className="w-9 h-9 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
<span className="material-symbols-outlined text-primary" style={{fontSize:'18px'}}>smart_toy</span>
</div>
<div className="min-w-0">
<p className="text-white text-sm font-bold truncate">{t.ai.mockupName}</p>
<p className="text-primary text-xs">{t.ai.mockupOnline}</p>
</div>
<div className="ml-auto w-2 h-2 bg-primary rounded-full animate-pulse shrink-0"></div>
</div>
<div className="p-4 space-y-3 min-h-56">
<div className="flex gap-2 items-end">
<div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
<span className="material-symbols-outlined text-primary" style={{fontSize:'14px'}}>smart_toy</span>
</div>
<div className="bg-slate-700 text-slate-200 text-sm px-4 py-2.5 rounded-2xl rounded-bl-sm max-w-[85%] leading-relaxed">
{t.ai.mockupMsg1}
</div>
</div>
<div className="flex justify-end">
<div className="bg-primary text-slate-900 text-sm px-4 py-2.5 rounded-2xl rounded-br-sm max-w-[85%] font-semibold leading-relaxed">
{t.ai.mockupMsg2}
</div>
</div>
<div className="flex gap-2 items-end">
<div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
<span className="material-symbols-outlined text-primary" style={{fontSize:'14px'}}>smart_toy</span>
</div>
<div className="bg-slate-700 text-slate-200 text-sm px-4 py-2.5 rounded-2xl rounded-bl-sm max-w-[85%] leading-relaxed">
{t.ai.mockupMsg3}
</div>
</div>
</div>
<div className="p-4 border-t border-slate-700">
<div className="flex items-center gap-2 bg-slate-700/60 rounded-full px-4 py-2.5 border border-slate-600">
<p className="text-slate-500 text-sm flex-1 truncate">{t.ai.mockupInputPlaceholder}</p>
<div className="w-7 h-7 bg-primary rounded-full flex items-center justify-center shrink-0">
<span className="material-symbols-outlined text-slate-900" style={{fontSize:'16px'}}>send</span>
</div>
</div>
</div>
</div>
</div>
{/* Features grid */}
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
<div className="w-11 h-11 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
<span className="material-symbols-outlined text-primary">translate</span>
</div>
<h4 className="text-white font-bold mb-2">{t.ai.feature1Title}</h4>
<p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature1Desc}</p>
</div>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-violet/40 transition-colors group">
<div className="w-11 h-11 bg-accent-violet/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-accent-violet/20 transition-colors">
<span className="material-symbols-outlined text-accent-violet">manage_search</span>
</div>
<h4 className="text-white font-bold mb-2">{t.ai.feature2Title}</h4>
<p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature2Desc}</p>
</div>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-orange/40 transition-colors group">
<div className="w-11 h-11 bg-accent-orange/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-accent-orange/20 transition-colors">
<span className="material-symbols-outlined text-accent-orange">forum</span>
</div>
<h4 className="text-white font-bold mb-2">{t.ai.feature3Title}</h4>
<p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature3Desc}</p>
</div>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group">
<div className="w-11 h-11 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
<span className="material-symbols-outlined text-primary">tune</span>
</div>
<h4 className="text-white font-bold mb-2">{t.ai.feature4Title}</h4>
<p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature4Desc}</p>
</div>
</div>
</div>
</div>
</section>
{/* White Label / Value Proposition */} {/* White Label / Value Proposition */}
<section className="py-24 bg-slate-50 border-y border-slate-100 relative overflow-hidden" id="whitelabel"> <section className="py-24 bg-slate-50 border-y border-slate-100 relative overflow-hidden" id="whitelabel">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">

View File

@ -5,6 +5,7 @@ const translations = {
nav: { nav: {
solution: 'Solution', solution: 'Solution',
features: 'Fonctionnalités', features: 'Fonctionnalités',
ai: 'Assistant IA',
audience: 'Public', audience: 'Public',
login: 'Connexion', login: 'Connexion',
demo: 'Demander une démo', demo: 'Demander une démo',
@ -13,6 +14,7 @@ const translations = {
home: 'ACCUEIL', home: 'ACCUEIL',
solution: 'SOLUTION', solution: 'SOLUTION',
features: 'FONCTIONNALITÉS', features: 'FONCTIONNALITÉS',
ai: 'ASSISTANT IA',
audience: 'PUBLIC', audience: 'PUBLIC',
contact: 'CONTACT', contact: 'CONTACT',
login: 'CONNEXION', login: 'CONNEXION',
@ -106,6 +108,28 @@ const translations = {
}, },
], ],
}, },
ai: {
badge: 'Nouveau',
sectionLabel: 'Assistant IA',
titleBefore: 'Votre guide intelligent, ',
titleHighlight: 'intégré à votre app',
titleAfter: '',
desc: "Offrez à vos visiteurs un guide virtuel disponible 24h/24. Alimenté par l'IA générative, il répond à leurs questions, les oriente dans vos parcours et valorise chaque contenu — dans leur langue.",
mockupName: 'Assistant MyInfoMate',
mockupOnline: 'En ligne',
mockupMsg1: "Bonjour ! Je suis votre guide virtuel. Comment puis-je vous aider ?",
mockupMsg2: "Où se trouve la salle des impressionnistes ?",
mockupMsg3: "Elle se situe au 1er étage, section B. Je peux vous en dire plus sur les œuvres exposées si vous le souhaitez !",
mockupInputPlaceholder: 'Posez votre question...',
feature1Title: 'Multilingue',
feature1Desc: "L'assistant répond dans la langue du visiteur — français, anglais, néerlandais, allemand et bien d'autres.",
feature2Title: 'Connaissance du contenu',
feature2Desc: "Il connaît vos sections et détaille chaque point d'intérêt, exposition ou service sur demande.",
feature3Title: 'Conversation naturelle',
feature3Desc: "Contexte mémorisé tout au long de la visite pour des échanges fluides et cohérents.",
feature4Title: 'Scopé à votre lieu',
feature4Desc: "Chaque lieu a son propre assistant, limité strictement à vos contenus. Aucune dérive hors sujet.",
},
whitelabel: { whitelabel: {
sectionLabel: 'White label', sectionLabel: 'White label',
title: 'Votre marque, votre application. Pas la nôtre.', title: 'Votre marque, votre application. Pas la nôtre.',
@ -166,6 +190,7 @@ const translations = {
nav: { nav: {
solution: 'Solution', solution: 'Solution',
features: 'Features', features: 'Features',
ai: 'AI Assistant',
audience: 'Audience', audience: 'Audience',
login: 'Login', login: 'Login',
demo: 'Request a demo', demo: 'Request a demo',
@ -174,6 +199,7 @@ const translations = {
home: 'HOME', home: 'HOME',
solution: 'SOLUTION', solution: 'SOLUTION',
features: 'FEATURES', features: 'FEATURES',
ai: 'AI ASSISTANT',
audience: 'AUDIENCE', audience: 'AUDIENCE',
contact: 'CONTACT', contact: 'CONTACT',
login: 'LOGIN', login: 'LOGIN',
@ -267,6 +293,28 @@ const translations = {
}, },
], ],
}, },
ai: {
badge: 'New',
sectionLabel: 'AI Assistant',
titleBefore: 'Your intelligent guide, ',
titleHighlight: 'built into your app',
titleAfter: '',
desc: "Give your visitors a virtual guide available 24/7. Powered by generative AI, it answers their questions, guides them through your tours and highlights every piece of content — in their language.",
mockupName: 'MyInfoMate Assistant',
mockupOnline: 'Online',
mockupMsg1: "Hello! I'm your virtual guide. How can I help you?",
mockupMsg2: "Where is the Impressionist room?",
mockupMsg3: "It's on the 1st floor, section B. I can tell you more about the works on display if you'd like!",
mockupInputPlaceholder: 'Ask your question...',
feature1Title: 'Multilingual',
feature1Desc: "The assistant responds in the visitor's language — French, English, Dutch, German and many more.",
feature2Title: 'Content-aware',
feature2Desc: 'It knows your sections and can detail each point of interest, exhibition or service on request.',
feature3Title: 'Natural conversation',
feature3Desc: 'Context remembered throughout the visit for smooth and coherent exchanges.',
feature4Title: 'Scoped to your venue',
feature4Desc: 'Each venue has its own assistant, strictly limited to your content. No off-topic drift.',
},
whitelabel: { whitelabel: {
sectionLabel: 'White label', sectionLabel: 'White label',
title: 'Your brand, your app. Not ours.', title: 'Your brand, your app. Not ours.',
@ -327,6 +375,7 @@ const translations = {
nav: { nav: {
solution: 'Oplossing', solution: 'Oplossing',
features: 'Functies', features: 'Functies',
ai: 'AI-assistent',
audience: 'Doelgroep', audience: 'Doelgroep',
login: 'Inloggen', login: 'Inloggen',
demo: 'Demo aanvragen', demo: 'Demo aanvragen',
@ -335,6 +384,7 @@ const translations = {
home: 'HOME', home: 'HOME',
solution: 'OPLOSSING', solution: 'OPLOSSING',
features: 'FUNCTIES', features: 'FUNCTIES',
ai: 'AI-ASSISTENT',
audience: 'DOELGROEP', audience: 'DOELGROEP',
contact: 'CONTACT', contact: 'CONTACT',
login: 'INLOGGEN', login: 'INLOGGEN',
@ -428,6 +478,28 @@ const translations = {
}, },
], ],
}, },
ai: {
badge: 'Nieuw',
sectionLabel: 'AI-assistent',
titleBefore: 'Uw intelligente gids, ',
titleHighlight: 'geïntegreerd in uw app',
titleAfter: '',
desc: "Bied uw bezoekers een virtuele gids die 24/7 beschikbaar is. Aangedreven door generatieve AI beantwoordt hij hun vragen, begeleidt hen door uw routes en licht elke inhoud toe — in hun taal.",
mockupName: 'MyInfoMate Assistent',
mockupOnline: 'Online',
mockupMsg1: 'Hallo! Ik ben uw virtuele gids. Hoe kan ik u helpen?',
mockupMsg2: 'Waar bevindt zich de zaal van de impressionisten?',
mockupMsg3: 'Die bevindt zich op de 1e verdieping, sectie B. Ik kan u meer vertellen over de tentoongestelde werken als u dat wilt!',
mockupInputPlaceholder: 'Stel uw vraag...',
feature1Title: 'Meertalig',
feature1Desc: 'De assistent antwoordt in de taal van de bezoeker — Frans, Engels, Nederlands, Duits en nog veel meer.',
feature2Title: 'Inhoudsbewust',
feature2Desc: 'Hij kent uw secties en kan elke bezienswaardigheid, tentoonstelling of dienst op verzoek toelichten.',
feature3Title: 'Natuurlijk gesprek',
feature3Desc: 'Context onthouden gedurende het hele bezoek voor soepele en coherente uitwisselingen.',
feature4Title: 'Afgestemd op uw locatie',
feature4Desc: 'Elke locatie heeft zijn eigen assistent, strikt beperkt tot uw inhoud. Geen afdwaling.',
},
whitelabel: { whitelabel: {
sectionLabel: 'White label', sectionLabel: 'White label',
title: 'Uw merk, uw applicatie. Niet het onze.', title: 'Uw merk, uw applicatie. Niet het onze.',
@ -488,6 +560,7 @@ const translations = {
nav: { nav: {
solution: 'Lösung', solution: 'Lösung',
features: 'Funktionen', features: 'Funktionen',
ai: 'KI-Assistent',
audience: 'Zielgruppe', audience: 'Zielgruppe',
login: 'Anmelden', login: 'Anmelden',
demo: 'Demo anfordern', demo: 'Demo anfordern',
@ -496,6 +569,7 @@ const translations = {
home: 'STARTSEITE', home: 'STARTSEITE',
solution: 'LÖSUNG', solution: 'LÖSUNG',
features: 'FUNKTIONEN', features: 'FUNKTIONEN',
ai: 'KI-ASSISTENT',
audience: 'ZIELGRUPPE', audience: 'ZIELGRUPPE',
contact: 'KONTAKT', contact: 'KONTAKT',
login: 'ANMELDEN', login: 'ANMELDEN',
@ -589,6 +663,28 @@ const translations = {
}, },
], ],
}, },
ai: {
badge: 'Neu',
sectionLabel: 'KI-Assistent',
titleBefore: 'Ihr intelligenter Führer, ',
titleHighlight: 'in Ihre App integriert',
titleAfter: '',
desc: "Bieten Sie Ihren Besuchern einen virtuellen Führer, der rund um die Uhr verfügbar ist. Angetrieben von generativer KI beantwortet er ihre Fragen, führt sie durch Ihre Touren und stellt jeden Inhalt vor — in ihrer Sprache.",
mockupName: 'MyInfoMate Assistent',
mockupOnline: 'Online',
mockupMsg1: 'Hallo! Ich bin Ihr virtueller Führer. Wie kann ich Ihnen helfen?',
mockupMsg2: 'Wo befindet sich der Impressionistensaal?',
mockupMsg3: 'Er befindet sich im 1. Obergeschoss, Abschnitt B. Ich kann Ihnen weitere Details zu den ausgestellten Werken geben, wenn Sie möchten!',
mockupInputPlaceholder: 'Stellen Sie Ihre Frage...',
feature1Title: 'Mehrsprachig',
feature1Desc: 'Der Assistent antwortet in der Sprache des Besuchers — Französisch, Englisch, Niederländisch, Deutsch und viele mehr.',
feature2Title: 'Inhaltsbewusst',
feature2Desc: 'Er kennt Ihre Abschnitte und kann jeden Sehenswürdigkeitspunkt, jede Ausstellung oder jeden Service auf Anfrage detaillieren.',
feature3Title: 'Natürliches Gespräch',
feature3Desc: 'Kontext wird während des gesamten Besuchs gespeichert für reibungslose und kohärente Gespräche.',
feature4Title: 'Auf Ihren Standort zugeschnitten',
feature4Desc: 'Jeder Standort hat seinen eigenen Assistenten, strikt auf Ihre Inhalte begrenzt. Kein Abdriften vom Thema.',
},
whitelabel: { whitelabel: {
sectionLabel: 'White Label', sectionLabel: 'White Label',
title: 'Ihre Marke, Ihre Anwendung. Nicht unsere.', title: 'Ihre Marke, Ihre Anwendung. Nicht unsere.',