/* global React */ // Sections — Features tabs / Demo video placeholder / Comparativo const { useState, useEffect, useRef } = React; /* ───────────────────── FEATURES (12 com tabs verticais) ───────────────────── */ const FEATURES = [ { id: 'agenda', title: 'Agenda Premium', short: '7 ações em slot vazio. 17 em agendamento existente.', body: 'Clique-direito com 7 ações em slot vazio e 17 ações em agendamento existente. Drag-and-drop pra reagendar. Encaixe automático sugerido pela IA. Fila walk-in e lista de espera nativas.', icon: 'M3 5h18v16H3z M3 9h18 M8 3v4 M16 3v4', keypts: ['Drag-and-drop reagendar','Sugestão IA de encaixe','Walk-in nativo','17 ações por agendamento'], badge: 'CORE', }, { id: 'comanda', title: 'Comanda com CSP Real', short: 'Rastreia insumos e calcula custo do serviço em tempo real.', body: 'Rastreia insumos consumidos por serviço (lâmina, toalha, shampoo) e calcula custo do serviço prestado em tempo real. Você sabe a margem de cada corte na hora.', icon: 'M9 2v6 M15 2v6 M9 22h6 M3 9h18v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', keypts: ['Insumos por serviço','Margem em tempo real','NFC-e nativa','Split de pagamento'], badge: 'CORE', }, { id: 'comissao', title: 'Comissão em 12 categorias', short: 'Recálculo retroativo em 1 clique pra corrigir o mês passado.', body: 'Serviço, produto, gorjeta, bonificação, pacote, vale, comanda, desconto, dedução, remuneração fixa, misto e 100%. Recálculo retroativo em 1 clique pra corrigir erro do mês passado.', icon: 'M12 2v20 M5 8h9a3 3 0 0 1 0 6H8a3 3 0 0 0 0 6h11', keypts: ['12 tipos de comissão','Recálculo retroativo','Fechamento automático','Vale conferido'], badge: 'POPULAR', }, { id: 'recovery', title: 'Recovery dedicado', short: 'Régua automática WhatsApp + Email + SMS + ligação humana.', body: 'Régua de cobrança automática com 3 a 5 toques (WhatsApp + Email + SMS + ligação humana). Recupera 30–60% dos inadimplentes em até 14 dias. Tem quarentena diferenciada pra cartão (3 dias) vs boleto (14 dias).', icon: 'M21 12a9 9 0 1 1-3.5-7.1 M21 4v6h-6', keypts: ['30–60% recuperação','Régua multi-canal','Quarentena por método','Recovery manual escalável'], badge: 'DIFERENCIAL', }, { id: 'assinatura', title: 'Assinatura Vindi nativa', short: 'Pote do mês em tempo real. Reconciliação F12 automática.', body: 'Cobrança recorrente com 3 tipos de vencimento (data fixa, base contratação, base contratação fixa). Pote do mês em tempo real (você vê o saldo subir a cada webhook pago). Reconciliação Vindi F12 detecta divergência API vs DB automaticamente.', icon: 'M3 7h18v10H3z M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2 M12 12h0', keypts: ['Pote real-time','3 tipos de vencimento','Reconciliação F12','Webhooks ao vivo'], badge: 'DIFERENCIAL', }, { id: 'portal', title: 'Portal do Cliente PWA', short: '9 telas. Login com OTP. Carteira consolidada em 5 abas.', body: '9 telas dedicadas: login com OTP (WhatsApp + SMS + fallback), agendar em 4 passos, carteira consolidada (5 abas: pacotes, cashback, vale-presente, fidelidade, assinatura), perfil LGPD com opt-ins separados, histórico calendário, indicar amigo com Web Share, avaliar NPS.', icon: 'M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01', keypts: ['PWA — sem app store','OTP multi-canal','Web Share API','LGPD com opt-ins'], badge: 'CORE', }, { id: 'cashback', title: 'Cashback nativo', short: 'Cliente acumula em cada comanda e abate na próxima visita.', body: 'Cliente acumula automaticamente em cada comanda, vê no portal e abate na próxima visita. Sem integração externa, sem taxa de terceiro.', icon: 'M12 2l2.39 4.84 5.34.78-3.86 3.77.91 5.32L12 14.2l-4.78 2.51.91-5.32-3.86-3.77 5.34-.78z', keypts: ['Acúmulo automático','Sem terceiro','Regra customizável','Abate em comanda'], badge: '', }, { id: 'cargos', title: 'Cargos modulares', short: 'Permissão por ação. Audit log universal.', body: 'Recepção pode lançar vale e cadastrar barbeiro, mas não mexe em permissão nem altera comissão. Cada ação tem toggle granular. Audit log universal rastreia tudo.', icon: 'M12 11c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2', keypts: ['Toggle granular','Audit log','Cargos prontos','Multi-unidade'], badge: '', }, { id: 'ia', title: 'IA Assistente BETA', short: 'Pergunta em linguagem natural. Devolve gráfico.', body: 'Pergunta em linguagem natural ("quantos clientes fizeram corte + barba em maio?"). Ela gera SQL, executa, devolve gráfico. Zero curva de aprendizado.', icon: 'M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z', keypts: ['Texto → SQL → gráfico','Beta gratuito','Cobertura total do schema','Anti-alucinação'], badge: 'BETA', }, { id: 'bi', title: 'BI Analítico + 32 Rankings', short: 'Demografia em 7 cortes. Tudo exportável.', body: 'Demografia em 7 cortes (sexo, idade, cidade, estado, região, bairro, cadastro/mês). Tempo no salão, no-show por cliente, cancelamento por motivo. Tudo exportável em CSV/Excel.', icon: 'M3 3v18h18 M7 13l4-4 4 4 5-5', keypts: ['32 rankings prontos','7 cortes demográficos','Export CSV/Excel','Dashboards customizáveis'], badge: '', }, { id: 'zap', title: 'GORILLA ZAP', short: 'WhatsApp integrado nativo — sem terceiro.', body: 'WhatsApp integrado nativo — envia lembrete pré-agendamento, confirma 2h antes, agradece pós-atendimento, dispara campanha de retorno. Sem terceiro, sem dupla cobrança.', icon: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z M9 10a3 3 0 0 1 6 0c0 2-3 3-3 3 M12 17h.01', keypts: ['Lembrete 24h/2h','Pós-atendimento','Campanhas de retorno','Sem dupla cobrança'], badge: 'POPULAR', }, { id: 'crescimento', title: 'Crescimento sem dor', short: 'SMS + Email + Indica + Banco de Artes.', body: 'SMS Marketing (Twilio) + Email Marketing (Resend) + Programa Indica com 3 meses grátis pra ambos (indicador e indicado) + Banco de Artes com gerador de banners SVG→PNG (Stories, Feed, Banner) + Convite Retorno automático pra cliente sumido.', icon: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z', keypts: ['Twilio SMS','Resend email','Indica 3 meses grátis','Banco de artes auto'], badge: '', }, ]; function FeatureIcon({ d }) { return ( ); } function Features() { useReveal(); const [active, setActive] = useState(0); const f = FEATURES[active]; return (
12 razões pra trocar

