2c:["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-blue-500/10 border-blue-500/20 text-blue-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-blue-400","children":[["$","span",null,{"children":"ℹ️"}],"Dica Técnica"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Para conseguir suavidade, sempre teste o efeito em dispositivos diferentes e ajuste o\n parâmetro “scrub” (tempo de animação) se estiver usando bibliotecas como GSAP."}]]}]]}] 2d:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Pré-requisitos: O que Você Precisa"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Você pode criar parallax tanto em projetos puros (HTML, CSS e JS) quanto em frameworks\n (React, Next, WordPress, Webflow, Framer). Tenha um editor de código (VS Code),\n navegador atualizado e ambiente local para rodar seu site, mesmo que seja um simples Go\n Live ou servidor."}]]]}] 2e:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Estruturando o Projeto"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O mínimo necessário é: um container (div), uma imagem de fundo e um elemento de destaque\n – geralmente o título (h1, h2 etc). Não precisa de nada além disso para experimentar o\n efeito."}]]]}] 2f:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Montagem em HTML e CSS: Passo Rápido"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Crie uma pasta de projeto, abra no VS Code, e monte seu index.html com uma div\n centralizadora (“div.py”) contendo: uma imagem de fundo e um h1 (título). No CSS, deixe\n a imagem como position absolute, width 100%, height 100%, e por baixo do título usando\n z-index -1. No container da imagem, use height 200vh para garantir rolagem de página.\n Centralize tudo com display flex e alinhe pelo justify-content e align-items."}]]]}] 30:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"O Segredo da Linha Única: GSAP ScrollTrigger"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"A chave para o parallax ultra rápido está na biblioteca GSAP junto do plugin\n ScrollTrigger. Basta importar via CDN e comandar: . Só isso já entrega o efeito de movimento sincronizado com o scroll."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-yellow-500/20 text-yellow-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-yellow-400","children":[["$","span",null,{"children":"⚠️"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Coloque o script do GSAP+ScrollTrigger antes do seu arquivo customizado para evitar\n erros de carregamento e conflitos em páginas dinâmicas."}]]}]]}]]]}] 31:["$","section","7",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"O Que Cada Parâmetro Faz"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"- y: 500 : indica quanto seu título vai se mover na vertical. - trigger : identifica o elemento que ativa o efeito. - start/end : define o início e fim da animação baseado no scroll. - scrub : true faz o efeito acompanhar o movimento real do scroll, tor