/* App.jsx — main landing page composition */ const { useState, useEffect, useRef } = React; // Copy variants — misterioso vs direto const COPY = { misterioso: { eyebrow: "ACESSO POR CONVITE / V1.0", title: ["Onde o tráfego ", se revela.], sub: "Rastreamento, atribuição e orquestração — em silêncio, em escala, em uma única infraestrutura. Para quem move volume e prefere que ninguém saiba como.", primaryCTA: "Solicitar convite", secondaryCTA: "Ver demonstração", metaA: "Todas as contas da BM", metaB: "TikTok Ads · sandbox sob NDA", metaC: "BR · região protegida", sectionFeatures: ["O sistema", em quatro órgãos.], sectionFeaturesSub: "Cada módulo é independente. Juntos, eles capturam, atribuem, orquestram e reconciliam — sem interferência humana.", sectionFlow: ["Do clique ao", ROAS reconciliado.], sectionFlowSub: "Cinco passos. Sem dependências externas. Tudo persiste no seu Postgres.", sectionCompare: ["O que mais ninguém", entrega.], sectionCompareSub: "Por que você não consegue dormir tranquilo com Utmify ou planilha — e como o Corvex resolve.", sectionDash: ["O cockpit é seu.", O dado também.], sectionDashSub: "Toda métrica que você usa para decidir vive no seu próprio banco. Sem black-box, sem licença de dados.", sectionTesti: ["Quem voa com", a gente.], finalTitle: ["O céu", é uma rota.], finalSub: "Acesso restrito. Onboarding manual. Solicite o convite e nós entramos em contato em até 48h.", }, direto: { eyebrow: "PLATAFORMA DE ATRIBUIÇÃO PARA TIKTOK ADS", title: ["Atribuição de verdade ", para quem escala.], sub: "Substitui Utmify. Centraliza rastreamento, atribuição, criação de campanhas e custos do TikTok Ads em um único banco — todo o dado é seu, todas as decisões são suas.", primaryCTA: "Solicitar convite", secondaryCTA: "Ver demonstração", metaA: "Todas as contas da BM", metaB: "TikTok Marketing API · Events API", metaC: "Self-hosted · Postgres", sectionFeatures: ["Quatro módulos.", Uma única infraestrutura.], sectionFeaturesSub: "Rastreamento, atribuição, criação em lote e custo ao vivo — tudo em um só lugar, sem precisar abrir três ferramentas.", sectionFlow: ["Como funciona, ", passo a passo.], sectionFlowSub: "Cinco etapas, totalmente automatizadas. O dado entra pelo clique e sai como ROAS reconciliado.", sectionCompare: ["Corvex vs ", o resto.], sectionCompareSub: "Comparativo direto com as ferramentas de mercado mais usadas no nicho.", sectionDash: ["Dashboard ", de controle total.], sectionDashSub: "Veja ROAS, CPA, leads e atribuição por conta, campanha e anúncio — em tempo real, agregado em uma view materializada.", sectionTesti: ["O que dizem ", os operadores.], finalTitle: ["Pronto para ", tomar o controle?], finalSub: "Solicite seu convite. Onboarding em 48h. Setup técnico assistido.", }, }; const FEATURES = [ { num: "01 / RASTREAMENTO", title: "Não perde nenhum clique.", desc: "Cada clique no anúncio é registrado antes do usuário chegar ao Telegram. Nada se perde — nem o que o TikTok não te entrega.", tags: ["TTCLID", "SHORT-REF", "302 REDIRECT", "POSTGRES"], icon: ( ), }, { num: "02 / ATRIBUIÇÃO + UTM", title: "Sabe de onde veio cada venda.", desc: "Liga a venda ao anúncio que gerou o clique e devolve a conversão para o TikTok com UTMs corretas. O algoritmo aprende com dado real.", tags: ["UTM", "EVENTS API", "ATRIBUIÇÃO", "VENDA → ANÚNCIO"], icon: ( ), }, { num: "03 / CRIAÇÃO EM LOTE", title: "Todas as contas. Um clique.", desc: "Cria a mesma campanha em todas as contas da sua Business Manager de uma vez só. Link de rastreamento já vai pronto com UTMs.", tags: ["TEMPLATES", "P-LIMIT", "MARKETING API", "PARALELO"], icon: ( ), }, { num: "04 / CUSTO AO VIVO", title: "ROAS atualizado em tempo real.", desc: "Spend, CPA e ROAS por anúncio sempre atuais. Você decide pausar ou escalar olhando o número certo, não o de duas horas atrás.", tags: ["AO VIVO", "ROAS", "CPA", "SPEND"], icon: ( ), }, ]; const FLOW_STEPS = [ { n: "01", t: "Clique", d: "Usuário clica no anúncio. O Corvex registra antes do redirect." }, { n: "02", t: "Redirect", d: "Cai no bot do Telegram com um link único de rastreio." }, { n: "03", t: "Atribuição", d: "Quando o usuário interage, ligamos a ação ao clique original." }, { n: "04", t: "Venda", d: "Pagamento dispara o evento de conversão para o TikTok." }, { n: "05", t: "ROAS ao vivo", d: "Custo e receita reconciliados no painel — em tempo real." }, ]; const COMPARE_ROWS = [ { name: "Atribuição via TikTok Events API", utmify: "partial", planilha: "x", corvex: "check" }, { name: "Banco de dados próprio (sem black-box)", utmify: "x", planilha: "check", corvex: "check" }, { name: "Criação de campanhas em lote (BM inteira)", utmify: "x", planilha: "x", corvex: "check" }, { name: "Sincronização de custo automática", utmify: "check", planilha: "x", corvex: "check" }, { name: "Webhook idempotente com HMAC", utmify: "partial", planilha: "x", corvex: "check" }, { name: "View materializada de ROAS / CPA / LTV", utmify: "x", planilha: "x", corvex: "check" }, { name: "Self-hosted · sem licença de dados", utmify: "x", planilha: "check", corvex: "check" }, ]; const TESTIMONIALS = [ { q: "Saímos da Utmify e nunca mais olhamos pra trás. O dado é nosso, o ROAS bate com o do TikTok, e o disparo em lote economizou semanas.", n: "R. Almeida", r: "Head de Mídia · Operação 7-fig", a: "RA", }, { q: "A view materializada do Corvex virou a base do meu BI. Hoje eu sei o LTV por anúncio, não por campanha. Mudou o jogo.", n: "F. Tavares", r: "Mídia paga · Produto digital", a: "FT", }, { q: "Toda a BM em paralelo, criação de campanha em um clique, custo ao vivo. É a infra que eu sempre quis ter, mas não tinha tempo de construir.", n: "C. Nakamura", r: "Founder · Agência performance", a: "CN", }, ]; // --------------------------------------------------------------------------- const App = () => { const [tweaks, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS); const variant = tweaks.copy === "direto" ? "direto" : "misterioso"; const C = COPY[variant]; // Apply CSS vars from tweaks useEffect(() => { const r = document.documentElement.style; r.setProperty("--silver", tweaks.silverHex); r.setProperty("--silver-glow", tweaks.silverGlow); r.setProperty("--grid-opacity", String(tweaks.gridOpacity)); r.setProperty("--grain-opacity", String(tweaks.grainOpacity)); r.setProperty("--particle-opacity", String(tweaks.particleOpacity)); }, [tweaks]); return ( <> {/* Background layers */}
{tweaks.density !== "limpo" && tweaks.density !== "particles" && (
)} {tweaks.density === "particles" && }