// HomePage.jsx — Follows reference screenshot layout const HomeHero = () => { const t = useT(); return (
); }; const HomeIntro = ({ go }) => { const t = useT(); const videoRef = React.useRef(null); React.useEffect(() => { const video = videoRef.current; if (!video) return; const src = 'https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8'; let hls; const nativeHls = video.canPlayType('application/vnd.apple.mpegurl') === 'probably'; const tryPlay = () => { const p = video.play(); if (p && p.catch) p.catch(() => {}); }; if (nativeHls) { video.src = src; video.addEventListener('loadedmetadata', tryPlay, { once: true }); } else if (window.Hls && window.Hls.isSupported()) { hls = new window.Hls({ lowLatencyMode: false }); hls.loadSource(src); hls.attachMedia(video); hls.on(window.Hls.Events.MANIFEST_PARSED, tryPlay); } else { video.src = src; video.addEventListener('loadedmetadata', tryPlay, { once: true }); } video.addEventListener('canplay', tryPlay); return () => { video.removeEventListener('canplay', tryPlay); if (hls) hls.destroy(); }; }, []); return (
); }; const StatCard = ({ s, i }) => { const [hover, setHover] = React.useState(false); const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: '48px 36px 48px 0', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.2)' : 'none', paddingLeft: i > 0 ? 48 : 0, transformOrigin: i === 0 ? 'left center' : (i === 2 ? 'right center' : 'center center'), transform: hover ? 'scale(1.06)' : 'scale(1)', transition: `transform 480ms ${EASE}`, cursor: 'default', }} >
{s.v}{s.unit}

{s.label}

); }; const HomeStats = () => { const t = useT(); const stats = [ { v: '10', unit: t('home.stats.1.unit'), label: t('home.stats.1.label') }, { v: '>3', unit: t('home.stats.2.unit'), label: t('home.stats.2.label') }, { v: '>3€', unit: t('home.stats.3.unit'), label: t('home.stats.3.label') }, ]; return (
{t('home.stats.eyebrow')}

{t('home.stats.title.a')}{t('home.stats.title.em')}{t('home.stats.title.b')}

{stats.map((s, i) => )}
); }; // Image placeholder tile — cinematic monochrome wash (no real imagery) // Optionally takes a video URL to render an autoplaying muted loop instead of the static gradient. const ImageTile = ({ tone = 'dark', label, video }) => { const videoRef = React.useRef(null); const [hover, setHover] = React.useState(false); const [isTouch, setIsTouch] = React.useState(false); React.useEffect(() => { if (typeof window !== 'undefined' && window.matchMedia) { const mq = window.matchMedia('(hover: none)'); const update = () => setIsTouch(mq.matches); update(); if (mq.addEventListener) mq.addEventListener('change', update); else mq.addListener(update); return () => { if (mq.removeEventListener) mq.removeEventListener('change', update); else mq.removeListener(update); }; } }, []); React.useEffect(() => { const v = videoRef.current; if (!video || !v) return; if (isTouch || hover) { const p = v.play(); if (p && p.catch) p.catch(() => {}); } else { v.pause(); try { v.currentTime = 0; } catch (e) {} } }, [hover, video, isTouch]); const edgeFadeMask = 'radial-gradient(ellipse 78% 75% at 50% 50%, #000 38%, rgba(0,0,0,0.85) 62%, transparent 100%)'; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden', background: 'transparent', cursor: video ? 'pointer' : 'default', }} > {video && (