// Figus site — landing page sections // Hero · Marquee · Features (4 alternating rows) · Proximity · Themes · Pro · FAQ · CTA · Footer // ── HERO ── function Hero({ lang, onLogin }) { const t = FIGUS_I18N[lang].hero; return (
{/* gold tear at top */}
{/* Left: copy */}
{t.eyebrow}

{t.title[0]}
{t.title[1]}

{t.sub}

} href="#waitlist">{t.ctaPrimary} {t.ctaLogin || 'Já tenho conta · Entrar'}
{/* KPIs */}
{t.kpis.map(k => { const n = parseInt(k.v.replace(/\D/g, ''), 10); const useThousands = n >= 1000; return (
{k.l}
); })}
{/* Right: phone stack */}
{/* Halo */}
{/* Back phone — real Brasil page screenshot */}
{/* Mid phone — real Trocas screenshot */}
{/* Front phone — real Coleção home screenshot */}
); } // ── MARQUEE ── function Marquee({ lang }) { const t = FIGUS_I18N[lang].marquee; const line = (t + ' · ').repeat(8); return (
{line}
); } // ── FEATURES — 4 alternating rows ── function Features({ lang }) { const t = FIGUS_I18N[lang].features; // Real app screenshots captured via Playwright (tool/screenshooter). // Each row in the Features section shows a different real screen: // Coleção, Trocas, Copa, Ajustes (with stats). const screens = [ , , , , ]; const accents = ['var(--gold)', 'var(--pulp)', 'var(--field)', 'var(--sky)']; return (
{t.eyebrow}

{t.title[0]} {t.title[1]}

{t.list.map((f, i) => { const reverse = i % 2 === 1; return (
{/* Copy */}
{f.tag}

{f.title}

{f.body}

{/* Phone preview with colored glow */}
{screens[i]}
); })}
); } // ── Sticky CTA bar — appears once the user scrolls past the Hero. // Pattern lifted from Vercel/Linear: a slim gold strip pinned to the // top with a single CTA (jump to #waitlist). Boosts pre-launch email // capture conversion by keeping the offer one tap away regardless of // scroll depth. function StickyCta({ lang }) { const t = FIGUS_I18N[lang].stickyCta || FIGUS_I18N.pt.stickyCta; const [show, setShow] = React.useState(false); React.useEffect(() => { const onScroll = () => setShow(window.scrollY > 700); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return (
{t.text}
{t.cta}
); } // ── Trust strip — runs right under the Hero, surfaces 4 quick promises // (free / no-account / offline / made-in-BR). Common Apple/Stripe move // to reduce friction immediately after the headline. function TrustStrip({ lang }) { const t = FIGUS_I18N[lang].trust || FIGUS_I18N.pt.trust; return (
{t.items.map((it, i) => (
{it.icon} {it.label}
))}
); } // ── Animated counter for KPIs and showcase numbers. // Uses requestAnimationFrame + easeOutCubic to animate 0 → target when // the element enters viewport. Pattern: countup.js but inlined. function CountUp({ end, duration = 1600, suffix = '', formatThousands = false }) { const [value, setValue] = React.useState(0); const ref = React.useRef(null); React.useEffect(() => { if (!ref.current) return; let raf = null; let startTime = null; let observer = null; const animate = (ts) => { if (!startTime) startTime = ts; const t = Math.min((ts - startTime) / duration, 1); const eased = 1 - Math.pow(1 - t, 3); // ease-out-cubic setValue(Math.round(end * eased)); if (t < 1) raf = requestAnimationFrame(animate); }; observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { raf = requestAnimationFrame(animate); observer.disconnect(); } }); }, { threshold: 0.5 }); observer.observe(ref.current); return () => { if (raf) cancelAnimationFrame(raf); if (observer) observer.disconnect(); }; }, [end, duration]); const display = formatThousands ? value.toLocaleString('pt-BR') : value; return {display}{suffix}; } // ── Avatar showcase — full grid of all 48 avatars with hover lift. // Adds visual proof for the "48 avatares (10 free + 38 Pro)" claim in // the Pro compare table. Uses the SVGs we already ship in the app // bundle at docs/app/assets/assets/avatars/. const FREE_AVATARS = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); function AvatarShowcase({ lang }) { const t = FIGUS_I18N[lang].avatars || FIGUS_I18N.pt.avatars; // PREVIEW só — antes ficavam 48 expostos, agora 8 amostras pequenas // num device-frame. Mais provocador, deixa a descoberta no app. const preview = [1, 2, 3, 4, 14, 20, 27, 41]; return (
{t.eyebrow}

