// Ato 1 da página: Nav, Hero (phone vivo), A Onda (102x), Espelho da dor + HowItWorks (Ato 2 pendente). // Breakpoints únicos da LP: mobile (≤640) e desktop (>960). Nada fora disso. const BP = { mobile: 640, desktop: 960 }; window.BP = BP; // ============================================ // useReveal — IntersectionObserver helper // ============================================ const useReveal = (threshold = 0.08) => { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.classList.add("in"); io.unobserve(el); } }); }, { threshold, rootMargin: "0px 0px -30px 0px" } ); io.observe(el); return () => io.disconnect(); }, [threshold]); return ref; }; window.useReveal = useReveal; // ============================================ // useMediaQuery — true quando a query casa; escuta mudanças (rotação, resize) // ============================================ const useMediaQuery = (query) => { const [matches, setMatches] = React.useState( () => window.matchMedia(query).matches ); React.useEffect(() => { const mq = window.matchMedia(query); const onChange = (e) => setMatches(e.matches); mq.addEventListener("change", onChange); setMatches(mq.matches); return () => mq.removeEventListener("change", onChange); }, [query]); return matches; }; window.useMediaQuery = useMediaQuery; // ============================================ // SplitReveal — word-by-word. EXCLUSIVO do H1 do hero (regra §4.2 do design). // lines: [{ parts: [{text, color?}] }, ...] each entry is a new line // ============================================ const SplitReveal = ({ lines, startImmediately = false, startDelay = 0, baseDelay = 0, wordDelay = 55, threshold = 0.35, className, ariaLabel, }) => { const ref = React.useRef(null); const [active, setActive] = React.useState(false); React.useEffect(() => { if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setActive(true); return; } if (startImmediately) { const t = setTimeout(() => setActive(true), startDelay); return () => clearTimeout(t); } const el = ref.current; if (!el) return; let t; const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) { t = setTimeout(() => setActive(true), startDelay); io.unobserve(el); } }), { threshold, rootMargin: "0px 0px -40px 0px" } ); io.observe(el); return () => { io.disconnect(); clearTimeout(t); }; }, [startImmediately, startDelay, threshold]); let wordIdx = 0; const fullText = lines.map((ln) => ln.parts.map((p) => p.text).join("")).join(" "); return ( ); }; window.SplitReveal = SplitReveal; // ============================================ // Logo lockup // ============================================ const Logo = ({ size = 38, onDark = false }) => (
GoCreators
GOCREATORS. by gogroup
); window.Logo = Logo; // ============================================ // Nav // ============================================ const Nav = () => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; window.Nav = Nav; // ============================================ // Hero — copy à esquerda, phone VIVO à direita (§3.1 do design). // Orquestração total < 1.5s: eyebrow 0ms → H1 word-by-word 150ms → // sub 500ms → CTAs 620ms → trust 740ms · phone entra em 400ms. // ============================================ const Hero = () => { const [loaded, setLoaded] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []); const cls = () => "fade-up" + (loaded ? " is-active" : ""); return (
As marcas top 1 em vendas do TikTok Shop [DADO: validar claim]

Profissionalize seu perfil, aprenda com quem mais vende e venda os produtos de 6 marcas que já são febre no TikTok. Comissão, método e prêmios de verdade: do PIX ao Porsche.

