// ── Hero — Brandly-style editorial, locked to viewport (desktop) // + stacked composition on mobile so nothing overlaps. The composite // shifts focus on small screens so Soong stays visible, and the // corner content (top-right stat, bottom bio + date) reflows below // the headline on phones instead of colliding with the CTA. function useCountdown(targetIso) { const target = React.useMemo(() => new Date(targetIso).getTime(), [targetIso]); const [now, setNow] = React.useState(() => Date.now()); React.useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000 * 60); // minute tick return () => clearInterval(t); }, []); let diff = Math.max(0, target - now); const d = Math.floor(diff / 86400000); diff -= d * 86400000; const h = Math.floor(diff / 3600000); diff -= h * 3600000; const m = Math.floor(diff / 60000); return { d, h, m, isPast: now >= target }; } function Hero({ onCta }) { const cd = useCountdown("2026-06-21T14:00:00-03:00"); return (
{/* hero composite — image is the protagonist. On phones we shift background-position so Soong stays roughly centered instead of being cropped left. */}
{/* ── SOONG — foreground subject, anchored bottom-center over the composite (between the China map upper-left and Brazil map upper- right). PNG with transparent background; sits above the bg and below the gradient washes so he reads as the presenter on stage with the trade visual behind him. */}
Alexandre Soong
{/* ── DELIVERY ARC — animated China → Brasil overlay ──── */} {/* gradient washes (left + top/bottom + vignette + grain + bottom fade) */}
); } window.Hero = Hero;