/* global React */ const { useState, useEffect, useRef } = React; /* ─── Inline icon set ─── */ const Ico = { bot: (), code: (), shield: (), arrow: (), check: (), mail: (), phone: (), pin: (), zap: (), plus: (), burger: (), chart: (), church: (), scissors: (), extLink: (), }; /* ─── Stylized Z mark for hero core ─── */ function ZMark() { return ( ); } /* ─── NAV ─── */ function Nav({ logo }) { const [scrolled, setScrolled] = useState(false); const [hidden, setHidden] = useState(false); const [open, setOpen] = useState(false); const lastY = useRef(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; setScrolled(y > 40); setHidden(y > 200 && y > lastY.current); lastY.current = y; }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ ['Serviços', '#servicos'], ['Produtos', '#produtos'], ['Sobre', '#sobre'], ['Tecnologias', '#tech'], ['Cases', '#cases'], ['FAQ', '#faq'], ]; return ( ); } /* ─── HERO ─── */ function Hero() { const visualRef = useRef(null); useEffect(() => { // subtle parallax of the hero visual based on mouse const el = visualRef.current; if (!el) return; const onMove = (e) => { const cx = window.innerWidth / 2; const cy = window.innerHeight / 2; const dx = (e.clientX - cx) / cx; const dy = (e.clientY - cy) / cy; el.style.transform = `translate3d(${dx * -10}px, ${dy * -10}px, 0)`; }; window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []); return (
Inteligência Artificial Aplicada

Automação inteligente para empresas que não param.

Construímos agentes de IA, sistemas sob medida e suporte técnico contínuo para que sua operação ganhe escala — sem perder controle.

Solicitar orçamento {Ico.arrow} Ver serviços
+40Automações entregues
24/7Monitoramento ativo
~6×Aceleração média
API
CRM
DB
LLM
); } /* ─── SERVIÇOS ─── */ function Services() { const items = [ { n: '01', icon: Ico.bot, title: 'Automação com IA', desc: 'Agentes inteligentes que cuidam de atendimento, qualificação de leads, follow-up e processos repetitivos com a precisão de um time humano.', feats: ['Agentes conversacionais', 'Integrações WhatsApp / e-mail', 'RPA + IA generativa'], }, { n: '02', icon: Ico.code, title: 'Sistemas personalizados', desc: 'Plataformas web e dashboards desenhados para a realidade da sua empresa — do MVP enxuto ao sistema crítico em produção.', feats: ['Dashboards & BI', 'APIs e integrações', 'Painéis administrativos'], }, { n: '03', icon: Ico.shield, title: 'Suporte técnico', desc: 'Acompanhamento proativo da sua infraestrutura digital, com SLA, observabilidade e correção rápida de incidentes.', feats: ['Monitoramento 24/7', 'SLA garantido', 'Manutenção evolutiva'], }, ]; return (
Serviços

Tudo que sua operação precisa para rodar sozinha.

Três frentes que combinam para reduzir custo operacional e liberar seu time para o que realmente move o negócio.
{items.map((it, i) => ( {it.n} / 03
{it.icon}

{it.title}

{it.desc}

    {it.feats.map(f =>
  • {f}
    • )}
))}
); } /* ─── PRODUTOS ─── */ function Products() { const products = [ { icon: Ico.chart, name: 'Prospera', tagline: 'Controle financeiro inteligente', desc: 'Sistema completo de gestão financeira com dashboards, controle de receitas e despesas, relatórios automáticos e visão clara do fluxo de caixa da sua empresa.', feats: ['Dashboard financeiro', 'Controle de receitas e despesas', 'Relatórios automáticos'], url: 'https://www.sistemaprospera.com.br', accent: '#5cffd1', }, { icon: Ico.church, name: 'Ekklesia', tagline: 'Gestão para igrejas e ministérios', desc: 'Plataforma de gestão eclesiástica com controle de membros, células, eventos, chamados de suporte e comunicação integrada para sua comunidade.', feats: ['Gestão de membros e células', 'Controle de eventos', 'Sistema de chamados'], url: 'https://www.ekklesiaapp.com.br', accent: '#7a5af8', }, { icon: Ico.scissors, name: 'BarberOS', tagline: 'Sistema operacional para barbearias', desc: 'Gestão completa para barbearias com agendamento online, controle de caixa, comissões, fila de espera inteligente e relatórios de desempenho.', feats: ['Agendamento online', 'Controle de caixa e comissões', 'Fila de espera inteligente'], url: 'https://www.sistemabarberos.com.br', accent: '#ff6ad5', }, ]; return (
Produtos

Soluções prontas que já rodam em produção.

Sistemas desenvolvidos pela Zera AI, validados no mercado e prontos para transformar a operação do seu negócio.
{products.map((p, i) => (
{p.icon}

{p.name}

{p.tagline}

{p.desc}

    {p.feats.map(f =>
  • {f}
    • )}
Conhecer {p.name} {Ico.extLink} ))}
); } /* ─── SOBRE ─── */ function About() { return (
Sobre a Zera

Engenharia, dados e IA na mesma mesa.

Somos um time multidisciplinar — desenvolvedores, engenheiros de dados e especialistas em IA — focado em transformar gargalos operacionais em oportunidades de eficiência.

Não vendemos pacotes prontos. Cada projeto começa com diagnóstico, segue com prototipagem rápida e termina em produção com acompanhamento contínuo. Tecnologia que entrega resultado mensurável.

100%
Projetos sob medida
3 sem.
MVP médio em produção
12+
Integrações nativas
99,9%
Uptime médio
); } /* ─── TECNOLOGIAS ─── */ function Tech() { const row1 = [ { c: 'GP', n: 'OpenAI / GPT' }, { c: 'CL', n: 'Anthropic Claude' }, { c: 'PY', n: 'Python' }, { c: 'TS', n: 'TypeScript' }, { c: 'NX', n: 'Next.js' }, { c: 'RC', n: 'React' }, { c: 'NO', n: 'Node.js' }, { c: 'PG', n: 'PostgreSQL' }, { c: 'SB', n: 'Supabase' }, { c: 'LC', n: 'LangChain' }, ]; const row2 = [ { c: 'N8', n: 'n8n' }, { c: 'WA', n: 'WhatsApp API' }, { c: 'GC', n: 'Google Cloud' }, { c: 'AW', n: 'AWS' }, { c: 'DO', n: 'Docker' }, { c: 'RD', n: 'Redis' }, { c: 'PI', n: 'Pinecone' }, { c: 'HF', n: 'Hugging Face' }, { c: 'TW', n: 'Tailwind' }, { c: 'GH', n: 'GitHub Actions' }, ]; const Track = ({ items }) => (
{[...items, ...items].map((t, i) => (
{t.c} {t.n}
))}
); return (
Stack

A stack que sustenta cada projeto.

Ferramentas modernas e battle-tested. Sem reinventar a roda — entregar valor é o que importa.
); } /* ─── CASES ─── */ function Cases() { const cases = [ { span: 'span-3', tag: 'Automação · Atendimento', title: 'Atendimento 24/7 para varejista de moda', desc: 'Agente conversacional integrado ao WhatsApp, com qualificação de leads e handoff inteligente para o time humano.', metrics: [['78%', 'Atendimentos automatizados'], ['3.2×', 'Conversão de leads']], visual: 'scan', }, { span: 'span-3', tag: 'Sistema · Logística', title: 'Painel de roteirização para transportadora', desc: 'Plataforma web com otimização de rotas baseada em IA, integrada ao ERP e ao app dos motoristas.', metrics: [['−32%', 'Custo de combustível'], ['12 dias', 'MVP em produção']], visual: 'scan', }, { span: 'span-2', tag: 'IA · Backoffice', title: 'Leitura automática de notas', desc: 'OCR + LLM para classificar e arquivar notas fiscais.', metrics: [['94%', 'Acurácia']], }, { span: 'span-2', tag: 'Suporte · Infra', title: 'Monitoramento contínuo', desc: 'Observabilidade ponta-a-ponta com alertas inteligentes e correção proativa.', metrics: [['99,9%', 'Uptime']], }, { span: 'span-2', tag: 'Integração · Vendas', title: 'CRM conectado ao WhatsApp', desc: 'Pipeline automatizado com enriquecimento de dados em tempo real.', metrics: [['+47%', 'Produtividade']], }, ]; return (
Cases

Resultados que falam por números.

Uma seleção de projetos que transformaram a operação dos nossos clientes.
{cases.map((c, i) => ( {c.visual &&
} {c.tag}

{c.title}

{c.desc}

{c.metrics.map(([v, l]) => (
{v}
{l}
))}
))}
); } /* ─── FAQ ─── */ function FAQ() { const items = [ { q: 'Quanto tempo leva para colocar um projeto em produção?', a: 'A maioria dos nossos projetos sai do briefing para a primeira versão em produção entre 2 e 4 semanas. Trabalhamos com ciclos curtos para validar valor o quanto antes.' }, { q: 'Vocês atendem empresas de qualquer porte?', a: 'Sim. Atendemos desde pequenas empresas que querem automatizar tarefas pontuais até operações de médio e grande porte que precisam de sistemas críticos.' }, { q: 'Como funciona o orçamento?', a: 'Após uma conversa inicial de diagnóstico (gratuita), enviamos uma proposta com escopo, prazo e investimento detalhados. Sem letras miúdas e sem surpresa.' }, { q: 'Vocês fazem suporte depois da entrega?', a: 'Fazemos. Oferecemos planos de manutenção evolutiva e suporte técnico com SLA, para que seu sistema continue rodando bem e evoluindo com o negócio.' }, { q: 'Os dados da minha empresa ficam seguros?', a: 'Total prioridade. Trabalhamos com criptografia em trânsito e em repouso, controle granular de acessos e seguimos as boas práticas da LGPD em todos os projetos.' }, { q: 'Posso integrar a IA com sistemas que já uso?', a: 'Sim. Já integramos com WhatsApp Business, ERPs, CRMs (HubSpot, Pipedrive, RD), Google Workspace, Microsoft 365 e centenas de APIs via n8n e código próprio.' }, ]; const [open, setOpen] = useState(0); return (
Perguntas frequentes

Respostas diretas para as dúvidas mais comuns.
{items.map((it, i) => (
setOpen(open === i ? -1 : i)}> {it.q} {Ico.plus}

{it.a}

 ))}
); } /* ─── CONTATO ─── */ function Contact() { const [form, setForm] = useState({ name: '', email: '', company: '', service: '', budget: '', message: '' }); const [errors, setErrors] = useState({}); const [sent, setSent] = useState(false); const [loading, setLoading] = useState(false); const formRef = useRef(null); useEffect(() => { const el = formRef.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); el.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`); el.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`); }; el.addEventListener('mousemove', onMove); return () => el.removeEventListener('mousemove', onMove); }, [sent]); const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Informe seu nome'; if (!form.email.trim()) e.email = 'Informe seu e-mail'; else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'E-mail inválido'; if (!form.service) e.service = 'Escolha uma opção'; if (!form.message.trim() || form.message.trim().length < 10) e.message = 'Conte um pouco mais (mín. 10 caracteres)'; setErrors(e); return Object.keys(e).length === 0; }; const serviceLabel = { auto: 'Automação com IA', sys: 'Sistema personalizado', sup: 'Suporte técnico', other: 'Não tenho certeza', }; const budgetLabel = { lt5: 'Até R$ 5.000', '5-15': 'R$ 5.000 — R$ 15.000', '15-50': 'R$ 15.000 — R$ 50.000', gt50: 'Acima de R$ 50.000', }; const buildWhatsappUrl = () => { const lines = [ '*Nova solicitação de orçamento — Zera AI*', '', `*Nome:* ${form.name}`, `*E-mail:* ${form.email}`, ]; if (form.company.trim()) lines.push(`*Empresa:* ${form.company}`); lines.push(`*Serviço:* ${serviceLabel[form.service] || form.service}`); if (form.budget) lines.push(`*Investimento estimado:* ${budgetLabel[form.budget] || form.budget}`); lines.push('', '*Desafio / necessidade:*', form.message.trim()); const text = encodeURIComponent(lines.join('\n')); return `https://wa.me/5561999117557?text=${text}`; }; const submit = (ev) => { ev.preventDefault(); if (!validate()) return; setLoading(true); const url = buildWhatsappUrl(); setTimeout(() => { setLoading(false); setSent(true); window.open(url, '_blank', 'noopener,noreferrer'); }, 700); }; const upd = (k) => (e) => { setForm(f => ({ ...f, [k]: e.target.value })); if (errors[k]) setErrors(er => ({ ...er, [k]: undefined })); }; return (
Vamos conversar

Conte seu desafio. Devolvemos um plano.

Diagnóstico inicial gratuito. Resposta em até 1 dia útil.
{Ico.mail}
E-mail
zeraai03@gmail.com
{Ico.phone}
WhatsApp
+55 (61) 99911-7557
{Ico.pin}
Atendimento
Brasil — 100% remoto
{Ico.zap}
Tempo de resposta
< 24h úteis
{sent ? (
{Ico.check}

Tudo pronto!

Abrimos o WhatsApp com sua mensagem formatada — basta confirmar o envio. Caso a janela não tenha aberto, use o botão abaixo.

Abrir WhatsApp {Ico.arrow}
) : (
{errors.name &&
{errors.name}
}
{errors.email &&
{errors.email}
}
{errors.service &&
{errors.service}
}