// Landing, Cinematic Minecraft prologue (solarpunk imagination) // Sits at the very top of the page. Full-bleed image with slow Ken Burns, // soft vignette, eyebrow + slogan overlay, scroll cue. Smoothly fades into // the hero via a bottom gradient matching the page background. const Prologue = ({ onChoose, persona }) => { const [picking, setPicking] = React.useState(false); const PROFILES = [ { id: 'pilote', emoji: '🏡', label: "Je porte un lieu", sub: "Pilote d'impact" }, { id: 'batisseur', emoji: '🌿', label: "Je veux agir", sub: "Bâtisseur d'impact" }, { id: 'semeur', emoji: '🌾', label: "Je finance des projets", sub: "Semeur d'impact" }, ]; const pick = (id) => { if (typeof onChoose === 'function') onChoose(id); setPicking(false); document.getElementById('hero')?.scrollIntoView({ behavior: 'smooth' }); }; // Track scroll → tag with .over-prologue so NavBar can flip to // light-on-dark treatment while the cinematic scene fills the viewport. React.useEffect(() => { const update = () => { const stillOver = window.scrollY < window.innerHeight * 0.85; document.documentElement.classList.toggle('over-prologue', stillOver); }; update(); window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); document.documentElement.classList.remove('over-prologue'); }; }, []); return (
{/* Ken Burns image layer */}
{/* Vignette + bottom fade into page bg */}
{/* Soft radial accent top-right to echo brand glow */}
{/* Centered overlay content */}

L'écosystème régénératif de demain,
prend racine aujourd'hui

{/* Scroll cue */}
); }; window.Prologue = Prologue;