Quero vender mais Ver como funciona
Grátis pra sempre Curso e comunidade inclusos Comece a vender hoje
); }; window.Hero = Hero; // ============================================ // Faixa de marcas — marquee contínuo com as logos das 6 marcas do GoGroup. // Duas variantes: solta (desktop, abaixo do hero, faixa full-bleed) e // noHero (mobile, dentro do hero acima do phone, sem precisar de scroll). // Vida contínua (regra §4.3). prefers-reduced-motion: fileira estática. // ============================================ const FaixaMarcas = ({ noHero = false }) => { const logos = [ { src: "assets/brands/gocase.png", alt: "Gocase", h: 34 }, { src: "assets/brands/barbours.png", alt: "Barbours", h: 46 }, { src: "assets/brands/lescent.png", alt: "Lescent", h: 24 }, { src: "assets/brands/rituaria.png", alt: "Rituária", h: 34 }, { src: "assets/brands/kokeshi.png", alt: "Kokeshi", h: 28 }, { src: "assets/brands/apice.png", alt: "Ápice", h: 36 }, ]; return (
{/* 6 cópias: metade do track (3 cópias ≈ 2.760px) precisa cobrir ultrawide 2560px. Se mudar o nº de cópias, escalar a duração de faixa-scroll na mesma proporção. */} {[0, 1, 2, 3, 4, 5].map((copia) => ( {logos.map((l) => ( {copia ))} ))}
); }; window.FaixaMarcas = FaixaMarcas; // ============================================ // A Onda (102x) — tipográfica pura, count-up scroll-scrubbed (§3.2). // Única seção com scrub: o número varre 1x → 102x conforme a seção entra // e crava em 102x quando 60% dela está visível. // ============================================ const Onda = () => { const secRef = React.useRef(null); const reduced = React.useMemo( () => window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, [] ); const [n, setN] = React.useState(reduced ? 102 : 1); React.useEffect(() => { if (reduced) return; let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = null; const el = secRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; const p = Math.min(1, Math.max(0, (vh - r.top) / (r.height * 0.6))); const eased = 1 - Math.pow(1 - p, 2); setN(Math.max(1, Math.round(1 + 101 * eased))); }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, [reduced]); return (
O momento é agora

O TikTok Shop cresceu {n}x no primeiro ano de Brasil. E ainda está começando.

De US$ 1 milhão para US$ 46 milhões por mês em vendas. O número de criadores afiliados ganhando comissão cresceu 46x. Não é tarde demais: é o começo. A pergunta é se você entra com método ou fica olhando.

46x
mais criadores afiliados ativos ganhando comissão
US$ 46 mi/mês
em vendas no primeiro ano (era US$ 1 mi/mês)
fonte: TikTok Newsroom, mai/2026
); }; window.Onda = Onda; // ============================================ // Espelho da dor — objeções como bolhas de comentário de TikTok (§3.3). // Cada bolha chega como mensagem (stagger), com "digitando…" de 300ms // antes da resposta da GoCreators. Sem card container. // ============================================ const EspelhoDaDor = () => { const ref = useReveal(0.25); const pares = [ { ini: "J", q: "Não tenho seguidores suficiente.", r: "O TikTok pede 2 mil seguidores pra liberar o Shop. A gente te ajuda a chegar lá, e daí em diante vídeo bom vende com 200 views." }, { ini: "T", q: "Não sei o que postar.", r: "A gente te mostra o que está vendendo agora, com roteiro." }, { ini: "L", q: "Já tentei e não vendi.", r: "Vender é técnica, não sorte. Técnica se aprende." }, ]; return (

Você já viu todo mundo vendendo no TikTok Shop. {" "} A pergunta é: por que ainda não você?

{pares.map((p, i) => (
{p.ini}
"{p.q}"
GoCreators
))}

A diferença entre quem posta e quem fatura é método. É isso que você encontra aqui.

); }; window.EspelhoDaDor = EspelhoDaDor; // ============================================ // Como funciona — 4 passos ancorados numa linha desenhada no scroll (§3.4). // Sem card branco: número grande Bricolage italic + título + 1 linha. // Ícones 3D dos assets v3 (passo 1 usa o logo). Mobile: linha vertical à esquerda. // ============================================ const HowItWorks = () => { const ref = useReveal(); const stepsRef = useReveal(0.2); const steps = [ { icon: "uploads/gocreators-icon-blue.png", logo: true, title: "Crie sua conta grátis", body: "Sem taxa e sem contrato. Dois minutos e você está dentro, com curso e comunidade inclusos." }, { icon: "uploads/v3-icon-sacola.png", title: "Escolha o que vender", body: "Produtos de 6 marcas com alta demanda no TikTok Shop, comissão clara e amostra para quem performa." }, { icon: "uploads/v3-icon-claquete.png", title: "Poste com método", body: "Roteiros, tendências e exemplos do que está convertendo agora. Você nunca mais posta no escuro." }, { icon: "uploads/v3-icon-moeda-rs.png", title: "Receba comissão e prêmios", body: "Cada venda vira comissão. Cada avanço vira XP, ranking e prêmios reais: PIX, produtos, viagens." }, ]; return (
Como funciona

Do zero à primeira comissão em 4 passos.

{steps.map((s, i) => (
{i + 1}

{s.title}

{s.body}

))}
); }; window.HowItWorks = HowItWorks;