// ============================================================ // AgenticX — Página comercial: seções de layout + PricingPage // ============================================================ // ---------- Hero ---------- const PricingHero = ({ annual, setAnnual }) => (
Planos e preços

Atendimento com IA,
Kanban e suporte
que escala com você

Centralize seus canais, organize a operação e aumente a produtividade do time com automações, inteligência artificial e gestão visual. Escolha o plano adequado ao tamanho da sua operação.

); // ---------- Plans grid ---------- const PlansGrid = ({ annual }) => (
{PLANS.map((p) => )}

Ao selecionar o plano anual, os valores mensais exibidos correspondem à contratação por 12 meses.

); // ---------- Plan infographics ---------- const INFOGRAPHICS = [ { id: 'starter', name: 'Starter', src: 'assets/plano-starter.png' }, { id: 'business', name: 'Business', src: 'assets/plano-business.png' }, { id: 'enterprise', name: 'Enterprise', src: 'assets/plano-enterprise.png' }, ]; const PlanInfographics = () => { const [active, setActive] = React.useState('business'); const current = INFOGRAPHICS.find((p) => p.id === active) || INFOGRAPHICS[0]; return (
Como cada plano funciona

Veja cada plano em detalhe

p.id === active)} * (100% - 0.5rem) / 3 + 0.25rem)`, width: 'calc((100% - 0.5rem) / 3)' }} > {INFOGRAPHICS.map((p) => { const on = p.id === active; return ( ); })}
{`Infográfico
); }; // ---------- Comparison table ---------- const Cell = ({ value }) => { if (value === true) return ; if (value === false) return —; return {value}; }; const ComparisonTable = () => (
Comparativo

Tudo o que cada
plano inclui

{PLANS.map((p) => ( ))} {COMPARE_GROUPS.map((g, gi) => ( {g.rows.map((r, ri) => ( {r.v.map((val, vi) => ( ))} ))} ))}
{p.name}
{p.fromPrefix ? 'a partir de ' : ''}{p.monthly}/mês
{g.label}
{r.f}
); // ---------- Add-ons ---------- const AddOns = () => (
Recursos adicionais

Expanda sem trocar
de plano

Cresça a operação conforme a demanda. Recursos adicionais são cobrados de forma recorrente sobre o seu plano atual.

{ADDONS.map((a, i) => (

{a.title}

{a.note}

{a.price}
{a.unit}
))}
); // ---------- Capabilities ---------- const Capabilities = () => (
O que está incluído

Uma plataforma
completa de operação

{CAPABILITIES.map((c, i) => { const I = c.I; return (

{c.title}

{c.text}

    {c.items.map((it, j) => (
  • {it}
    • ))}
); })}
); // ---------- Important info ---------- const ImportantInfo = () => (
Informações importantes

O que considerar
antes de contratar

    {IMPORTANT.map((t, i) => (
  • {t}
    • ))}
); // ---------- Commercial FAQ ---------- const PricingFAQ = () => { const [open, setOpen] = React.useState(0); return (
Dúvidas comerciais

Perguntas
frequentes

Não encontrou o que procura? Fale com nosso time.

{PRICING_FAQS.map((f, i) => (

{f.a}

))}
); }; // ---------- Final CTA ---------- const PricingCTA = () => (

Pronto para organizar
seu atendimento?

Comece no plano ideal para hoje e expanda quando precisar. Sem trocar de ferramenta.

); // ---------- Page ---------- const PricingPage = () => { const [annual, setAnnual] = React.useState(false); return (
); }; Object.assign(window, { PricingHero, PlansGrid, PlanInfographics, ComparisonTable, AddOns, Capabilities, ImportantInfo, PricingFAQ, PricingCTA, PricingPage, });