UNOV/myinfomate-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add claude.md + beautiful smooth animations on scroll

Browse Source
This commit is contained in:
Thomas Fransolet 2026-03-25 17:39:23 +01:00
parent caddc5d0c9
commit 8173049966
2 changed files with 115 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
CLAUDE.md Normal file
View File

@ -0,0 +1,33 @@
# myinfomate-landing
Site vitrine de la solution **MyInfoMate**.
## Stack
- Next.js 16 / React 19 / TypeScript
- Tailwind CSS v4
- Babel React Compiler
## Structure
```
src/
├── app/
│ ├── layout.tsx # Layout global, font "Plus Jakarta Sans"
│ ├── page.tsx # Page d'accueil (unique)
│ └── globals.css # Thème Tailwind v4
└── data/
├── translations.ts # Textes du site (i18n manuel)
└── stitch-images.ts # Assets Stitch (images de démo/présentation)
```
## Thème
- Couleur primaire : `#0df2df` (cyan)
- Accent violet : `#8b5cf6`, accent orange : `#f97316`
- Utilities custom : `gradient-text`, `icon-circle`, `glass-card`
- Animations : `float`, `fade-in`
## Commandes
```bash
npm run dev # Dev local
npm run build # Build production
npm run lint # ESLint
```

134
src/app/page.tsx
View File

