1025 lines
61 KiB
TypeScript
1025 lines
61 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
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; name: string }[] = [
|
|
{ code: 'fr', label: 'FR', name: 'Français' },
|
|
{ code: 'en', label: 'EN', name: 'English' },
|
|
{ code: 'nl', label: 'NL', name: 'Nederlands' },
|
|
{ code: 'de', label: 'DE', name: 'Deutsch' },
|
|
];
|
|
|
|
export default function Home() {
|
|
const [formData, setFormData] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
message: ''
|
|
});
|
|
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
const [activeModule, setActiveModule] = useState(0);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [lang, setLang] = useState<Language>('fr');
|
|
const [isLangOpen, setIsLangOpen] = useState(false);
|
|
const langDropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
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
|
|
useEffect(() => {
|
|
if (isMenuOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
return () => { document.body.style.overflow = 'auto'; };
|
|
}, [isMenuOpen]);
|
|
|
|
// Update html lang attribute
|
|
useEffect(() => {
|
|
document.documentElement.lang = lang;
|
|
}, [lang]);
|
|
|
|
// Close lang dropdown on outside click
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (langDropdownRef.current && !langDropdownRef.current.contains(e.target as Node)) {
|
|
setIsLangOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, []);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus('loading');
|
|
|
|
try {
|
|
const response = await fetch("https://formspree.io/f/xbdaajlo", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Accept": "application/json"
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
setStatus('success');
|
|
setFormData({ firstName: '', lastName: '', email: '', message: '' });
|
|
} else {
|
|
setStatus('error');
|
|
}
|
|
} catch (error) {
|
|
setStatus('error');
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const scrollToContact = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
return (
|
|
<main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
|
|
{/* Top Navigation */}
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<a className="flex items-center gap-3 shrink-0" href="#">
|
|
<img
|
|
src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
|
|
alt="MyInfoMate Logo"
|
|
className="h-10 w-auto object-contain"
|
|
/>
|
|
<span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
|
|
</a>
|
|
<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-[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>
|
|
</nav>
|
|
<div className="flex items-center gap-4">
|
|
<a
|
|
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"
|
|
>
|
|
{t.nav.login}
|
|
</a>
|
|
<button
|
|
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"
|
|
>
|
|
{t.nav.demo}
|
|
</button>
|
|
{/* Language selector - desktop */}
|
|
<div ref={langDropdownRef} className="relative hidden lg:block">
|
|
<button
|
|
onClick={() => setIsLangOpen(!isLangOpen)}
|
|
className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-bold text-slate-500 hover:text-slate-900 hover:bg-slate-100 transition-all"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px] text-primary">language</span>
|
|
<span>{lang.toUpperCase()}</span>
|
|
<span className={`material-symbols-outlined text-[16px] transition-transform duration-200 ${isLangOpen ? 'rotate-180' : ''}`}>keyboard_arrow_down</span>
|
|
</button>
|
|
{isLangOpen && (
|
|
<div className="absolute top-full right-0 mt-2 bg-white border border-slate-100 rounded-2xl shadow-xl overflow-hidden py-1.5 z-50">
|
|
{LANGUAGES.map((l) => (
|
|
<button
|
|
key={l.code}
|
|
onClick={() => { setLang(l.code); setIsLangOpen(false); }}
|
|
className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${lang === l.code ? 'text-primary bg-primary/5' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
|
>
|
|
<span className="text-sm font-black w-7 shrink-0">{l.label}</span>
|
|
<span className="text-sm text-slate-400 whitespace-nowrap">{l.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"
|
|
>
|
|
<span className="material-symbols-outlined text-3xl">
|
|
{isMenuOpen ? 'close' : 'menu'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
{/* Mobile Menu Backdrop */}
|
|
<div
|
|
className={`lg:hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[150] transition-opacity duration-300 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
/>
|
|
|
|
{/* Mobile Menu Sidebar */}
|
|
<div className={`lg:hidden fixed inset-y-0 right-0 w-[300px] h-screen bg-white z-[200] shadow-2xl transition-transform duration-500 ease-in-out transform ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
|
<div className="flex flex-col h-full bg-white">
|
|
{/* Close Button Header */}
|
|
<div className="flex justify-end p-6 border-b border-slate-50">
|
|
<button
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors"
|
|
aria-label="Fermer le menu"
|
|
>
|
|
<span className="material-symbols-outlined text-3xl font-bold text-slate-900">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto scrollbar-hide">
|
|
<div className="flex flex-col gap-6">
|
|
{[
|
|
{ label: t.mobileMenu.home, href: '#' },
|
|
{ label: t.mobileMenu.solution, href: '#deployment-modes' },
|
|
{ label: t.mobileMenu.features, href: '#features' },
|
|
{ label: t.mobileMenu.ai, href: '#ai-assistant' },
|
|
{ label: t.mobileMenu.audience, href: '#audience' },
|
|
{ label: t.mobileMenu.contact, href: '#contact' }
|
|
].map((item) => (
|
|
<a
|
|
key={item.label}
|
|
className="text-sm font-bold tracking-[0.2em] text-slate-900 hover:text-primary transition-colors py-3 border-b border-slate-50 flex items-center justify-between"
|
|
href={item.href}
|
|
onClick={() => {
|
|
if (item.href === '#') {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} else if (item.href.startsWith('#')) {
|
|
const el = document.querySelector(item.href);
|
|
if (el) { el.scrollIntoView({ behavior: 'smooth' }); }
|
|
}
|
|
setIsMenuOpen(false);
|
|
}}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Language selector - mobile */}
|
|
<div className="flex flex-col gap-1.5">
|
|
{LANGUAGES.map((l) => (
|
|
<button
|
|
key={l.code}
|
|
onClick={() => setLang(l.code)}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-xl border-2 transition-all text-left ${lang === l.code ? 'bg-primary/5 border-primary text-primary' : 'border-slate-100 text-slate-600 hover:border-slate-300'}`}
|
|
>
|
|
<span className="text-xs font-black w-6">{l.label}</span>
|
|
<span className="text-sm font-medium">{l.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-auto py-8 flex flex-col gap-4">
|
|
<a
|
|
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"
|
|
>
|
|
{t.mobileMenu.login}
|
|
</a>
|
|
<button
|
|
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"
|
|
>
|
|
{t.mobileMenu.demo}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-20">
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden py-20 lg:py-32">
|
|
<div className="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-primary/5 to-transparent blur-3xl"></div>
|
|
<div className="absolute -bottom-20 -left-20 -z-10 w-80 h-80 bg-accent-violet/5 rounded-full blur-3xl"></div>
|
|
<div className="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-16">
|
|
<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">
|
|
<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
{t.hero.badge}
|
|
</div>
|
|
<h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8">
|
|
{t.hero.titleBefore}<span className="gradient-text">{t.hero.titleHighlight}</span>{t.hero.titleAfter}
|
|
</h1>
|
|
<p className="text-lg text-slate-600 leading-relaxed mb-10 max-w-2xl mx-auto lg:mx-0">
|
|
{t.hero.subtitle}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
|
|
<button
|
|
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"
|
|
>
|
|
{t.hero.cta}
|
|
<span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 relative w-full mt-12 lg:mt-0">
|
|
{/* UI Mockup Group - Improved for Mobile */}
|
|
<div className="relative w-full aspect-[4/3] sm:aspect-video lg:aspect-[4/3] max-w-xl mx-auto">
|
|
{/* Interactive Map Tablet Preview */}
|
|
<div className="absolute top-0 left-0 w-full h-full lg:h-[85%] bg-slate-900 rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-800 z-10 transform lg:-rotate-2">
|
|
<img
|
|
src={resolveImage("{{DATA:IMAGE:IMAGE_4}}")}
|
|
alt="Modern Interactive Map Interface"
|
|
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">
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase">{t.mockup.mapTitle}</p>
|
|
<p className="text-xs font-extrabold text-slate-900">{t.mockup.mapSubtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Agenda Mobile Preview - Hidden or repositioned on very small screens */}
|
|
<div className="hidden sm:block absolute -bottom-6 -left-6 lg:-bottom-10 lg:-left-10 w-1/3 aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-30 transform rotate-3 overflow-hidden">
|
|
<div className="h-full bg-slate-50 flex flex-col">
|
|
<div className="p-2 lg:p-3 bg-accent-violet text-white text-center">
|
|
<p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.agenda}</p>
|
|
</div>
|
|
<div className="p-2 space-y-2 overflow-hidden flex-1">
|
|
<div className="rounded-lg overflow-hidden h-12 lg:h-16 bg-slate-200 relative">
|
|
<img src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="Mockup 1" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="h-2 w-3/4 bg-slate-200 rounded"></div>
|
|
<div className="h-2 w-1/2 bg-slate-100 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
|
|
</div>
|
|
|
|
{/* Tours Mobile Preview */}
|
|
<div className="absolute -bottom-4 -right-4 lg:-bottom-6 lg:-right-6 w-1/3 lg:w-[35%] aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-20 transform -rotate-6 overflow-hidden">
|
|
<div className="h-full flex flex-col">
|
|
<div className="p-2 lg:p-3 bg-primary text-slate-900 text-center">
|
|
<p className="text-[8px] lg:text-[10px] font-bold uppercase">{t.mockup.tours}</p>
|
|
</div>
|
|
<div className="p-2 space-y-2 flex-1">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="w-8 h-8 lg:w-10 lg:h-10 rounded-lg bg-slate-200 relative overflow-hidden">
|
|
<img src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="Mockup 2" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="h-1.5 w-12 bg-slate-200 rounded"></div>
|
|
<div className="h-1 w-8 bg-slate-100 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Strategic Points */}
|
|
<section className="py-24 bg-white" id="points">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-20">
|
|
<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">{t.strategic.sectionTitle}</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{/* Feature 1 */}
|
|
<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">
|
|
<span className="material-symbols-outlined text-3xl">sync</span>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature1Title}</h4>
|
|
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
|
|
</div>
|
|
{/* 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="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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature2Title}</h4>
|
|
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
|
|
</div>
|
|
{/* 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="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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature3Title}</h4>
|
|
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
|
|
</div>
|
|
{/* 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="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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature4Title}</h4>
|
|
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Deployment Modes Section */}
|
|
<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="text-center mb-16">
|
|
<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">{t.deployment.sectionTitle}</h3>
|
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
{t.deployment.sectionDesc}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{/* Mode 1: Mobile BYOD */}
|
|
<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-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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode1Title}</h4>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode1Desc}</p>
|
|
</div>
|
|
{/* 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="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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode2Title}</h4>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode2Desc}</p>
|
|
</div>
|
|
{/* 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="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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.deployment.mode3Title}</h4>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode3Desc}</p>
|
|
</div>
|
|
{/* 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="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">{t.deployment.comingSoon}</span>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<h4 className="text-xl font-extrabold mb-4">{t.deployment.mode4Title}</h4>
|
|
<p className="text-slate-400 text-sm leading-relaxed">{t.deployment.mode4Desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Interactive Modules Section (Module Explorer) */}
|
|
<section className="py-24 bg-white" id="features">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<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">{t.modules.sectionTitle}</h3>
|
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
{t.modules.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
|
|
{/* Sidebar (Tabs) */}
|
|
<div className="w-full lg:w-1/3 relative">
|
|
<div className="lg:hidden absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
|
|
<div className="lg:hidden absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>
|
|
<div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x">
|
|
{modules.map((module, index) => (
|
|
<button
|
|
key={module.id}
|
|
onClick={() => setActiveModule(index)}
|
|
onMouseEnter={() => setActiveModule(index)}
|
|
className={`flex items-center gap-3 lg:gap-4 px-5 py-4 lg:px-6 lg:py-5 rounded-2xl border-2 transition-all text-left whitespace-nowrap lg:whitespace-normal snap-center flex-shrink-0 lg:flex-shrink-1 w-auto lg:w-full ${activeModule === index
|
|
? 'bg-rose-50 border-rose-200 text-rose-600 shadow-sm'
|
|
: 'bg-white border-slate-100 text-slate-500 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
<span className={`material-symbols-outlined text-xl lg:text-2xl ${activeModule === index ? 'text-rose-600' : 'text-slate-400'}`}>
|
|
{module.icon}
|
|
</span>
|
|
<span className="font-bold text-xs lg:text-base">{module.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Display */}
|
|
<div className="flex-1 w-full lg:flex lg:flex-col">
|
|
|
|
{/* Mobile: single centered card */}
|
|
<div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
|
|
<div className="text-center mb-6">
|
|
<div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-4 font-bold gap-2 items-center">
|
|
<span className="material-symbols-outlined">{modules[activeModule].icon}</span>
|
|
<span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
|
|
</div>
|
|
<h3 className="text-2xl font-black text-slate-900 mb-4 leading-tight">{modules[activeModule].title}</h3>
|
|
<p className="text-slate-600 leading-relaxed mb-6">{modules[activeModule].description}</p>
|
|
<div className="p-4 bg-rose-600/5 border border-rose-100 rounded-2xl">
|
|
<p className="text-rose-600 font-bold text-sm flex items-center justify-center gap-2">
|
|
<span className="material-symbols-outlined text-base">verified</span>
|
|
{modules[activeModule].value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<div className="relative w-[200px] h-[420px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-800 rounded-b-2xl z-20"></div>
|
|
<div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
|
|
<div className="h-full flex flex-col pt-7">
|
|
<header className="h-12 border-b border-slate-100 flex items-center px-3 bg-white/80 sticky top-0 z-10">
|
|
<div className="w-7 h-7 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
|
|
<span className="material-symbols-outlined text-base">{modules[activeModule].icon}</span>
|
|
</div>
|
|
<span className="ml-2 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
|
|
</header>
|
|
<div className="p-3 flex-1 space-y-3">
|
|
<div className="h-32 rounded-xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
|
|
<span className="material-symbols-outlined text-4xl text-slate-300">{modules[activeModule].icon}</span>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
|
|
</div>
|
|
<div className="h-2 w-full bg-slate-100 rounded-full"></div>
|
|
<div className="h-2 w-2/3 bg-slate-100 rounded-full"></div>
|
|
<div className="h-14 w-full bg-slate-50 border border-slate-100 rounded-xl p-2 flex gap-2">
|
|
<div className="w-8 h-8 rounded-lg bg-rose-200 shrink-0"></div>
|
|
<div className="space-y-1 flex-1">
|
|
<div className="h-1.5 w-full bg-slate-200 rounded-full"></div>
|
|
<div className="h-1.5 w-1/2 bg-slate-200 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="h-8 bg-slate-100 rounded-lg"></div>
|
|
<div className="h-8 bg-rose-600 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop: original layout + enobase-style 3D phone stack */}
|
|
<div className="hidden lg:flex flex-1 bg-slate-50 rounded-[3rem] p-10 border border-slate-100 gap-10 items-center">
|
|
{/* Description */}
|
|
<div className="flex-1 relative z-10 text-left">
|
|
<div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-5 font-bold gap-2 items-center">
|
|
<span className="material-symbols-outlined">{modules[activeModule].icon}</span>
|
|
<span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
|
|
</div>
|
|
<h3 className="text-3xl font-black text-slate-900 mb-5 leading-tight">{modules[activeModule].title}</h3>
|
|
<p className="text-slate-600 text-base leading-relaxed mb-6">{modules[activeModule].description}</p>
|
|
<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">
|
|
<span className="material-symbols-outlined text-base">verified</span>
|
|
{t.modules.valueLabel} {modules[activeModule].value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enobase-style 3D horizontal perspective phone stack */}
|
|
<div className="flex-shrink-0 relative" style={{ width: '280px', height: '480px' }}>
|
|
<div style={{ position: 'absolute', inset: 0, transform: 'perspective(900px) rotateX(6deg) rotateY(-15deg)' }}>
|
|
{modules.map((module, index) => {
|
|
const deckPos = (index - activeModule + modules.length) % modules.length;
|
|
const isActive = deckPos === 0;
|
|
return (
|
|
<div
|
|
key={module.id}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
transformOrigin: 'top left',
|
|
transform: `translateX(${deckPos * 12}px) scale(${1 - deckPos * 0.06})`,
|
|
zIndex: modules.length - deckPos,
|
|
opacity: isActive ? 1 : Math.max(0.06, 0.55 - deckPos * 0.1),
|
|
transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
}}
|
|
>
|
|
<div className={`relative w-[240px] h-[480px] rounded-[3rem] border-[8px] overflow-hidden ${isActive ? 'bg-slate-900 border-slate-800 shadow-2xl shadow-rose-500/20' : 'bg-slate-800 border-slate-700 shadow-xl'}`}>
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-slate-800 rounded-b-2xl z-20"></div>
|
|
<div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
|
|
<div className="h-full flex flex-col pt-8">
|
|
<header className="h-14 border-b border-slate-100 flex items-center px-4 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
|
|
<div className="w-8 h-8 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
|
|
<span className="material-symbols-outlined text-lg">{module.icon}</span>
|
|
</div>
|
|
<span className="ml-3 font-bold text-xs text-slate-900 truncate">{module.title}</span>
|
|
</header>
|
|
<div className="p-4 flex-1 space-y-4">
|
|
<div className="h-36 rounded-2xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
|
|
<span className="material-symbols-outlined text-5xl text-slate-300">{module.icon}</span>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
|
|
</div>
|
|
<div className="h-3 w-full bg-slate-100 rounded-full"></div>
|
|
<div className="h-3 w-2/3 bg-slate-100 rounded-full"></div>
|
|
<div className="h-20 w-full bg-slate-50 border border-slate-100 rounded-xl p-3 flex gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-rose-200 shrink-0"></div>
|
|
<div className="space-y-2 flex-1">
|
|
<div className="h-2 w-full bg-slate-200 rounded-full"></div>
|
|
<div className="h-2 w-1/2 bg-slate-200 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="h-10 bg-slate-100 rounded-xl"></div>
|
|
<div className="h-10 bg-rose-600 rounded-xl"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 */}
|
|
<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="flex flex-col lg:flex-row items-center gap-20">
|
|
<div className="flex-1 order-2 lg:order-1">
|
|
<div className="relative max-w-md mx-auto">
|
|
<div className="bg-white p-6 rounded-3xl shadow-xl border border-slate-200 transform -rotate-3 hover:rotate-0 transition-transform duration-500">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-8 h-8 rounded-full bg-accent-orange"></div>
|
|
<div className="h-4 w-32 bg-slate-100 rounded-full"></div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="h-40 bg-slate-50 rounded-2xl flex items-center justify-center overflow-hidden border border-dashed border-slate-200">
|
|
<span className="material-symbols-outlined text-slate-300 text-5xl">palette</span>
|
|
</div>
|
|
<div className="h-4 w-full bg-slate-100 rounded-full"></div>
|
|
<div className="h-4 w-2/3 bg-slate-100 rounded-full"></div>
|
|
<div className="flex gap-2 pt-2">
|
|
<div className="h-10 flex-1 bg-accent-orange rounded-full"></div>
|
|
<div className="h-10 flex-1 bg-slate-900 rounded-full"></div>
|
|
</div>
|
|
</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="flex flex-col gap-2">
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase">{t.whitelabel.colorPalette}</p>
|
|
<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-accent-violet"></div>
|
|
<div className="w-full aspect-square rounded-lg bg-accent-orange"></div>
|
|
<div className="w-full aspect-square rounded-lg bg-slate-900"></div>
|
|
</div>
|
|
<div className="mt-4 p-2 bg-primary/10 rounded-xl text-center">
|
|
<p className="text-[10px] text-primary font-bold">{t.whitelabel.themeApplied}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 order-1 lg:order-2">
|
|
<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">{t.whitelabel.title}</h3>
|
|
<p className="text-lg text-slate-600 leading-relaxed mb-8" dangerouslySetInnerHTML={{ __html: t.whitelabel.desc }} />
|
|
<ul className="space-y-4 mb-10 text-slate-700 font-semibold">
|
|
<li className="flex items-center gap-3">
|
|
<span className="material-symbols-outlined text-accent-orange">check_circle</span>
|
|
{t.whitelabel.item1}
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="material-symbols-outlined text-accent-orange">check_circle</span>
|
|
{t.whitelabel.item2}
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="material-symbols-outlined text-accent-orange">check_circle</span>
|
|
{t.whitelabel.item3}
|
|
</li>
|
|
</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">
|
|
{t.whitelabel.cta}
|
|
<span className="material-symbols-outlined">brush</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Target Audience */}
|
|
<section className="py-24 bg-white" id="audience">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">{t.audience.title}</h3>
|
|
<p className="text-slate-600 max-w-2xl mx-auto">{t.audience.subtitle}</p>
|
|
</div>
|
|
<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="w-24 h-24 icon-circle mb-6 text-accent-violet">
|
|
<span className="material-symbols-outlined text-5xl">museum</span>
|
|
</div>
|
|
<h4 className="text-2xl font-bold mb-3">{t.audience.item1Title}</h4>
|
|
<p className="text-slate-600 text-sm">{t.audience.item1Desc}</p>
|
|
</div>
|
|
<div className="text-center p-6 flex flex-col items-center">
|
|
<div className="w-24 h-24 icon-circle mb-6 text-primary">
|
|
<span className="material-symbols-outlined text-5xl">travel_explore</span>
|
|
</div>
|
|
<h4 className="text-2xl font-bold mb-3">{t.audience.item2Title}</h4>
|
|
<p className="text-slate-600 text-sm">{t.audience.item2Desc}</p>
|
|
</div>
|
|
<div className="text-center p-6 flex flex-col items-center">
|
|
<div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
|
|
<span className="material-symbols-outlined text-5xl">hotel</span>
|
|
</div>
|
|
<h4 className="text-2xl font-bold mb-3">{t.audience.item3Title}</h4>
|
|
<p className="text-slate-600 text-sm">{t.audience.item3Desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="py-20 bg-slate-50">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-[3rem] p-12 lg:p-24 text-center relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
|
<div className="absolute top-10 left-10 w-40 h-40 bg-primary 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>
|
|
<h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-8 relative z-10">
|
|
{t.cta.titleBefore}<span className="text-primary">{t.cta.titleHighlight}</span>{t.cta.titleAfter}
|
|
</h2>
|
|
<p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10">
|
|
{t.cta.subtitle}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
|
|
<button
|
|
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"
|
|
>
|
|
{t.cta.button1}
|
|
</button>
|
|
<a
|
|
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"
|
|
>
|
|
{t.cta.button2}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Form Section */}
|
|
<section className="py-24 bg-white relative overflow-hidden" id="contact">
|
|
<div className="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-0 left-0 -z-10 w-96 h-96 bg-accent-violet/5 rounded-full blur-3xl"></div>
|
|
|
|
<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="text-center mb-12">
|
|
<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">{t.contact.title}</h3>
|
|
<p className="text-slate-600">{t.contact.subtitle}</p>
|
|
</div>
|
|
|
|
{status === 'success' ? (
|
|
<div className="text-center py-20">
|
|
<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>
|
|
</div>
|
|
<h3 className="text-3xl font-extrabold text-slate-900 mb-4">{t.contact.successTitle}</h3>
|
|
<p className="text-slate-600 mb-8">{t.contact.successDesc}</p>
|
|
<button
|
|
onClick={() => setStatus('idle')}
|
|
className="text-primary font-bold hover:underline"
|
|
>
|
|
{t.contact.successButton}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{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">
|
|
<span className="material-symbols-outlined text-sm">error</span>
|
|
{t.contact.errorMsg}
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-bold text-slate-700 ml-1">{t.contact.firstNameLabel}</label>
|
|
<input
|
|
type="text"
|
|
name="firstName"
|
|
required
|
|
value={formData.firstName}
|
|
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"
|
|
placeholder={t.contact.firstNamePlaceholder}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-bold text-slate-700 ml-1">{t.contact.lastNameLabel}</label>
|
|
<input
|
|
type="text"
|
|
name="lastName"
|
|
required
|
|
value={formData.lastName}
|
|
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"
|
|
placeholder={t.contact.lastNamePlaceholder}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-bold text-slate-700 ml-1">{t.contact.emailLabel}</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
required
|
|
value={formData.email}
|
|
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"
|
|
placeholder={t.contact.emailPlaceholder}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-bold text-slate-700 ml-1">{t.contact.messageLabel}</label>
|
|
<textarea
|
|
name="message"
|
|
rows={4}
|
|
value={formData.message}
|
|
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"
|
|
placeholder={t.contact.messagePlaceholder}
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={status === 'loading'}
|
|
className={`w-full py-5 bg-slate-900 text-white font-extrabold rounded-2xl shadow-xl hover:bg-slate-800 transition-all flex items-center justify-center gap-3 group ${status === 'loading' ? 'opacity-70 cursor-not-allowed' : ''}`}
|
|
>
|
|
{status === 'loading' ? (
|
|
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
|
|
) : (
|
|
<>
|
|
{t.contact.submitButton}
|
|
<span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-slate-50 pt-20 pb-10 border-t border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
|
|
<div className="col-span-1 lg:col-span-1">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<img
|
|
src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
|
|
alt="MyInfoMate Logo"
|
|
className="h-8 w-auto object-contain"
|
|
/>
|
|
<span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
|
|
</div>
|
|
<p className="text-slate-500 text-sm leading-relaxed mb-6">
|
|
{t.footer.desc}
|
|
</p>
|
|
<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="#">
|
|
<span className="material-symbols-outlined">public</span>
|
|
</a>
|
|
<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="mailto:contact@unov.be">
|
|
<span className="material-symbols-outlined">alternate_email</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{/* <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Produit</h4>
|
|
<ul className="space-y-4">
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Fonctionnalités</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Marque Blanche</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">CMS Centralisé</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Tarifs</a></li>
|
|
</ul> */}
|
|
</div>
|
|
<div>
|
|
{/* <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Entreprise</h4>
|
|
<ul className="space-y-4">
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">À propos</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Blog</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Partenaires</a></li>
|
|
<li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Contact</a></li>
|
|
</ul> */}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">{t.footer.contactTitle}</h4>
|
|
<ul className="space-y-4">
|
|
<li className="flex items-start gap-3 text-sm text-slate-500">
|
|
<span className="material-symbols-outlined text-primary text-sm">location_on</span>
|
|
UNOV, 5020 Vedrin
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-slate-500">
|
|
<span className="material-symbols-outlined text-primary text-sm">mail</span>
|
|
contact@unov.be
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-slate-500">
|
|
<span className="material-symbols-outlined text-primary text-sm">call</span>
|
|
+32 (0)498 07 95 35
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<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">{t.footer.copyright}</p>
|
|
<div className="flex gap-8">
|
|
<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="#">{t.footer.privacy}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
);
|
|
}
|