{t.title[0]} {t.title[1]}

{t.body}

{t.legend}

{/* Mockup compacto — 8 amostras dentro de um "celular" */}
ESCOLHER AVATAR
{preview.map((n) => { const num = String(n).padStart(2, '0'); const isFree = FREE_AVATARS.has(n); return (
{!isFree && (
🔒
)}
); })}
… e mais 40 no app
); } // ── Reusable deep-dive layout: phone screenshot + copy + bullets. // Used by TradesDeep, CupDeep, ImportDeep below to keep the // site visually rhythmic without re-coding the same JSX 4 times. function DeepDiveSection({ id, bg, accent, eyebrow, title, body, bullets, screenshot, screenshotAlt, reverse, pad, phoneHeight = 852 }) { // phoneHeight lets you use a shorter frame for screenshots that are // cropped to just the meaningful UI card (e.g. the import flow), so // the phone fills with content instead of showing empty space. return (
{/* Phone screenshot side */}
{/* Copy + bullets side */}
{eyebrow}

{title[0]}
{title[1]}

{body}

    {bullets.map((b, i) => (
  • {b}
    • ))}
); } // ── TRADES DEEP DIVE ── function TradesDeep({ lang }) { const t = FIGUS_I18N[lang].tradesSection; if (!t) return null; return ( ); } // ── CUP DEEP DIVE ── function CupDeep({ lang }) { const t = FIGUS_I18N[lang].cupSection; if (!t) return null; return ( ); } // ── COMING SOON (during World Cup) ── function ComingSoon({ lang }) { const t = FIGUS_I18N[lang].comingSoon; if (!t) return null; return (
{t.eyebrow}

{t.title[0]}
{t.title[1]}

{t.body}

{t.cards.map((card, i) => (
EM BREVE
{card.icon}

{card.title}

{card.body}

))}
{t.cta}
); } // ── IMPORT (1-CLICK MIGRATION) ── function ImportDeep({ lang }) { const t = FIGUS_I18N[lang].importSection; if (!t) return null; return ( ); } // ── WAITLIST CTA (high-conversion pre-launch email capture) ── // Supabase project — config exposto em window.FIGUS_SUPABASE via index.html. // Publishable key é safe pra client (não tem permissão DDL, só CRUD nas tabelas // liberadas por RLS). Vide tabela `waitlist` com RLS anon-insert-only. function Waitlist({ lang }) { const t = FIGUS_I18N[lang].waitlist; if (!t) return null; const [email, setEmail] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | sending | done | error const [errorMsg, setErrorMsg] = React.useState(''); const submit = async (e) => { e.preventDefault(); if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return; setStatus('sending'); setErrorMsg(''); const cfg = window.FIGUS_SUPABASE || {}; if (!cfg.url || !cfg.key) { // Sem backend configurado — degrada pra localStorage como fallback dev. try { const list = JSON.parse(localStorage.getItem('figus_waitlist') || '[]'); list.push({ email, ts: new Date().toISOString(), lang }); localStorage.setItem('figus_waitlist', JSON.stringify(list)); } catch {} setStatus('done'); return; } try { const res = await fetch(`${cfg.url}/rest/v1/waitlist`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'apikey': cfg.key, 'Authorization': `Bearer ${cfg.key}`, 'Prefer': 'return=minimal', }, body: JSON.stringify({ email: email.trim().toLowerCase(), lang, source: 'site', user_agent: navigator.userAgent.slice(0, 200), }), }); if (res.status === 201 || res.status === 204) { setStatus('done'); } else if (res.status === 409) { // Email duplicado — tratamos como sucesso (UX: "obrigado, já estava na lista") setStatus('done'); } else { const txt = await res.text().catch(() => ''); console.error('waitlist error', res.status, txt); setErrorMsg(`erro ${res.status}`); setStatus('error'); } } catch (err) { console.error('waitlist fetch failed', err); setErrorMsg('rede'); setStatus('error'); } }; const done = status === 'done'; return (
{t.eyebrow}

{t.title}

{t.sub}

{done ? (
✓ {t.thanks}
) : (
setEmail(e.target.value)} style={{ flex: '1 1 240px', minWidth: 220, height: 54, padding: '0 20px', background: 'rgba(245,239,227,0.06)', border: '1px solid rgba(245,239,227,0.18)', borderRadius: 14, color: 'var(--cream)', fontSize: 16, outline: 'none', }} />
)} {status === 'error' && (
Falha ao enviar ({errorMsg}). Tenta de novo em 1 minuto.
)}
{t.fineprint}
); } // ── PROXIMITY (full-bleed) ── function Proximity({ lang }) { const t = FIGUS_I18N[lang].proximity; return (
{/* concentric circles */} {[80, 140, 200, 240].map(r => ( ))}
{t.eyebrow}

