// app.jsx — Connect waitlist landing // Single-file React/TS-style component, vanilla CSS classes for everything. const { useState, useEffect, useRef, useMemo, useCallback } = React; const STORAGE_KEY = 'connect_waitlist'; const LANG_KEY = 'connect_lang'; function useLang() { const [lang, setLangState] = useState(() => { try { const saved = localStorage.getItem(LANG_KEY); if (saved === 'en' || saved === 'zh') return saved; } catch (e) { /* ignore */ } return 'en'; }); const setLang = useCallback((next) => { setLangState(next); try { localStorage.setItem(LANG_KEY, next); } catch (e) { /* ignore */ } document.documentElement.lang = next === 'zh' ? 'zh-Hans' : 'en'; document.documentElement.setAttribute('data-lang', next); }, []); useEffect(() => { document.documentElement.lang = lang === 'zh' ? 'zh-Hans' : 'en'; document.documentElement.setAttribute('data-lang', lang); }, [lang]); return [lang, setLang]; } function useScrollIn(rootMargin = '0px 0px -10% 0px') { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }); }, { threshold: 0.12, rootMargin }); io.observe(el); return () => io.disconnect(); }, [rootMargin]); return [ref, seen]; } function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) { const [ref, seen] = useScrollIn(); return ( {children} ); } // ─── Logo (Connect mark) ────────────────────────────────────────────────── // Two coral nodes connected by a line, with a yellow "memory" dot at the link. function ConnectLogo({ size = 28 }) { return ( ); } // ─── Nav ────────────────────────────────────────────────────────────────── function Nav({ t, lang, setLang, onJoinClick }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 32); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ─── Hero ───────────────────────────────────────────────────────────────── function Hero({ t, lang }) { const [email, setEmail] = useState(''); const [state, setState] = useState('idle'); // idle | loading | success | error const [errMsg, setErrMsg] = useState(''); const inputRef = useRef(null); // Restore success state if user already joined useEffect(() => { try { const raw = localStorage.getItem(STORAGE_KEY); if (raw) { const parsed = JSON.parse(raw); if (parsed && parsed.email) { setEmail(parsed.email); setState('success'); } } } catch (e) { /* ignore */ } }, []); const validate = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); const onSubmit = (e) => { e.preventDefault(); if (state === 'success') return; if (!validate(email)) { setState('error'); setErrMsg(t.hero.error_email); return; } setState('loading'); setTimeout(() => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ email: email.trim(), lang, ts: Date.now(), })); } catch (err) { /* ignore */ } setState('success'); }, 600); }; return (
{t.hero.eyebrow} {t.hero.headline_a}{' '} {t.hero.headline_b} {t.hero.sub}
{ setEmail(e.target.value); if (state === 'error') setState('idle'); }} disabled={state === 'success' || state === 'loading'} aria-label={t.hero.email_placeholder} />
{state === 'error' && (
{errMsg}
)} {state === 'success' && (
{t.hero.success_title} {t.hero.success_sub}
)}
); } // Hero visual — the signature motif: a small live conversation that "becomes graph" function HeroVisual({ t }) { return (
connect now
Had lunch w/ Sasha at Bridgepoint. She intro'd me to Devon — he's the new CS lead. They're piloting Data Cloud.
Got it. Linked Sasha Iyer → Devon Hart as colleague at Bridgepoint, tagged Data Cloud pilot, surfaced 3 warm paths to Devon through your network.
› tell connect…
{/* sticker arrow from chat to graph */}
); } // ─── Problem ────────────────────────────────────────────────────────────── function Problem({ t }) { return (
{t.problem.eyebrow}

{t.problem.title}
{t.problem.cards.map((c, i) => (
0{i + 1}

{c.title}

{c.body}

 ))}
); } function ProblemGlyph({ idx }) { if (idx === 0) { // CRM form being abandoned return ( ); } if (idx === 1) { // person walking out with cloud/memory return ( ); } // who-knows-who, hidden path return ( ); } // ─── How it works ──────────────────────────────────────────────────────── function How({ t }) { return (
{t.how.eyebrow}

{t.how.title}
{t.how.steps.map((s, i) => (
{s.num}

{s.title}

{s.body}

 ))}
); } function HowGlyph({ idx, t }) { const v = (t && t.how && t.how.visual) || { vpc: 'Your VPC', sales: 'Sales Agent', research: 'Research Bot', llm: 'Internal LLM', mcp: 'MCP', connect: 'Connect', }; if (idx === 0) { // Chat with Connect — short bubbles, generous padding return ( ); } if (idx === 1) { return ( ); } return ( ); } // ─── Pricing ────────────────────────────────────────────────────────────── function Pricing({ t }) { return (
{t.pricing.eyebrow}

{t.pricing.title}

{t.pricing.sub}

{t.pricing.cta} →
); } // ─── Footer ─────────────────────────────────────────────────────────────── function Footer({ t, lang, setLang }) { return ( ); } // ─── App ────────────────────────────────────────────────────────────────── function App() { const [lang, setLang] = useLang(); const t = window.I18N[lang]; const onJoinClick = () => { const form = document.querySelector('.hero-form'); const input = document.querySelector('.hero-input'); const submit = document.querySelector('.hero-form .btn-primary'); if (form) { form.scrollIntoView({ behavior: 'smooth', block: 'center' }); setTimeout(() => { form.classList.remove('hero-form-flash'); void form.offsetWidth; form.classList.add('hero-form-flash'); if (submit) { submit.classList.remove('btn-pulse'); void submit.offsetWidth; submit.classList.add('btn-pulse'); } if (input) input.focus({ preventScroll: true }); }, 420); } }; return (
); } window.App = App;