// Phone mock VIVO do hero — iPhone frame espelhando a tela REAL do painel mobile // (docs/lp/referencias/app-dashboard-mobile.png): header com saudação + chip de // streak + sino/avatar, banner "CRIE. VENDA. GANHE.", stats 2x2, card de nível // com missões e a fileira "Vídeos que estão bombando" + tab bar. // Loop de ~8s: toast de missão (+120 XP) → barra de missões enche → streak pulsa // → carrossel de vídeos anda. Pausa de 2s. O toast é de missão porque é o que o // app tem hoje (não existe notificação de comissão por venda). // prefers-reduced-motion: frame estático no estado final. const PhoneMock = () => { const reduced = React.useMemo( () => window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, [] ); // stages: 0 idle · 1 toast de missão · 2 missões/bar · 3 streak pulsa · 4 vídeos andam const [stage, setStage] = React.useState(reduced ? 4 : 0); React.useEffect(() => { if (reduced) return; let timers = []; const run = () => { timers.forEach(clearTimeout); timers = []; setStage(0); timers.push(setTimeout(() => setStage(1), 900)); // 1. toast desliza + sino conta timers.push(setTimeout(() => setStage(2), 2400)); // 2. missão avança, barra enche timers.push(setTimeout(() => setStage(3), 4000)); // 3. streak pulsa timers.push(setTimeout(() => setStage(4), 5200)); // 4. carrossel de vídeos anda timers.push(setTimeout(run, 8000 + 2000)); // pausa 2s e loop }; run(); return () => timers.forEach(clearTimeout); }, [reduced]); const missaoFeita = stage >= 2; const videos = [ { img: "assets/products/produto-gocase-tote-rosa.png", marca: "Gocase", bg: "linear-gradient(180deg, #FBE9E1, #E0B3A0)" }, { img: "assets/products/produto-barbours-splash.png", marca: "Barbours", bg: "linear-gradient(180deg, #F5DEE4, #D8A3B2)" }, { img: "assets/products/produto-kokeshi-kit.png", marca: "Kokeshi", bg: "linear-gradient(180deg, #FBE3F0, #E3A8CB)" }, { img: "assets/products/produto-rituaria-suplementos.png", marca: "Rituária", bg: "linear-gradient(180deg, #F0EBE3, #C9BBA4)" }, ]; return (