// Alvo Brando — marketing site components // Each section is its own component. Composed in app.jsx. const { useState } = React; /* ============================================================ Brand mark (used in header + footer) ============================================================ */ const BrandMark = ({ variant = 'light', size = 28 }) => { const src = variant === 'light' ? 'design-system/assets/logo-principal.svg' : 'design-system/assets/logo-reverso.svg'; const color = variant === 'light' ? 'var(--ink)' : '#fff'; return (
Alvo Brando alvobrando
); }; /* ============================================================ Header ============================================================ */ const Header = () => { const navStyle = { position: 'sticky', top: 0, zIndex: 50, background: 'rgba(248, 244, 251, 0.78)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', borderBottom: '1px solid var(--border)', }; const innerStyle = { display: 'flex', alignItems: 'center', gap: 8, height: 72, padding: '0 32px', maxWidth: 1320, margin: '0 auto', }; const linkStyle = { fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: 'var(--slate)', padding: '8px 12px', borderRadius: 8, textDecoration: 'none', borderBottom: 0, cursor: 'pointer', whiteSpace: 'nowrap', }; return (
Entrar Falar com a gente
); }; /* ============================================================ Hero ============================================================ */ const Hero = () => (
{/* radial bloom */}
marketing com IA

Atraímos.
Convertemos.
Vendemos.

Tráfego pago, social media, automação no WhatsApp, páginas de vendas e CRM — um sistema só, com IA atravessando cada etapa do seu funil. Resultado mensurável, não promessa.

); const Stat = ({ n, label }) => (
{n}
{label}
); /* Mock dashboard panel on the right of hero */ const HeroDashboard = () => (
ao vivo últ. 30 dias
IA sugere: aumentar verba do criativo "depoimento Camila" em 30% — CTR 2.1x acima da média.
); const DashStat = ({ label, value, suffix, delta }) => { const positive = !delta?.startsWith('−') && !delta?.startsWith('-'); return (
{label}
{value}{suffix}
{delta}
); }; const ChartLine = () => ( ); /* ============================================================ Logos strip (social proof) ============================================================ */ const LogosStrip = () => { const names = ['ROSANA & CO', 'Maré Studio', 'Casa Verde', 'NORTE ATLETA', 'Café da Tarde', 'Dr. Mendonça', 'Studio Vincent']; return (
Quem confia o crescimento à gente
{names.map(n => (
{n}
))}
); }; /* ============================================================ System (4 pillars) ============================================================ */ const SystemSection = () => { const pillars = [ { icon: IconTarget, title: 'Tráfego pago', body: 'Meta, Google e TikTok rodando como um único motor. Atribuição real, não suposição.' }, { icon: IconInstagram, title: 'Social media', body: 'Calendário, criativos e copy alinhados ao funil — não a métricas de vaidade.' }, { icon: IconWhatsApp, title: 'Automação WhatsApp', body: 'Cada lead recebe a mensagem certa na hora certa. IA prioriza quem está mais quente.' }, { icon: IconGrid, title: 'CRM integrado', body: 'Da primeira conversa à venda fechada. Um dashboard que todo mundo entende.' }, ]; return (
o sistema

Quatro frentes.
Um sistema só.

Ao invés de juntar agências e ferramentas soltas, integramos tudo em uma camada operada por IA — atribuindo, otimizando e priorizando em tempo real.

{pillars.map(p => )}
); }; const PillarCard = ({ icon: Icon, title, body }) => (

{title}

{body}

); /* ============================================================ Process (4 steps) ============================================================ */ const ProcessSection = () => { const steps = [ { n: '01', title: 'Diagnóstico', body: 'Auditamos canais, criativos, funil e CRM. Identificamos onde está vazando dinheiro.' }, { n: '02', title: 'Plano de ataque', body: 'Mapa de 90 dias por canal, com metas de CAC, CPL e ROAS já validadas com você.' }, { n: '03', title: 'Operação', body: 'Time roda tráfego, social, automação e CRM. IA prioriza leads quentes em tempo real.' }, { n: '04', title: 'Resultado', body: 'Dashboard ao vivo, reuniões quinzenais, ajustes semanais. Sem surpresas no relatório.' }, ]; return (
como funciona

Do diagnóstico ao primeiro pico de vendas em até 90 dias.

{steps.map((s, i) => (
{i < 3 && (
)}
{s.n}

{s.title}

{s.body}

))}
); }; /* ============================================================ Cases ============================================================ */ const CasesSection = () => { const cases = [ { tag: 'E-commerce moda', name: 'Maré Studio', metric: '6.2x', sub: 'ROAS em 4 meses', body: 'Reestruturação de funil + automação no WhatsApp. Saímos de 1.8x para 6.2x sem aumentar verba.', hue: 'linear-gradient(135deg,#9B32F1,#5F148F)' }, { tag: 'Serviços locais', name: 'Dr. Mendonça', metric: '−R$ 22', sub: 'CPL em 60 dias', body: 'Anúncios geo-segmentados, landing page nova e IA filtrando leads. CPL caiu de R$ 38 para R$ 16.', hue: 'linear-gradient(135deg,#A95BF4,#7517B5)' }, { tag: 'Infoproduto', name: 'Norte Atleta', metric: '+312%', sub: 'vendas/semana', body: 'Pipeline construído do zero com criativos UGC, CRM e disparo segmentado. Triplicou em 90 dias.', hue: 'linear-gradient(135deg,#BD8AF7,#8C1EDB)' }, ]; return (
casos

Resultados que cabem na sua planilha.

Cada caso aqui é número auditado, com cliente que topa entrar na call de venda. Sem print de dashboard sem contexto.

{cases.map(c => )}
); }; const CaseCard = ({ tag, name, metric, sub, body, hue }) => (
{tag}
{name}
{metric}
{sub}

{body}

Ler o caso completo
); /* ============================================================ Pricing ============================================================ */ const PricingSection = () => (
planos

Pague pelo sistema que roda pra você.

Sem fee de setup, sem contrato fechado de 12 meses. Trimestre fechado, renovação opcional.

Verba de mídia paga à parte. Pra projetos enterprise (acima de R$ 200k/mês em mídia), fala com a gente — fazemos plano sob medida.
); const PricingCard = ({ name, price, period, summary, features, featured }) => (
{featured && ( <>
RECOMENDADO
)}
Plano

{name}

{summary}

{price} {period}
    {features.map(f => (
  • {f}
    • ))}
); /* ============================================================ FAQ ============================================================ */ const FaqSection = () => { const qs = [ ['Em quanto tempo eu vejo resultado?', 'Os primeiros sinais aparecem nas 2–3 primeiras semanas (CPM, CTR, taxa de resposta no WhatsApp). Vendas atribuídas tendem a estabilizar entre o dia 45 e 90, dependendo do ciclo de compra do seu negócio.'], ['Vocês trabalham com qualquer segmento?', 'Não. Não atendemos cripto, jogos de azar, infoproduto de "ganhe dinheiro fácil", ou qualquer negócio que não tope ter as métricas auditadas publicamente. Nosso forte é varejo, serviços locais e infoprodutos educacionais sérios.'], ['Preciso já ter CRM e WhatsApp Business?', 'Não. A gente sobe a estrutura do zero pra você ou integra ao que já existe (RD Station, HubSpot, Pipedrive, Kommo). WhatsApp roda na API oficial — sem risco de banimento.'], ['Quem é o dono da minha conta de anúncios?', 'Você. Sempre. A gente opera com perfil de gestor, nunca cria contas no nosso CNPJ. Se um dia decidir sair, leva tudo: histórico, pixel, públicos.'], ['Como funciona o contrato?', 'Trimestre fechado, renovação opcional ao fim de cada ciclo. Cláusula de saída sem multa se a gente não bater as metas combinadas no plano de 90 dias.'], ]; const [open, setOpen] = useState(0); return (
perguntas

O que a gente já ouviu antes de assinar.

{qs.map(([q, a], i) => ( setOpen(open === i ? -1 : i)} /> ))}
); }; const FaqRow = ({ q, a, open, onToggle }) => (
{open && (
{a}
)}
); /* ============================================================ CTA band ============================================================ */ const CtaBand = () => { const [sent, setSent] = useState(false); return (
direto no whatsapp

Vamos olhar o seu funil agora?

Em 15 minutos a gente mapeia onde está vazando dinheiro no seu marketing — e o que dá pra apertar primeiro.

{!sent ? (
{ e.preventDefault(); setSent(true); }} style={{ display: 'flex', gap: 8, maxWidth: 440, margin: '0 auto', justifyContent: 'center' }}>
) : (
Recebemos. Te chamamos em até 1 dia útil.
)}
); }; /* ============================================================ Footer ============================================================ */ const Footer = () => (

Marketing com IA que gera venda — não só lead.

© 2026 Alvo Brando · Marketing com IA · CNPJ 00.000.000/0001-00
Política de privacidade Termos
); const FooterCol = ({ title, links }) => (
{title}
    {links.map(l => (
  • {l}
    • ))}
); const SocialBtn = ({ children }) => ( ); Object.assign(window, { BrandMark, Header, Hero, LogosStrip, SystemSection, ProcessSection, CasesSection, PricingSection, FaqSection, CtaBand, Footer, });