@ -22,6 +22,36 @@ const LANGUAGES: { code: Language; label: string; name: string }[] = [
{ code: 'de', label: 'DE', name: 'Deutsch' }, { code: 'de', label: 'DE', name: 'Deutsch' },
]; ];
function Reveal({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
const ref = React.useRef<HTMLDivElement>(null);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) setVisible(true); },
{ threshold: 0.12 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
<div
ref={ref}
className={className}
style={{
opacity: visible ? 1 : 0,
transform: visible ? 'translateY(0)' : 'translateY(22px)',
transition: `opacity 0.55s ease-out ${delay}ms, transform 0.55s ease-out ${delay}ms`,
}}
>
{children}
</div>
);
}
export default function Home() { export default function Home() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: '', firstName: '',
@ -349,43 +379,43 @@ export default function Home() {
{/* Strategic Points */} {/* Strategic Points */}
<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"> <Reveal className="text-center mb-20">
<h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">{t.strategic.sectionLabel}</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">{t.strategic.sectionTitle}</h3> <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">{t.strategic.sectionTitle}</h3>
</div> </Reveal>
<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 */}
<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"> <Reveal delay={0}><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">sync</span> <span className="material-symbols-outlined text-3xl">sync</span>
</div> </div>
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature1Title}</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">{t.strategic.feature1Desc}</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={80}><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">{t.strategic.feature2Title}</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">{t.strategic.feature2Desc}</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={160}><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">{t.strategic.feature3Title}</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">{t.strategic.feature3Desc}</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={240}><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">{t.strategic.feature4Title}</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">{t.strategic.feature4Desc}</p> <p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
</div> </div></Reveal>
</div> </div>
</div> </div>
</section> </section>
@ -393,40 +423,40 @@ export default function Home() {
{/* Deployment Modes Section */} {/* Deployment Modes Section */}
<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"> <Reveal className="text-center mb-16">
<h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">{t.deployment.sectionLabel}</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">{t.deployment.sectionTitle}</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">
{t.deployment.sectionDesc} {t.deployment.sectionDesc}
</p> </p>
</div> </Reveal>
<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">
{/* Mode 1: Mobile BYOD */} {/* 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"> <Reveal delay={0}><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"> <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">{t.deployment.mode1Title}</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">{t.deployment.mode1Desc}</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode1Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={80}><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">{t.deployment.mode2Title}</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">{t.deployment.mode2Desc}</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode2Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={160}><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">{t.deployment.mode3Title}</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">{t.deployment.mode3Desc}</p> <p className="text-slate-600 text-sm leading-relaxed">{t.deployment.mode3Desc}</p>
</div> </div></Reveal>
{/* 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"> <Reveal delay={240}><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">{t.deployment.comingSoon}</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>
@ -435,7 +465,7 @@ export default function Home() {
</div> </div>
<h4 className="text-xl font-extrabold mb-4">{t.deployment.mode4Title}</h4> <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> <p className="text-slate-400 text-sm leading-relaxed">{t.deployment.mode4Desc}</p>
</div> </div></Reveal>
</div> </div>
</div> </div>
</section> </section>
@ -443,17 +473,17 @@ export default function Home() {
{/* Interactive Modules Section (Module Explorer) */} {/* Interactive Modules Section (Module Explorer) */}
<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"> <Reveal className="text-center mb-16">
<h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">{t.modules.sectionLabel}</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">{t.modules.sectionTitle}</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">
{t.modules.sectionDesc} {t.modules.sectionDesc}
</p> </p>
</div> </Reveal>
<div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch"> <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
{/* Sidebar (Tabs) */} {/* Sidebar (Tabs) */}
<div className="w-full lg:w-1/3 relative"> <Reveal delay={100} 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 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="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"> <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x">
@ -474,10 +504,10 @@ export default function Home() {
</button> </button>
))} ))}
</div> </div>
</div> </Reveal>
{/* Main Display */} {/* Main Display */}
<div className="flex-1 w-full lg:flex lg:flex-col"> <Reveal delay={200} className="flex-1 w-full lg:flex lg:flex-col">
{/* Mobile: single centered card */} {/* Mobile: single centered card */}
<div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden"> <div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
@ -608,7 +638,7 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </Reveal>
</div> </div>
</div> </div>
</section> </section>
@ -620,7 +650,7 @@ export default function Home() {
<div className="absolute bottom-20 right-1/4 w-80 h-80 bg-accent-violet/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>
<div className="max-w-7xl mx-auto px-6 relative z-10"> <div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="text-center mb-16"> <Reveal 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"> <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> <span className="material-symbols-outlined text-sm">auto_awesome</span>
{t.ai.badge} {t.ai.badge}
@ -630,10 +660,10 @@ export default function Home() {
{t.ai.titleBefore}<span className="gradient-text">{t.ai.titleHighlight}</span>{t.ai.titleAfter} {t.ai.titleBefore}<span className="gradient-text">{t.ai.titleHighlight}</span>{t.ai.titleAfter}
</h3> </h3>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">{t.ai.desc}</p> <p className="text-slate-400 text-lg max-w-2xl mx-auto">{t.ai.desc}</p>
</div> </Reveal>
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20"> <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
{/* Chat mockup */} {/* Chat mockup */}
<div className="w-full lg:w-auto flex justify-center"> <Reveal delay={80} 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="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="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"> <div className="w-9 h-9 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
@ -677,37 +707,37 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </Reveal>
{/* Features grid */} {/* Features grid */}
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5"> <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"> <Reveal delay={0}><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"> <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> <span className="material-symbols-outlined text-primary">translate</span>
</div> </div>
<h4 className="text-white font-bold mb-2">{t.ai.feature1Title}</h4> <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> <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature1Desc}</p>
</div> </div></Reveal>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-violet/40 transition-colors group"> <Reveal delay={80}><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"> <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> <span className="material-symbols-outlined text-accent-violet">manage_search</span>
</div> </div>
<h4 className="text-white font-bold mb-2">{t.ai.feature2Title}</h4> <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> <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature2Desc}</p>
</div> </div></Reveal>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-accent-orange/40 transition-colors group"> <Reveal delay={160}><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"> <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> <span className="material-symbols-outlined text-accent-orange">forum</span>
</div> </div>
<h4 className="text-white font-bold mb-2">{t.ai.feature3Title}</h4> <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> <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature3Desc}</p>
</div> </div></Reveal>
<div className="bg-slate-800/60 border border-slate-700 rounded-2xl p-6 hover:border-primary/40 transition-colors group"> <Reveal delay={240}><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"> <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> <span className="material-symbols-outlined text-primary">tune</span>
</div> </div>
<h4 className="text-white font-bold mb-2">{t.ai.feature4Title}</h4> <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> <p className="text-slate-400 text-sm leading-relaxed">{t.ai.feature4Desc}</p>
</div> </div></Reveal>
</div> </div>
</div> </div>
</div> </div>
@ -717,7 +747,7 @@ export default function Home() {
<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">
<div className="flex flex-col lg:flex-row items-center gap-20"> <div className="flex flex-col lg:flex-row items-center gap-20">
<div className="flex-1 order-2 lg:order-1"> <Reveal delay={0} className="flex-1 order-2 lg:order-1">
<div className="relative max-w-md mx-auto"> <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="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="flex items-center gap-3 mb-6">
@ -751,8 +781,8 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </Reveal>
<div className="flex-1 order-1 lg:order-2"> <Reveal delay={120} 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> <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> <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 }} /> <p className="text-lg text-slate-600 leading-relaxed mb-8" dangerouslySetInnerHTML={{ __html: t.whitelabel.desc }} />
@ -774,7 +804,7 @@ export default function Home() {
{t.whitelabel.cta} {t.whitelabel.cta}
<span className="material-symbols-outlined">brush</span> <span className="material-symbols-outlined">brush</span>
</button> </button>
</div> </Reveal>
</div> </div>
</div> </div>
</section> </section>
@ -782,32 +812,32 @@ export default function Home() {
{/* Target Audience */} {/* Target Audience */}
<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"> <Reveal className="text-center mb-16">
<h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">{t.audience.title}</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">{t.audience.subtitle}</p> <p className="text-slate-600 max-w-2xl mx-auto">{t.audience.subtitle}</p>
</div> </Reveal>
<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"> <Reveal delay={0}><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">{t.audience.item1Title}</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item1Title}</h4>
<p className="text-slate-600 text-sm">{t.audience.item1Desc}</p> <p className="text-slate-600 text-sm">{t.audience.item1Desc}</p>
</div> </div></Reveal>
<div className="text-center p-6 flex flex-col items-center"> <Reveal delay={80}><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">{t.audience.item2Title}</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item2Title}</h4>
<p className="text-slate-600 text-sm">{t.audience.item2Desc}</p> <p className="text-slate-600 text-sm">{t.audience.item2Desc}</p>
</div> </div></Reveal>
<div className="text-center p-6 flex flex-col items-center"> <Reveal delay={160}><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">{t.audience.item3Title}</h4> <h4 className="text-2xl font-bold mb-3">{t.audience.item3Title}</h4>
<p className="text-slate-600 text-sm">{t.audience.item3Desc}</p> <p className="text-slate-600 text-sm">{t.audience.item3Desc}</p>
</div> </div></Reveal>
</div> </div>
</div> </div>
</section> </section>
@ -815,7 +845,7 @@ export default function Home() {
{/* Final CTA */} {/* Final CTA */}
<section className="py-20 bg-slate-50"> <section className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-6"> <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"> <Reveal><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-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 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 className="absolute bottom-10 right-10 w-60 h-60 bg-accent-violet rounded-full blur-3xl"></div>
@ -840,7 +870,7 @@ export default function Home() {
{t.cta.button2} {t.cta.button2}
</a> </a>
</div> </div>
</div> </div></Reveal>
</div> </div>
</section> </section>