// Demo Tour — full dashboard mock with auto-rotating hotspots + descriptive side panel. const TOUR_STEPS = [ { id: "kpis", title: "KPIs vivos da empresa", body: "Obras ativas, equipe em campo, receita e resultado operacional do mês — sem você fechar planilha. Os números recalculam a cada novo lançamento.", bullets: ["Por consolidado, por obra ou por cliente", "Sem precisar 'fechar o mês' manualmente"], icon: , }, { id: "obras-soft", title: "Margem por obra, sempre à vista", body: "Saiba — em segundos — qual obra está dando lucro e qual está sangrando. Margem bruta calculada automaticamente sobre as diárias e materiais lançados.", bullets: ["Identifique obra perdedora antes do fim", "Defenda seu preço com dado, não 'feeling'"], icon: , }, { id: "dre", title: "DRE consolidado — automático", body: "O resultado da sua empresa em formato contábil de verdade. Pronto pro contador, pronto pro banco, pronto pra sua decisão de investir.", bullets: ["Receita, custos, lucro bruto e operacional", "Exportável em PDF auditado"], icon: , }, { id: "chart", title: "Evolução dos últimos 6 meses", body: "Veja a curva da empresa por mês: receita de obras, assistência técnica, custos diretos e resultado. Pra saber se você está crescendo ou patinando.", bullets: ["Compare meses de pico vs. baixa", "Antecipe sazonalidade da construção"], icon: , }, { id: "obra-table", title: "Resultado por obra do mês", body: "A linha que importa: quanto cada obra rendeu este mês. Receita, custo da equipe e resultado, sem precisar abrir 3 abas pra somar.", bullets: ["Atualizado a cada check-in da equipe", "Histórico mantido pra sempre"], icon: , }, { id: "nav-folha", title: "Folha de ponto no celular", body: "Mestre de obra faz check-in dos funcionários no celular. Geolocalizado, com foto. Vira diária no DRE no instante seguinte.", bullets: ["Funciona offline no canteiro", "Acabou a planilha de presença"], icon: , }, ]; function DemoTour() { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const t = setInterval(() => setIdx(i => (i+1) % TOUR_STEPS.length), 5000); return () => clearInterval(t); }, [paused]); const step = TOUR_STEPS[idx]; return (
Demo guiada · sem cadastro

O sistema inteiro,
destrinchado pra você.

Esse é o BinGest de verdade — só que com dados de exemplo. Acompanhe o tour automático ou clique em qualquer parte do dashboard pra mergulhar.

{paused ? "Pausado" : `Tour rodando · ${idx+1}/${TOUR_STEPS.length}`}
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 24, alignItems: "stretch", }} className="demo-grid" > {/* Left: dashboard */}
{/* Right: feature panel */}
Quero esse controle na minha empresa ou agende um treinamento ao vivo com nosso time
); } window.DemoTour = DemoTour;