// splash-hero.jsx — sticky nav + hero panel // Both light and dark variants. Variant chosen by hero prop. function Nav({ dark, onJoinClick }) { const navColor = dark ? baux.bone : baux.navy; const border = dark ? baux.white12 : baux.navy12; const [scrolled, setScrolled] = React.useState(false); const isMobile = useIsMobile(); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ──────────────────────────────────────────────────────────────────────────── function Hero({ dark, onJoinClick, onSubmitEmail }) { const fg = dark ? baux.bone : baux.navy; const fg2 = dark ? baux.white72 : baux.navy85; const fg3 = dark ? baux.white48 : baux.navy60; const accent = baux.gold; const bg = dark ? baux.navy : baux.bone; const isMobile = useIsMobile(); const isTablet = useIsTablet(); // size the hero phone to fit on narrow viewports const primaryPhone = isMobile ? 240 : (isTablet ? 280 : 340); const ghostPhone = isMobile ? 180 : (isTablet ? 220 : 260); return (
{/* stylized abstract street map */} {/* soft gold halo on right side */}
{/* LEFT */}

Travel with your own{' '} local{' '} guide.

BAUX is the world's only Place Intelligence platform — a place where every destination has a voice.

Be the first to hear the world.
No spam. One email when BAUX goes live.
{/* RIGHT — phone mock */}
{/* second phone, ghosted behind — scaled down on mobile */}
{/* primary phone */}
); } window.Nav = Nav; window.Hero = Hero;