/* global React, AB */ const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React; /* -------------------- Live Demo (automation pipeline) -------------------- */ const PIPE_STAGES = [ { key: 'webhook', label: 'Webhook', sub: 'POST /lead', color: '#5DD3A8' }, { key: 'classify', label: 'IA · Classificar', sub: 'GPT-5 · score fit', color: '#8AB4F8' }, { key: 'enrich', label: 'Enriquecer', sub: 'Entender mais do Lead', color: '#C792EA' }, { key: 'route', label: 'Roteamento', sub: 'fit > 0.7 → hot', color: '#FFD79A' }, { key: 'notify', label: 'Notificar', sub: 'Slack · CRM · Email', color: '#FF8A4C' }, ]; const SAMPLE_LEADS = [ { name: 'Marina S.', co: 'Helio Studio', mrr: 'R$ 28k', fit: 0.82, hot: true }, { name: 'João P.', co: 'Núcleo Tech', mrr: 'R$ 12k', fit: 0.61, hot: false }, { name: 'Larissa V.',co: 'Quanta Lab', mrr: 'R$ 84k', fit: 0.91, hot: true }, { name: 'Rafa M.', co: 'Onda PME', mrr: 'R$ 6k', fit: 0.42, hot: false }, { name: 'Camila R.', co: 'Grão Foods', mrr: 'R$ 36k', fit: 0.74, hot: true }, ]; function Demo(){ const [active, setActive] = useState2(0); const [leadIdx, setLeadIdx] = useState2(0); const [log, setLog] = useState2([]); const [counts, setCounts] = useState2({ runs: 12847, hot: 4291, latency: 178 }); const lead = SAMPLE_LEADS[leadIdx]; useEffect2(() => { const totalStages = PIPE_STAGES.length; const id = setInterval(() => { setActive(a => { const next = (a + 1) % (totalStages + 2); if (next === 0){ setLeadIdx(li => (li + 1) % SAMPLE_LEADS.length); setCounts(c => ({ runs: c.runs + 1, hot: c.hot + (SAMPLE_LEADS[(leadIdx+1) % SAMPLE_LEADS.length].hot ? 1 : 0), latency: 150 + Math.round(Math.random()*70), })); } if (next < totalStages){ setLog(l => { const stage = PIPE_STAGES[next]; const entry = { ts: nowStr(), stage: stage.label, lead: SAMPLE_LEADS[leadIdx].name }; return [entry, ...l].slice(0, 8); }); } return next; }); }, 900); return () => clearInterval(id); }, [leadIdx]); return (
03 · Demo ao vivo

Uma automação
rodando agora.

Lead entra, IA classifica, sistema enriquece, roteia para o time certo. Em menos de 200ms. Reduza horas de planilha em segundos de pipeline.

live · processando lead #{counts.runs.toLocaleString('pt-BR')}
{PIPE_STAGES.map((s, i) => { const isActive = active === i; const isPast = active > i; return (
{i < PIPE_STAGES.length - 1 && (
)}
{String(i+1).padStart(2,'0')}
{s.label}
{s.sub}
); })}
// LEAD ATUAL
{lead.name}
{lead.hot ? '● HOT' : '○ NURTURE'}
{lead.co}
RECEITA
{lead.mrr}
FIT SCORE
{lead.fit.toFixed(2)}
// EVENT LOG
{log.length === 0 &&
aguardando eventos…
} {log.map((l, i) => (
{l.ts}{' '} ›{' '} {l.stage}{' '} — {l.lead}
))}
); } function KPI({ label, value }){ return (
{label}
{value}
); } function nowStr(){ const d = new Date(); const p = (n) => String(n).padStart(2,'0'); return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`; } /* -------------------- Process -------------------- */ const PROCESS = [ { code: '01', t: 'Descoberta', d: 'Entendemos seu negócio, desafios, objetivos e visão de futuro. 1–2 sessões.', dur: '2 a 3 dias' }, { code: '02', t: 'Estratégia', d: 'Proposta técnica, stack recomendada, cronograma e investimento claro.', dur: '2 a 4 dias' }, { code: '03', t: 'Desenvolvimento', d: 'Sprints iterativas, entregas parciais, você acompanha tudo em ambiente staging.', dur: '3 a 5 semanas' }, { code: '04', t: 'Validação', d: 'Testes rigorosos, ajustes finais e aprovação. QA, segurança, performance.', dur: '1 semana' }, { code: '05', t: 'Suporte', d: 'Deploy, documentação, treinamento e evolução contínua.', dur: 'contínuo' }, ]; function Process(){ return (
04 · Processo

5 etapas.

Você acompanha cada etapa, cada decisão técnica, cada entrega. Sem surpresas no orçamento.

{PROCESS.map((p, i) => (
{p.code}
{p.t}
{p.d}
⏱ {p.dur}
{i < PROCESS.length - 1 && ( )}
))}
); } /* -------------------- Stack -------------------- */ const STACK = [ ['Frontend', ['React','Next.js','Tailwind','Three.js']], ['Backend', ['Node.js','FastAPI','Postgres','Redis']], ['IA / ML', ['OpenAI','Anthropic','LangChain','pgvector']], ['Infra', ['Docker','Vercel','Cloudflare','Supabase']], ]; function Stack(){ return (
05 · Stack

A ferramenta certa
para cada problema.

// tecnologia é meio, não fim
// escolhemos pelo problema, não pela moda
{STACK.map(([cat, items]) => (
// {cat.toUpperCase()}
    {items.map(x => (
  • {x} v∞
    • ))}
))}
); } /* -------------------- Clients (counters) -------------------- */ const CLIENT_LOGOS = [ { name: 'Divina Argila', url: 'https://divinaargila.com.br/' }, { name: 'Bouwman', url: 'https://bouwman.com.br/' }, { name: 'Oglee', url: 'https://oglee.com.br/' }, { name: 'Nyl', url: 'https://www.nylhairdesign.com.br/' }, { name: 'Aline Nail', url: 'https://www.instagram.com/alinebukowski.naildesigner/' }, ]; function Clients(){ const ref = useRef2(null); return (
06 · Clientes
{CLIENT_LOGOS.map(({ name, url }) => ( {name}· ))}
); } /* -------------------- Contact -------------------- */ function Contact(){ const [budget, setBudget] = useState2('2-5'); const sent = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('sent') === 'true'; const redirectUrl = typeof window !== 'undefined' ? window.location.origin + window.location.pathname + '?sent=true#contato' : ''; return (
07 · Contato

Conta o
problema.
Devolvemos
uma arquitetura.

hello@agenciabyte.com +55 (42) 98422-4363
resposta em até 1 dia útil
{sent ? (
✓
Recebido!

Vamos te responder em breve.
Fique de olho no seu e-mail.

) : (
// BRIEF RÁPIDO
{['<1','2-5','6-10','20>'].map(b => ( ))}