28:["$","div",null,{"className":"prose prose-lg prose-invert max-w-none prose-headings:text-white prose-headings:font-bold prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-p:text-gray-300 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-lime-400 prose-a:no-underline hover:prose-a:text-lime-300 prose-strong:text-white prose-strong:font-semibold prose-code:text-lime-400 prose-code:bg-gray-800 prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-700 prose-blockquote:border-l-4 prose-blockquote:border-lime-500 prose-blockquote:bg-gray-900/50 prose-blockquote:p-4 prose-blockquote:rounded-r prose-ul:text-gray-300 prose-ol:text-gray-300 prose-li:mb-2 animate-fade-in-up opacity-0 translate-y-8","style":{"animationDelay":"0.5s"},"children":["$","div",null,{"className":"space-y-12","children":[["$","section","0",{"className":"mb-16","children":["$","div",null,{"className":"bg-lime-500/10 border border-lime-500/20 rounded-xl p-6 mb-8","children":[["$","h3",null,{"className":"text-lime-400 font-semibold mb-4 flex items-center gap-2","children":[["$","span",null,{"className":"w-2 h-2 bg-lime-400 rounded-full"}],"Por que isso é importante"]}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Conectar frontend e backend com Orval é direto: você transforma documentação Swagger em código pronto para usar. Ganhe produtividade máxima, elimine erros manuais e esqueça códigos repetitivos para consumir APIs em React. O que leva dias manualmente acontece em minutos com automação."}]]]}]}],["$","section","1",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Orval: transforme documentação em hooks prontos"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Não escreva código manual para consumir APIs. O Orval gera, para você, funções automáticas baseadas nas rotas do Swagger. Com um comando, todo seu frontend pode consumir endpoints por simples hooks React—basta digitar useGetUsers ou useCreateUser . É produtividade de outro nível."}],["$","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":"Codificar manualmente requisições para endpoints é lento e propenso a falhas. Com Orval, qualquer mudança no backend gera hooks atualizados para o frontend em instantes."}]]}]]}]]]}],["$","section","2",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Escreva menos, entregue mais rápido"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Imagine acessar sua lista de usuários apenas digitando useGetUsers . Para criar, useCreateUser . Tudo isso respeita o nome definido na documentação Swagger. Assim, seu código segue um padrão limpo e enxuto, acelerando as entregas e reduzindo bugs por diferenças nos contratos da API."}]]]}],["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"OperationId: o coração da integração automática"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"No Swagger, cada rota pode (e deve) ter um operationId . O Orval usa esse identificador para nomear funções, gerando hooks legíveis e mantendo 100% de sincronia entre backend e frontend. Se você nomear “getUsers” no backend, o Orval cria automaticamente useGetUsers no frontend. Simples e sem ambiguidades."}],"$L2b"]]}],"$L2c","$L2d","$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36","$L37"]}]}]