/* Hi-fi — Hero block with 3 variants * 1. Dashboard (default) — split layout w/ live KPI dashboard * 2. Terminal — full-width terminal feed * 3. Pipeline ledger — animated bars + signal stream */ const Hero = ({ variant, lang, tone, accent }) => { const t = COPY[lang]; const heroCopy = tone === 'fun' ? { ...t.hero, ...t.fun } : t.hero; return (
{variant === 'dashboard' && } {variant === 'terminal' && } {variant === 'ledger' && }
); }; // ----------------- Hero variant 1 — split + dashboard const MobileMetricTicker = ({ metrics }) => { const [idx, setIdx] = useState(0); const [visible, setVisible] = useState(true); useEffect(() => { const id = setInterval(() => { setVisible(false); setTimeout(() => { setIdx(i => (i + 1) % metrics.length); setVisible(true); }, 320); }, 2600); return () => clearInterval(id); }, [metrics.length]); const m = metrics[idx]; return (
{m.v} {m.l}
); }; const HeroDashboard = ({ t, h }) => { return (

{h.h1a}
{h.h1b} {h.h1mark}{h.h1c}

{h.sub}

{h.ctaA} → { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }} style={{ padding: '14px 22px', fontSize: 16, cursor: 'pointer' }}>{h.ctaB}
{[0,1,2,3,4].map(i => (
))}

{h.proof}

); }; // ----------------- Dashboard mockup with live counters + scrolling feed const DashboardMockup = () => { const [pipeline, setPipeline] = useState(847234); const [meetings, setMeetings] = useState(23); const [reply, setReply] = useState(14.3); useEffect(() => { const id = setInterval(() => { setPipeline(p => p + Math.floor(Math.random() * 1200)); if (Math.random() > 0.7) setMeetings(m => m + 1); setReply(r => Math.max(11.5, Math.min(16.5, r + (Math.random() - 0.5) * 0.4))); }, 2200); return () => clearInterval(id); }, []); return (
{/* glow */}
{/* header */}
upscale / pipeline · Q2 live
{/* big metric */}

Pipeline généré

€{pipeline.toLocaleString('fr-FR')} +74%
{/* sparkline */}
{/* 3 mini metrics */}
{[ { l: 'RDV bookés', v: meetings, delta: '+3' }, { l: 'Reply rate', v: reply.toFixed(1) + '%', delta: '+2.1', accent: true }, { l: 'Délivrabilité', v: '97.2%', delta: 'stable' }, ].map((m, i) => (

{m.l}

{m.v}

{m.delta}

))}
{/* live feed */}

Signaux · live

); }; // ----------------- Scrolling signal feed const FEED_ITEMS = [ { sig: 'funding_round', co: 'Acme Robotics', det: '$12M Series A', score: '+18' }, { sig: 'new_vp_sales', co: 'Pylon SaaS', det: 'ex-Datadog', score: '+22' }, { sig: 'hiring_sales', co: 'Lumen Health', det: '2 BDRs · SF', score: '+14' }, { sig: 'stack_swap', co: 'Northwind', det: 'HS → Salesforce', score: '+16' }, { sig: 'champion → cro', co: 'Forge.ai', det: 'ex-champ now CRO', score: '+24' }, { sig: 'soc2_obtained', co: 'Vault Systems', det: 'press release', score: '+9' }, { sig: 'product_launch', co: 'Beacon', det: 'PH #2 today', score: '+12' }, { sig: 'job_change', co: 'Helix', det: 'CMO ex-Cleaq', score: '+19' }, ]; const ScrollingFeed = () => { const [items, setItems] = useState(FEED_ITEMS.slice(0, 4)); const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => { setTick(t => t + 1); setItems(prev => { const next = FEED_ITEMS[(tick + 4) % FEED_ITEMS.length]; return [{ ...next, _id: Date.now() }, ...prev.slice(0, 3)]; }); }, 2400); return () => clearInterval(id); }, [tick]); return (
{items.map((r, i) => (
{r.sig} {r.co} {r.det} {r.score}
))}
); }; // ----------------- Hero variant 2 — Terminal const HeroTerminal = ({ t, h }) => { return (

{h.h2a}
{h.h2b} {h.h2mark}{h.h2c}

{h.sub}

{h.ctaA} → { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }} style={{ padding: '14px 22px', fontSize: 16, cursor: 'pointer' }}>{h.ctaB}
{t.metrics.map((m, i) => (
{m.v} {m.l}
))}
{/* — désactivée temporairement, réactiver quand prête */}
); }; // ----------------- Hero video — Tella embed const HeroVideo = () => { return (