/* global React, CTA */ const { useState: useStateB2, useRef: useRefB2, useEffect: useEffectB2 } = React; // ====== BLOCO 4 — Antes / Depois (slider) ====== function BeforeAfter() { const [pos, setPos] = useStateB2(50); const wrapRef = useRefB2(null); const dragging = useRefB2(false); const setFromX = (clientX) => { const r = wrapRef.current.getBoundingClientRect(); const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); setPos(p); }; useEffectB2(() => { const move = (e) => { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; setFromX(x); }; const up = () => { dragging.current = false; }; window.addEventListener("mousemove", move); window.addEventListener("touchmove", move, { passive: true }); window.addEventListener("mouseup", up); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("touchmove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchend", up); }; }, []); const rows = [ { i: "confused", a: '"Não sei o que quero fazer"', b: "Ranking de 3–5 carreiras com vantagem natural" }, { i: "spiral", a: "Escolha por exclusão / pressão social", b: "Decisão fundamentada em interesse + perfil comportamental" }, { i: "money", a: "Risco de R$ 8–25k/ano em curso abandonado", b: "R$ 300 — investimento único e preventivo" }, { i: "shrug", a: '"Vou tentar e ver no que dá"', b: "Plano com áreas de destaque e demanda de mercado" }, { i: "anxious", a: "Ansiedade pré-vestibular", b: "Clareza e direção" }, ]; return (
Antes & depois

Como muda a conversa em casa.

Arraste o controle para comparar o antes do mapeamento e o depois do laudo IPGS.

{ dragging.current = true; setFromX(e.clientX); }} onTouchStart={(e) => { dragging.current = true; setFromX(e.touches[0].clientX); }} >
Antes
[ TODO-MEDIA · jovem confuso ]
Depois
[ TODO-MEDIA · jovem decidido ]
{rows.map((r) => (
{r.a} {r.b}
))}
Quero esse depois — começar agora
); } // ====== BLOCO 5 — Solução em 1 frase ====== function OneLine() { return (
A solução

20 minutos.
Laudo científico. Direção certa.

); } // ====== BLOCO 6 — Como funciona (4 passos) ====== function HowItWorks() { const steps = [ { n: "01", t: "Preencha cadastro e pague R$ 300", time: "1 min", icon: () }, { n: "02", t: "Responda 40 perguntas RIASEC + DISC", time: "15–20 min", icon: () }, { n: "03", t: "Equipe IPGS analisa o laudo", time: "até 48h", icon: () }, { n: "04", t: "Receba PDF + página de resultados online", time: "imediato", icon: () }, ]; return (
Como funciona

Quatro passos. Nenhum palpite.

RIASEC mede o interesse vocacional (6 perfis). {" "}DISC mede o comportamento (4 dimensões). {" "}Duas metodologias consolidadas internacionalmente, cruzadas em um único laudo.

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

{s.t}

))}
Comprar mapeamento — R$ 300
); } window.BeforeAfter = BeforeAfter; window.OneLine = OneLine; window.HowItWorks = HowItWorks;