{t.title[0]}
{t.title[1]}

{t.body}

    {t.bullets.map(b => (
  • {b}
    • ))}
); } // ── THEMES ── function ThemesShowcase({ lang }) { const t = FIGUS_I18N[lang].themes; const sw = [ { name: t.labels[0], colors: ['#13100E', '#1E1916', '#F5EFE3', '#E5B14B'] }, { name: t.labels[1], colors: ['#0F1F18', '#16302A', '#F0F6E8', '#7BC591'] }, { name: t.labels[2], colors: ['#1F0E14', '#2D1620', '#F5E3E9', '#D04A7E'] }, { name: t.labels[3], colors: ['#0C1626', '#142339', '#E8EFF8', '#3F8FE0'] }, { name: t.labels[4], colors: ['#FBF7EC', '#FFFFFF', '#13100E', '#B0813A'] }, { name: t.labels[5], colors: ['#F2F8EC', '#FFFFFF', '#1F3A24', '#2E8F4F'] }, { name: t.labels[6], colors: ['#FAEEF1', '#FFFFFF', '#3F1228', '#D04A7E'] }, { name: t.labels[7], colors: ['#F2EAD9', '#FAF4E5', '#2A2118', '#B0813A'] }, ]; return (
{t.eyebrow}

{t.title[0]}

{t.body}

{sw.map(theme => (
{theme.colors.map((c, i) => (
))}
{theme.name}
))}
); } // ── PRO ── function ProBlock({ lang }) { const t = FIGUS_I18N[lang].pro; const c = t.compare; return (
{/* Hero block */}
{t.eyebrow}

{t.title[0]} {t.title[1]}

{t.lede}

{/* Perks grid */}
{t.perks.map(p => (
{p.t}
{p.d}
))}
{/* Free vs Pro table */}
{c.title}
{/* Header */}
{c.free}
{c.plan}
{/* Rows */} {c.rows.map(([label, free, pro], i) => (
{label}
))}
{/* Planos inline — substitui o botao "Ver planos" antigo */}
{[ { period: t.plans?.monthly || 'Mensal', price: 'R$ 8,90', sub: t.plans?.perMonth || '/mês', highlight: false }, { period: t.plans?.semester || '6 meses', price: 'R$ 45', sub: t.plans?.equivMonth ? `≈ R$ 7,50${t.plans.perMonth}` : '≈ R$ 7,50/mês', highlight: true }, { period: t.plans?.yearly || 'Anual', price: 'R$ 60', sub: t.plans?.equivMonth ? `≈ R$ 5,00${t.plans.perMonth}` : '≈ R$ 5,00/mês', highlight: false }, ].map((p, i) => (
{p.highlight && (
MELHOR
)}
{p.period}
{p.price}
{p.sub}
))}
{t.fineprint}
); } function CompareCell({ value, pro }) { if (value === true) { return (
); } if (value === false) { return (
); } return (
{value}
); } // ── FAQ ── function FAQItem({ q, a }) { const [open, setOpen] = React.useState(false); return (
{open && (
{a}
)}
); } function FAQ({ lang }) { const t = FIGUS_I18N[lang].faq; return (
{t.eyebrow}

{t.title[0]}
{t.title[1]}

{t.items.map((it, i) => )}
); } // ── FINAL CTA ── function CTA({ lang }) { const t = FIGUS_I18N[lang].cta; const waitlistT = FIGUS_I18N[lang].waitlist || {}; const ctaWaitlistLabel = waitlistT.cta || 'Avise-me'; return (

{t.title[0]}
{t.title[1]}

{t.sub}

{t.comingSoon || 'Em breve nas lojas'} {ctaWaitlistLabel}
); } // ── FOOTER ── function Footer({ lang }) { const t = FIGUS_I18N[lang].footer; const cols = [t.links.product, t.links.sport, t.links.help]; return ( ); } Object.assign(window, { Hero, Marquee, Features, TradesDeep, CupDeep, ImportDeep, Waitlist, Proximity, ThemesShowcase, AvatarShowcase, ProBlock, FAQ, CTA, Footer, StickyCta, TrustStrip, CountUp });