2b:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Dica Rápida: Manipulando SVG com CSS e JavaScript"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"SVGs são \"cidadãos de primeira classe\" do DOM: podem ser selecinados, estilizados,\n receber transições, animações e eventos. A cor, tamanho e posição de cada forma podem\n ser alterados usando estilos CSS ou scripts JS, como se você estivesse mexendo em divs ou spans ."}],["$","div","1",{"className":"grid gap-4 mb-8","children":[["$","div","0",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":1}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 1: Insira o código SVG direto no HTML do projeto."}}]}]]}],["$","div","1",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":2}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 2: Use seletores CSS/JS para alterar fill , stroke e demais atributos."}}]}]]}],["$","div","2",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":3}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 3: Experimente adicionar transições CSS para animar\n mudanças de cor/tamanho."}}]}]]}]]}],["$","div","2",{"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":"Quando os SVGs são exportados de softwares gráficos (Illustrator, Figma), geralmente\n todo desenho vira um único \"path\", dificultando a manipulação/animacão de partes.\n Prefira código manual ou divida em elementos!"}]]}]]}]]]}]