// app.jsx — TradeTank landing app (React) const { useState, useEffect, useRef } = React; // ── Defaults persisted by host ────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "bgVariant": "candles", "intensity": 1, "returning": false, "returningName": "Olivia", "returningEmail": "olivia@hooked.io", "accent": "#F97316", "headline": "cast", "fontTheme": "poppins" } /*EDITMODE-END*/; const ACCENT_OPTIONS = ['#F97316', '#10b981', '#F59E0B', '#06b6d4']; const FONT_THEMES = { poppins: { display: "'Poppins', system-ui, sans-serif", body: "'Poppins', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", weight: '800', tracking: '-0.035em' } }; const HEADLINES = { cast: { line1: <>Enter the tank., line2: <>Land bigger fish }, fishing: { line1: <>Stop fishing for profits, line2: <>without a net. }, net: { line1: <>The net for, line2: <>serious traders. } }; // ───────────────────────────────────────────────────────────────────── // AUTH CARD // ───────────────────────────────────────────────────────────────────── function AuthCard({ returning, returningName, returningEmail, onSwitchUser }) { const [tab, setTab] = useState('signup'); const [email, setEmail] = useState(''); const [pw, setPw] = useState(''); const [name, setName] = useState(''); const [loading, setLoading] = useState(false); const [shake, setShake] = useState(false); useEffect(() => { if (returning) setEmail(returningEmail); }, [returning, returningEmail]); const submit = (e) => { e.preventDefault(); if (!email) { setShake(true); setTimeout(() => setShake(false), 500); return; } setLoading(true); setTimeout(() => setLoading(false), 1400); }; // ── Returning-user variant ── if (returning) { const initial = (returningName || 'T').charAt(0).toUpperCase(); return (
{initial}
Welcome back, {returningName}.
{returningEmail}
setPw(e.target.value)} autoFocus />
e.preventDefault()}>Forgot password?
Not {returningName}?
); } // ── Waitlist CTA variant ── return (
Join the waitlist
); } // ───────────────────────────────────────────────────────────────────── // HERO CONTENT // ───────────────────────────────────────────────────────────────────── function HeroContent({ headline }) { const h = HEADLINES[headline] || HEADLINES.cast; return ( <>

{h.line1} {h.line2}

Setup in less than a minute
Track every trade
Secure payments via Stripe
); } // ───────────────────────────────────────────────────────────────────── // TWEAKS PANEL // ───────────────────────────────────────────────────────────────────── function TweaksRoot() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply to BG scene + CSS vars useEffect(() => { if (window.BgScene) window.BgScene.setVariant(t.bgVariant); }, [t.bgVariant]); useEffect(() => { if (window.BgScene) window.BgScene.setIntensity(t.intensity); }, [t.intensity]); useEffect(() => { document.documentElement.style.setProperty('--accent', t.accent); document.documentElement.style.setProperty('--accent-dim', darken(t.accent, 0.18)); if (window.BgScene) window.BgScene.setAccent(t.accent); }, [t.accent]); useEffect(() => { const f = FONT_THEMES[t.fontTheme] || FONT_THEMES.poppins; const r = document.documentElement.style; r.setProperty('--font-display', f.display); r.setProperty('--font-body', f.body); r.setProperty('--font-mono', f.mono); r.setProperty('--headline-weight', f.weight); r.setProperty('--headline-tracking', f.tracking); }, [t.fontTheme]); return ( <>
setTweak('returning', false)} /> setTweak('bgVariant', v)} /> setTweak('intensity', v)} /> setTweak('accent', v)} /> setTweak('headline', v)} /> setTweak('returning', v)} /> {t.returning && <> setTweak('returningName', v)} /> setTweak('returningEmail', v)} /> } ); } // Mount hero content into static #hero (so the original h1 can still be direct-edited // — actually because hero is mounted by React based on a tweak, we render it via portal-ish replace). function HeroMount({ headline }) { useEffect(() => { const host = document.getElementById('hero'); if (!host) return; // remove any previous react root if (host._reactRoot) host._reactRoot.unmount(); const root = ReactDOM.createRoot(host); host._reactRoot = root; root.render(); return () => {/* cleanup handled on next mount */}; }, [headline]); return null; } function AuthMount({ returning, returningName, returningEmail, onSwitchUser }) { useEffect(() => { const host = document.getElementById('auth-root'); if (!host) return; if (!host._reactRoot) host._reactRoot = ReactDOM.createRoot(host); host._reactRoot.render( ); }, [returning, returningName, returningEmail]); return null; } // ───────────────────────────────────────────────────────────────────── // SMALL ATOMS // ───────────────────────────────────────────────────────────────────── function GoogleIcon() { return ( ); } function AppleIcon() { return ( ); } function Arrow() { return ( ); } function Spinner() { return ( ); } // hex utils function darken(hex, amt) { const h = hex.replace('#', ''); let r = parseInt(h.substring(0, 2), 16); let g = parseInt(h.substring(2, 4), 16); let b = parseInt(h.substring(4, 6), 16); r = Math.max(0, Math.round(r * (1 - amt))); g = Math.max(0, Math.round(g * (1 - amt))); b = Math.max(0, Math.round(b * (1 - amt))); return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join(''); } // ─── shake keyframe (injected once) ─── (function injectShake() { const s = document.createElement('style'); s.textContent = `@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }`; document.head.appendChild(s); })(); // ── MOUNT ────────────────────────────────────────────────────────── const tweaksRoot = ReactDOM.createRoot(document.getElementById('tweaks-root')); tweaksRoot.render();