// Funil Gamificado - "Pare de jogar jogos de azar" // Estrutura em React com Tailwind e navegação por páginas import { useState } from "react"; import { useNavigate, BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { Button } from "@/components/ui/button"; const etapas = [ "Boas-vindas", "Reflexão Pessoal", "Entenda o Custo Real", "Quebra de Crenças", "Mini-desafio de Clareza", "História de Sucesso", "Comprometimento Pessoal", "Recompensa Final" ]; const recompensas = [50, 70, 60, 90, 80, 100, 70, 0]; // Saldo acumulado por etapa function BarraSuperior({ etapaAtual, saldo }) { return (
Etapa {etapaAtual + 1} de 8 Saldo: R$ {saldo}
); } function Etapa({ numero, titulo, onContinuar, saldo }) { return (

{titulo}

Conteúdo da etapa "{titulo}" vai aqui. Crie envolvimento emocional e prático.

); } function EtapaFinal({ saldo }) { return (

Parabéns! 🏆

Você completou o desafio e acumulou R$ {saldo}!
Com esse saldo simbólico, você acaba de destravar uma recompensa exclusiva:
1 Sessão Gratuita com Especialista + Ebook "Pare de Jogar em 7 Passos"

); } function App() { const [saldo, setSaldo] = useState(0); const navigate = useNavigate(); const handleAvancar = (etapa) => { setSaldo((prev) => prev + recompensas[etapa]); navigate(`/etapa/${etapa + 1}`); }; return ( {etapas.map((titulo, index) => ( ) : ( handleAvancar(index)} /> ) } /> ))} } /> ); } export default function RootApp() { return ( ); }