2f:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Passo a passo: estilizando Keycloak com Keycloakify"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Pronto para colocar a mão na massa? Veja o roteiro base para transformar seu Keycloak\n visualmente:"}],["$","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: Instale o Keycloakify como dependência no seu projeto\n React."}}]}]]}],["$","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: Siga o boilerplate recomendado para criar os\n componentes das telas de login, registro, etc."}}]}]]}],["$","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: Aplique seus estilos e componha as interfaces\n desejadas usando toda a liberdade do React."}}]}]]}],["$","div","3",{"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":4}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 4: Compile o projeto e gere o tema compatível para\n Keycloak com o comando do Keycloakify (normalmente yarn build-keycloak-theme )."}}]}]]}],["$","div","4",{"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":5}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 5: Deploy o artefato gerado no diretório de temas do seu\n Keycloak server."}}]}]]}],["$","div","5",{"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":6}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 6: Faça testes, ajuste CSS e recompile quantas vezes\n forem necessárias até o resultado ideal."}}]}]]}]]}]]]}]