2c:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Tecnologias Usadas em Experiências Web Premiadas"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Combos de alta performance geralmente envolvem frameworks modernos. Um exemplo clássico: Vue.js para a interface, Nuxt.js para SSR, SSG e SPAs, e GSAP para animações avançadas. Adicione Scroll Smoother ou Lenis para scroll suave e você tem um site leve, responsivo e prazeroso de navegar."}],["$","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":"ℹ️"}],"Técnica"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Projetos institucionais podem ser feitos só com HTML, CSS e JS, mas frameworks como Vue/Nuxt otimizam performance, SEO e reuso de componentes."}]]}]]}]]]}] 2d:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Single Page Application (SPA): A Experiência Sem Travar"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Em uma SPA, não há recarregamento completo da página ao navegar. As transições entre seções são fluidas, criando sensação de continuidade. Frameworks modernos entregam esse comportamento mantendo alta performance."}]]]}] 2e:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"GSAP + Scroll Smoother vs GSAP + Lenis: Suavidade Máxima"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O GSAP Scroll Smoother agora é open source e gratuito, oferecendo scroll suave nativo e otimizado com integração direta de triggers de animação e mudanças dinâmicas. Lenis é uma alternativa moderna e popular, mas pode exigir configuração adicional para trabalhar bem com GSAP ScrollTrigger."}]]]}] 2f:["$","section","7",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Efeito Parallax: Menos É Mais"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O segredo do parallax está na sutileza . Um background que se move levemente mais devagar ou mais rápido que o texto cria profundidade sem chamar atenção excessiva. Use o atributo data-speed no GSAP Scroll Smoother para controlar essas variações."}]]]}] 30:["$","section","8",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Como Construir Animações Interativas com GSAP"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O GSAP permite que animações respondam ao scroll e às interações do usuário. Elementos podem rotacionar, surgir de baixo para cima, mudar de cor ou até transformar o logo conforme o usuário navega entre seções. As possibilidades são praticamente infinitas quando você domina os fundamentos."}]]]}] 31:["$","section","9",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"API ou Plugins? O Método Mais Fácil"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O caminho mais direto e recomendado para scroll suave e parallax é usar o GSAP Scroll Smoother. Implementações manuais com Intersection Observer puro tendem a ser mais complexas e propensas a bugs. Dominar os fundamentos de uma ferramenta sólida vale mais que ficar pulando entre bibliotecas."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-