Tudo que sua barbearia precisa,
num único login.

Cada feature foi desenhada pra resolver uma dor específica que o AppBarber e o Trinks deixam de lado. Clique pra ver os detalhes.

{/* Tab list */}
{FEATURES.map((feat, i) => ( ))}
{/* Preview pane */}
Feature {String(active+1).padStart(2,'0')} / 12 {f.badge && {f.badge}}

{f.title}

{f.body}

{f.keypts.map((k, i) => (
{k}
))}
); } /* Feature preview — real product screenshot */ function FeaturePreview({ id, title }) { return (
{title} · UI real live
{`Screenshot
); } /* ───────────────────── GORILLA IMPACT (parallax) ───────────────────── */ // Full-bleed dramatic section with scroll-linked giant gorilla mascot. // variant: 'rage' | 'calm' function GorillaImpact({ variant = 'rage' }) { const ref = useRef(null); const [progress, setProgress] = useState(0); useEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; const total = vh + r.height; const passed = vh - r.top; setProgress(Math.max(0, Math.min(1, passed / total))); }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); const variants = { rage: { eyebrow: 'Por que Gorilla?', h: 'Pare de perder dinheiro\nem planilha de Excel.', sub: 'Cada R$ 1.000 que entra na sua barbearia, em média R$ 80 escapam: inadimplência ignorada, comissão errada, comanda no fiado. O Gorilla fecha o vazamento.', stats: [ { v: '8%', l: 'vazamento médio do faturamento' }, { v: '47%', l: 'do que escapa, recuperado em 90 dias' }, { v: '0', l: 'planilhas necessárias' }, ], }, calm: { eyebrow: 'Por barbearias, pra barbearias', h: 'Software de gorila.\nPra negócio de gente.', sub: 'O Gorilla foi desenhado lado a lado com 50 barbearias brasileiras. Cada feature aqui já matou uma planilha. Cada tela existe porque um dono pediu primeiro.', stats: [ { v: '50', l: 'barbearias no design da v1' }, { v: '0', l: 'features inventadas em sala fechada' }, { v: '1', l: 'login pra operar tudo' }, ], }, }; const v = variants[variant] || variants.rage; // Parallax math const scale = 0.55 + progress * 0.9; const rotate = (progress - 0.5) * 8; const opacity = 0.04 + progress * 0.14; const yShift = (0.5 - progress) * 120; const glowOpacity = Math.max(0, progress - 0.2) * 0.7; return (
{v.eyebrow}

{v.h.split('\n').map((line, i) => ( {line} ))}

{v.sub}

{v.stats.map((s, i) => (
{s.v}
{s.l}
))}
); } /* Trigger reveal on GorillaImpact when in viewport */ function useGorillaReveal() { useEffect(() => { const sections = document.querySelectorAll('.gimpact'); if (!sections.length) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-in'); }); }, { threshold: 0.2 }); sections.forEach(s => io.observe(s)); setTimeout(() => sections.forEach(s => s.classList.add('is-in')), 1500); return () => io.disconnect(); }, []); } /* ───────────────────── COMPARATIVO ───────────────────── */ function Compare() { useReveal(); const rows = [ ['CSP real (custo do serviço prestado)', true, false, false], ['Comissão em 12 categorias', true, false, false], ['Recálculo retroativo 1-clique', true, false, 'parcial'], ['Recovery de inadimplência nativo', true, false, false], ['Assinatura Vindi + Pote real-time', true, 'addon', false], ['Reconciliação Vindi F12', true, false, false], ['Portal do Cliente PWA', true, true, 'parcial'], ['Cashback nativo (sem terceiro)', true, false, false], ['IA Assistente (texto → SQL)', true, false, false], ['Permissões por ação + audit log', true, 'parcial', false], ['WhatsApp integrado nativo', true, 'addon', 'addon'], ['32 rankings + BI exportável', true, 'parcial', false], ['Migração 1-clique (CSV)', true, false, false], ['Preço (Solo)', 'R$ 99/mês', 'R$ 149/mês*', 'R$ 129/mês*'], ]; const renderCell = (v, isGorilla) => { if (v === true) return ✓; if (v === false) return —; if (v === 'parcial') return parcial; if (v === 'addon') return add-on; return {v}; }; return (
vs concorrentes

Por que barbearias estão trocando.

Comparativo direto, sem floreio. Recursos nativos, sem add-on cobrado por fora.

Recurso
Gorilla
AppBarber
Trinks
{rows.map((r, i) => (
{r[0]}
{renderCell(r[1], true)}
{renderCell(r[2])}
{renderCell(r[3])}
))}

* Preços de concorrentes estimados a partir de planos públicos comparáveis. Maio/2026.

); } Object.assign(window, { Features, GorillaImpact, useGorillaReveal, Compare });