/* global React */ // Sections — Hero / How it works / Stats ticker // Components exported: Nav, Hero, StatsTicker, HowItWorks const { useState, useEffect, useRef } = React; /* ───────────────────── Reveal-on-scroll hook ───────────────────── */ function useReveal(deps = []) { useEffect(() => { const showAll = () => document.querySelectorAll('.reveal:not(.in)').forEach(el => el.classList.add('in')); if (!('IntersectionObserver' in window)) { showAll(); return; } // Reveal anything already in viewport on mount (synchronous) const vh = window.innerHeight; document.querySelectorAll('.reveal:not(.in)').forEach(el => { const r = el.getBoundingClientRect(); if (r.top < vh * 0.95 && r.bottom > 0) el.classList.add('in'); }); // IO for what's still hidden const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.05, rootMargin: '0px 0px -4% 0px' }); document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el)); // Safety net: after 1.2s, anything still hidden gets revealed (so screenshots/SSR don't break) const t = setTimeout(showAll, 1200); return () => { io.disconnect(); clearTimeout(t); }; // eslint-disable-next-line }, deps); } /* ───────────────────── Animated counter ───────────────────── */ function CountUp({ to, prefix='', suffix='', duration=1800, decimals=0 }) { const ref = useRef(null); const [val, setVal] = useState(0); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !seen) { setSeen(true); const start = performance.now(); const step = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setVal(to * eased); if (t < 1) requestAnimationFrame(step); else setVal(to); }; requestAnimationFrame(step); } }); }, { threshold: 0.5 }); io.observe(el); return () => io.disconnect(); }, [to, duration, seen]); const fmt = decimals ? val.toLocaleString('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : Math.round(val).toLocaleString('pt-BR'); return {prefix}{fmt}{suffix}; } /* ───────────────────── NAV ───────────────────── */ function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const f = () => setScrolled(window.scrollY > 8); f(); window.addEventListener('scroll', f, { passive:true }); return () => window.removeEventListener('scroll', f); }, []); return ( ); } /* ───────────────────── HERO ───────────────────── */ function Hero() { useReveal(); return (
{/* Giant gorilla mascot watermark */}
SaaS para barbearias · Beta aberto

O SaaS que paga sua barbearia.

Gerencie agenda, comanda, comissão, assinatura recorrente, recovery de inadimplência e crescimento — em um único login.

Substitui AppBarber Trinks Tagarela ZAP

Sem cartão. Migra do AppBarber/Trinks em 1 clique.

{[0,1,2,3,4].map(i => ( ))}

Barbearias que já trocaram economizam em média R$ /mês em comissão recalculada, comandas resgatadas e assinatura recuperada.

{/* Floating stat cards */}
Pote Vindi · ao vivo
R$
● +R$ 89 há 6s
Recovery hoje
23 de 49 inadimplentes
Comanda #1284
R$ 155,00
Margem barbearia R$ 73,45
); } /* ───────────────────── STATS TICKER ───────────────────── */ function StatsTicker() { const items = [ { v: 'R$ 1.800', l: 'economia média/mês' }, { v: '30–60%', l: 'recovery em 14 dias' }, { v: '12', l: 'categorias de comissão' }, { v: '9 telas', l: 'portal do cliente PWA' }, { v: '32', l: 'rankings BI nativos' }, { v: '< 10 min', l: 'pra abrir 1ª comanda' }, { v: '1 clique', l: 'migração AppBarber/Trinks' }, { v: '90 dias', l: 'trial sem cartão' }, ]; const doubled = [...items, ...items]; return (
{doubled.map((it, i) => (
{it.v} {it.l}
))}
); } /* ───────────────────── COMO FUNCIONA ───────────────────── */ function HowItWorks() { useReveal(); const steps = [ { n: '01', t: 'Conecte sua barbearia', d: 'Cadastre nome, CNPJ e seu 1º colaborador. 3 minutos.', time: '~3 min', icon: ( ), }, { n: '02', t: 'Importe seus dados', d: 'Faça upload do CSV do AppBarber ou Trinks. Gorilla mapeia colunas, dedupa clientes e cria histórico em background.', time: 'opcional', icon: ( ), }, { n: '03', t: 'Comece a operar', d: 'Catálogo seed com 40 serviços e 80 produtos curados pra barbearia masculina já vem populado. Você ajusta preços e abre a primeira comanda em menos de 10 minutos.', time: '< 10 min', icon: ( ), }, ]; return (
Onboarding

Em 3 passos você está operando.

Da assinatura à primeira comanda em menos de 15 minutos. Sem treinamento, sem onboarding pago.

{steps.map((s, i) => (
{s.n} {s.time}
{s.icon}

{s.t}

{s.d}

{i < steps.length - 1 && ( )}
))}
); } Object.assign(window, { Nav, Hero, StatsTicker, HowItWorks, useReveal, CountUp });