/* ========================================== PAGE: MENTORIA — IA na Prática (Edição 01 · 2026) Sales page com seções dinâmicas e animadas. ========================================== */ // ---------- HERO MOTION: notificação de vaga + calendário animado ---------- const TAGS_BY_WEEK = [ ['Fundamentos','#FFE9D8','#FF6B1A'], ['Prompt','#E8DBFF','#7B3FF0'], ['Automação','#D7F0E0','#1F9D55'], ['Agentes','#FFD9D9','#E84855'], ['Construção','#FFF4D1','#C68A00'], ['Contexto','#D9EDFF','#1976D2'], ['Evolução','#F0E0FF','#7B3FF0'], ]; const MentoriaHeroMotion = () => { const [t, setT] = React.useState(0); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); const tm = setTimeout(() => setMounted(true), 50); return () => { cancelAnimationFrame(raf); clearTimeout(tm); }; }, []); // Float suave com período mais longo + amplitudes pequenas const float = (offset = 0, amp = 4, period = 0.55) => Math.sin(t * period + offset) * amp; // Notificação: ciclo de 9s — 0.0–0.12 fade-in + slide, 0.12–0.78 visível, 0.78–0.92 fade-out, 0.92–1.0 reset const notifCycle = (t % 9) / 9; let notifOpacity = 0; let notifTy = 14; if (notifCycle < 0.12) { const k = notifCycle / 0.12; const ease = 1 - Math.pow(1 - k, 3); // ease-out cubic notifOpacity = ease; notifTy = 14 - ease * 14; } else if (notifCycle < 0.78) { notifOpacity = 1; notifTy = 0; } else if (notifCycle < 0.92) { const k = (notifCycle - 0.78) / 0.14; const ease = Math.pow(k, 3); // ease-in cubic notifOpacity = 1 - ease; notifTy = -ease * 8; } // Sweep contínuo do "evento ativo" no calendário (ciclo lento, 1 evento por seg ~) const sweepIdx = Math.floor(t * 0.8) % 21; // 7 semanas * 3 eventos const sweepCol = sweepIdx % 7; const sweepRow = Math.floor(sweepIdx / 7); // Sweep da barra de módulos (smooth) const modSweep = (t * 1.1) % 10; return (
{/* SVG decorativo de fundo */} {[...Array(10)].map((_, i) => { const angle = (i / 10) * Math.PI * 2 + t * 0.18; const cx = 300 + Math.cos(angle) * 250; const cy = 240 + Math.sin(angle) * 150; const op = 0.25 + 0.45 * (0.5 + 0.5 * Math.sin(t * 0.9 + i)); return ; })} {/* Calendário das 7 semanas — top-left */}
Cronograma · 2026
7 sem 21 enc
{['SEM 01','SEM 02','SEM 03','SEM 04','SEM 05','SEM 06','SEM 07'].map((s, i) => (
{s}
{[0,1,2].map(j => { const isActive = sweepCol === i && sweepRow === j; const [label, bg, fg] = TAGS_BY_WEEK[i]; return (
{label}
{['19h','20h','21h'][j]}
); })}
))}
{/* Notificação de vaga — top-right (sempre montada, opacidade controla visibilidade) */}
Vaga aberta · Turma 2026
Restam poucas vagas · intensiva
agora
{/* Card flutuante: Investimento — middle-right */}
INVESTIMENTO
R$ 4.000
Menos de 200 reais por encontro
{/* Card flutuante: Módulos — bottom-left */}
10 MÓDULOS
{[...Array(10)].map((_, i) => { const dist = Math.abs(((modSweep - i + 10) % 10) - 0); const intensity = Math.max(0, 1 - dist * 0.6); const baseAlpha = i < 6 ? 0.4 : 0.12; const alpha = Math.min(1, baseAlpha + intensity * 0.6); return (
); })}
Progressivo · do entendimento à construção real
{/* Card flutuante: Tríade — bottom-right */}
A tríade
IA SIS AUT
Sistema · Automação · IA
); }; // ---------- FLUXO ANIMADO: Trigger > Switch > Action ---------- const FlowAutomacao = () => { const [t, setT] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const phase = (t % 7) / 7; // ciclo de 7s const triggerActive = phase > 0.05; const switchActive = phase > 0.3; const branchAActive = phase > 0.55; const branchBActive = phase > 0.55; const finalActive = phase > 0.78; return (
{/* Sidebar de processos disponíveis */}
Re-engajar leads
Roteamento de leads
Onboarding de cliente
IA aplicada · novo fluxo
Submissão de formulário
Saúde do cliente
Oportunidade de expansão
{/* Canvas com nós */}
{/* Linhas conectando nós */} {/* Linhas de fluxo */} {/* Pulsos animados */} {triggerActive && ( )} {/* Trigger node */}
Gatilho {triggerActive ? '✓ Ativado' : 'Aguardando'}
Quando tarefa identificada
Início do fluxo na rotina
{/* Switch node */}
Decisão {switchActive ? '✓ Roteado' : 'Aguardando'}
Switch · automatizar ou delegar a IA
{/* Branch labels */}
Automação
Agente IA
{/* Branch A — Automação */}
Sequência
Roda fluxo automatizado
{/* Branch B — Agente IA */}
Agente
Aciona agente com contexto
{/* Botão final/add */}
); }; // ---------- TIMELINE 7 SEMANAS — animado ---------- const Timeline7Semanas = () => { const [t, setT] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const semanas = [ { n: 'SEM 01', t: 'Fundamentos', mods: 'MÓD. 01', icon: 'lightbulb' }, { n: 'SEM 02', t: 'Prompt', mods: 'MÓD. 02', icon: 'sparkles' }, { n: 'SEM 03', t: 'Automação', mods: 'MÓD. 03 · 04', icon: 'workflow' }, { n: 'SEM 04', t: 'Agentes', mods: 'MÓD. 05', icon: 'brain' }, { n: 'SEM 05', t: 'Construção', mods: 'MÓD. 06 · 07', icon: 'cube' }, { n: 'SEM 06', t: 'Contexto', mods: 'MÓD. 08 · 09', icon: 'compass' }, { n: 'SEM 07', t: 'Evolução', mods: 'MÓD. 10', icon: 'rocket' }, ]; const activeIdx = Math.floor(t * 0.6) % semanas.length; return (
{semanas.map((s, i) => (
{s.n}
{s.t}
{s.mods}
))}
); }; // ---------- ANTES vs DEPOIS — toggle animado ---------- const AntesDepois = () => { const [side, setSide] = React.useState('depois'); React.useEffect(() => { const id = setInterval(() => { setSide(s => s === 'antes' ? 'depois' : 'antes'); }, 4500); return () => clearInterval(id); }, []); const antes = [ { ic: 'x-circle', t: 'Testar sem direção' }, { ic: 'x-circle', t: 'Consumir conteúdo solto' }, { ic: 'x-circle', t: 'Travar na aplicação' }, { ic: 'x-circle', t: 'Sentir sobrecarga' }, ]; const depois = [ { ic: 'check-circle', t: 'Construir com clareza' }, { ic: 'check-circle', t: 'Organizar a operação' }, { ic: 'check-circle', t: 'Evoluir com consciência' }, { ic: 'check-circle', t: 'Direcionar a tecnologia' }, ]; const list = side === 'antes' ? antes : depois; return (
{list.map((it, i) => (
{it.t}
))}
); }; // ---------- TRÍADE rotativa (Premium Redesign) ---------- const TriadeViz = () => { const [t, setT] = React.useState(0); const [hovered, setHovered] = React.useState(null); React.useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const rotation = t * 15; const pulse = Math.sin(t * 3) * 0.5 + 0.5; const fastPulse = Math.sin(t * 6) * 0.5 + 0.5; return (
{/* Orbits Background */} {/* Rotating Energy Rings */} {/* Dynamic Connections */} {/* Glowing Triangle Outline */} {/* Central Core */} {/* Main Nodes */} {/* Node 1: IA (Top) */} setT(prev => prev)} // placeholder for hover logic if needed style={{ cursor: 'pointer' }} > IA INTELIGÊNCIA {/* Node 2: Sistema (Bottom Left) */} SIS SISTEMA {/* Node 3: Automação (Bottom Right) */} AUT AUTOMAÇÃO {/* Flying Particles */} {[...Array(6)].map((_, i) => { const angle = (i / 6) * Math.PI * 2 + t * 0.4; const r = 160 + Math.sin(t * 2 + i) * 10; const px = 210 + Math.cos(angle) * r; const py = 210 + Math.sin(angle) * r; return ; })}
Quando essas três se conectam, você sai do básico e entra em construção real.
); }; // ---------- VAGAS LIMITADAS — countdown / progresso ---------- const VagasBar = ({ isPhoneViewport = false }) => { const total = 8; const ocupadas = 5; const pct = (ocupadas / total) * 100; return (
· Turma 2026 · Edição 01
Restam {total - ocupadas} vagas de {total}
Inscrições abertas
{[...Array(total)].map((_, i) => (
))}
Mentoria intensiva · individual · acompanhamento direto. Cada nova vaga sai do quadro.
); }; const MENTORIA_MOTION_PHRASES = [ { start: 0.6, end: 2.5, parts: [{ text: 'Você não está sem ' }, { text: 'informação.', accent: true }] }, { start: 3.1, end: 4.9, parts: [{ text: 'Está ' }, { text: 'sobrecarregado.', accent: true }] }, { start: 5.6, end: 7.1, parts: [{ text: 'Você ' }, { text: 'aprende…', accent: true }] }, { start: 7.7, end: 9.3, parts: [{ text: 'mas não ' }, { text: 'constrói.', accent: true }] }, { start: 10.4, end: 12.0, parts: [{ text: 'Mais uma ' }, { text: 'ferramenta.', accent: true }] }, { start: 12.8, end: 14.4, parts: [{ text: 'Mais um ' }, { text: 'teste.', accent: true }] }, { start: 15.1, end: 16.8, parts: [{ text: 'E nada ' }, { text: 'muda.', accent: true }] }, { start: 17.4, end: 19.8, parts: [{ text: 'O problema não é falta de ' }, { text: 'IA.', accent: true }] }, { start: 20.5, end: 22.2, parts: [{ text: 'É falta de ' }, { text: 'estrutura.', accent: true }] }, { start: 23.0, end: 24.8, parts: [{ text: 'Sem ' }, { text: 'método,', accent: true }, { text: ' tudo vira ' }, { text: 'caos.', accent: true }] }, { start: 25.8, end: 27.5, parts: [{ text: 'Você para de ' }, { text: 'testar.', accent: true }] }, { start: 28.1, end: 29.8, parts: [{ text: 'E começa a ' }, { text: 'construir.', accent: true }] }, ]; const MentoriaMotionPhrases = ({ seed = 0, isPhoneViewport = false }) => { const [time, setTime] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { setTime(((now - start) / 1000) % 30); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [seed]); const activePhrase = MENTORIA_MOTION_PHRASES.find((phrase) => time >= phrase.start && time < phrase.end); let opacity = 0; let translateY = 0; if (activePhrase) { const localTime = time - activePhrase.start; const introProgress = Math.min(1, localTime / 0.2); const outroProgress = Math.min(1, (activePhrase.end - time) / 0.2); opacity = Math.min(introProgress, outroProgress); if (localTime < 0.2) { translateY = (1 - introProgress) * 16; } else if (time > activePhrase.end - 0.2) { translateY = -(1 - outroProgress) * 10; } } return (
{activePhrase ? activePhrase.parts.map((part, index) => ( {part.text} )) : null}
); }; // ---------- PÁGINA PRINCIPAL ---------- const MentoriaPage = ({ onNav }) => { const [isPhoneViewport, setIsPhoneViewport] = React.useState(() => ( typeof window !== 'undefined' && window.matchMedia('(max-width: 480px)').matches )); const [mentoriaMotionSeed, setMentoriaMotionSeed] = React.useState(0); React.useEffect(() => { if (typeof window === 'undefined') return undefined; const media = window.matchMedia('(max-width: 480px)'); const syncViewport = (event) => setIsPhoneViewport(event.matches); setIsPhoneViewport(media.matches); if (media.addEventListener) { media.addEventListener('change', syncViewport); return () => media.removeEventListener('change', syncViewport); } media.addListener(syncViewport); return () => media.removeListener(syncViewport); }, []); return (
{/* HERO */}
Mentoria · Turma 2026 · Edição 01

IA na Prática.
Automação, agentes
& integrações.

Uma mentoria intensiva, individual e feita à mão para quem quer entender de verdade como usar IA no mundo real — automatizar processos, conectar sistemas e criar soluções simples que aumentam a produtividade.

7 semanas · 21 encontros 10 módulos progressivos Acompanhamento direto
Vagas limitadas · turma intensiva e individual.
{/* MOTION BAND */}