2b:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 2: Clique em \"Criar\" e selecione a opção \"HANA 2D Design\"\n para iniciar seu workspace."}}] 2c:["$","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: Ajuste o tamanho do frame base (por exemplo,\n 1920x1080) para visualizar seu design em escala real de uma tela."}}]}]]}] 2d:["$","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":"Aperta F pra criar frames rápido, igual Figma. CTRL + Scroll dá zoom,\n mas o scroll às vezes trava. Ainda não tá perfeito."}]]}]]}] 2e:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Montando seus primeiros componentes visuais"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Começa com um frame. Cor personalizada - RGB 242, 214, 251 fica elegante. Adiciona\n cartões, círculos de status, textos estilizados. Renomeia layers pra não se perder. CTRL + D duplica na hora. Cria 10 cards em segundos."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-green-500/10 border-green-500/20 text-green-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-green-400","children":[["$","span",null,{"children":"✅"}],"Dica"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Atalhos aceleram tudo: O cria círculos, T adiciona texto. Mantém tudo\n alinhado e limpo."}]]}]]}]]]}] 2f:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Duplicação, agrupamentos e layouts"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Cards prontos? CTRL + D replica quantos quiser. Agrupa tudo num container.\n Facilita pra caramba quando for animar depois. Menos bagunça, mais controle."}]]]}] 30:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Adicionando efeitos de projeção 3D e variações"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Vai em \"Efeitos\" e seleciona \"3D Projeção\". Testa os presets de cilindro. Mexe nos\n valores X e Y até ficar legal. Cria sensação de profundidade sem perder performance.\n Interface continua rápida mesmo com efeito pesado."}],["$","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":"ℹ️"}],"Importante"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Alterna entre claro e escuro. Ajusta sombras e luz. Mudanças aparecem na hora, sem\n reload."}]]}]]}]]]}] 31:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Animações dinâmicas: do estático ao in