@intlayer/docs 8.11.2 → 8.11.3

package/docs/pt/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Como traduzir uma aplicação React Router v7 em 2026
-description: Aprenda como adicionar internacionalização (i18n) à sua aplicação React Router v7 usando Intlayer. Siga este guia completo para tornar seu app multilíngue com roteamento sensível à localidade.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Guia completo para traduzir React Router
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu React Router v7 aplicativo multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -43,23 +43,55 @@ Este guia demonstra como integrar o **Intlayer** para uma internacionalização
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca inovadora e open-source de internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `react-i18next` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do roteador React">
 
-- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir suporte a TypeScript** com tipos gerados automaticamente, melhorando o autocompletar e a detecção de erros.
-- **Aproveitar recursos avançados**, como detecção e troca dinâmica de localidade.
-- **Habilitar roteamento sensível à localidade** com o sistema de roteamento baseado em configuração do React Router v7.
+O Intlayer é otimizado para funcionar perfeitamente com o React Router, oferecendo **roteamento com reconhecimento de localidade**, **middleware para detecção de localidade** e todos os recursos necessários para dimensionar a internacionalização (i18n).
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guia Passo a Passo para Configurar o Intlayer em uma Aplicação React Router v7
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -97,7 +129,13 @@ bun x intlayer init
 - **vite-intlayer**
   Inclui o plugin do Vite para integrar o Intlayer com o [empacotador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), bem como middleware para detectar a localidade preferida do usuário, gerenciar cookies e lidar com redirecionamento de URL.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
+
+</Step>
+
+</Steps>
 
 ## Guia passo a passo para configurar Intlayer em uma aplicação React Router v7 com rotas baseadas em sistema de arquivos
 
@@ -142,7 +180,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento via middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console, e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Configurar Rotas do React Router v7
+<Steps>
+
+<Step number={3} title="Configurar Rotas do React Router v7">
 
 Configure sua configuração de rotas com rotas que reconhecem o idioma:
 
@@ -155,7 +195,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Passo 4: Integrar Intlayer na sua Configuração Vite
+</Step>
+
+<Step number={4} title="Integrar Intlayer na sua Configuração Vite">
 
 Adicione o plugin intlayer na sua configuração:
 
@@ -176,7 +218,9 @@ export default defineConfig({
 
 > O plugin Vite `intlayer()` é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.
 
-### Passo 5: Criar Componentes de Layout
+</Step>
+
+<Step number={5} title="Criar Componentes de Layout">
 
 Configure seu layout raiz e layouts específicos para cada localidade:
 
@@ -230,7 +274,9 @@ export function Layout({
 }
 ```
 
-### Passo 6: Declare Seu Conteúdo
+</Step>
+
+<Step number={6} title="Declare Seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -266,7 +312,9 @@ export default pageContent;
 
 > Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
-### Passo 7: Crie Componentes Sensíveis ao Locale
+</Step>
+
+<Step number={7} title="Crie Componentes Sensíveis ao Locale">
 
 Crie um componente `LocalizedLink` para navegação sensível ao idioma:
 
@@ -315,7 +363,9 @@ export default function LocalizedLink({ to, ...props }: RouterLinkProps) {
 }
 ```
 
-### Passo 8: Utilize o Intlayer nas Suas Páginas
+</Step>
+
+<Step number={8} title="Utilize o Intlayer nas Suas Páginas">
 
 Acesse seus dicionários de conteúdo em toda a sua aplicação:
 
@@ -369,7 +419,9 @@ export default function Page() {
 
 > Se a sua aplicação já existe, você pode usar o [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/compiler.md) em conjunto com o [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/extract.md) para converter milhares de componentes em um segundo.
 
-### Passo 9: Crie um Componente de Seletor de Idioma
+</Step>
+
+<Step number={9} title="Crie um Componente de Seletor de Idioma">
 
 Crie um componente para permitir que os usuários mudem de idioma:
 
@@ -414,7 +466,9 @@ export default function LocaleSwitcher() {
 
 > Para saber mais sobre o hook `useLocale`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md).
 
-### Passo 10: Adicionar Gerenciamento de Atributos HTML (Opcional)
+</Step>
+
+<Step number={10} title="Adicionar Gerenciamento de Atributos HTML">
 
 Crie um hook para gerenciar os atributos lang e dir do HTML:
 
@@ -454,7 +508,9 @@ export default function RootLayout() {
 }
 ```
 
-### Passo 11: Compile e Execute Sua Aplicação
+</Step>
+
+<Step number={11} title="Compile e Execute Sua Aplicação">
 
 Construa os dicionários de conteúdo e execute sua aplicação:
 
@@ -482,7 +538,9 @@ yarn intlayer:build
 yarn dev
 ```
 
-### Passo 12: Configurar TypeScript (Opcional)
+</Step>
+
+<Step number={12} title="Configurar TypeScript">
 
 O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
 
@@ -500,7 +558,9 @@ Certifique-se de que sua configuração do TypeScript inclua os tipos gerados au
 }
 ```
 
-### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={1} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -598,6 +658,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

package/docs/pt/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Como traduzir uma aplicação React Router v7 em 2026
-description: Aprenda como adicionar internacionalização (i18n) à sua aplicação React Router v7 usando Intlayer com roteamento baseado em sistema de arquivos. Siga este guia completo para tornar sua aplicação multilíngue com roteamento consciente de localidade.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Guia completo para traduzir Complete
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu React Router v7 aplicativo multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -44,17 +44,47 @@ Para roteamento do lado do cliente, consulte o guia [Intlayer com React Router v
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `react-i18next` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do roteador React">
 
-- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir suporte ao TypeScript** com tipos autogerados, melhorando o preenchimento automático e a detecção de erros.
-- **Aproveitar recursos avançados**, como detecção dinâmica de localidade e alternância de idioma.
-- **Habilitar roteamento consciente de localidade** com o sistema de roteamento baseado em sistema de arquivos do React Router v7.
+O Intlayer é otimizado para funcionar perfeitamente com o React Router, oferecendo **roteamento com reconhecimento de localidade**, **middleware para detecção de localidade** e todos os recursos necessários para dimensionar a internacionalização (i18n).
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -92,7 +122,9 @@ Com o Intlayer, você pode:
 
 Veja o [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) no GitHub.
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -129,7 +161,9 @@ bun x intlayer init
 - **@react-router/fs-routes**
   O pacote que habilita roteamento baseado em sistema de arquivos para React Router v7.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
@@ -148,7 +182,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar os logs do Intlayer no console e mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Integrar o Intlayer na sua Configuração do Vite
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua Configuração do Vite">
 
 Adicione o plugin intlayer na sua configuração:
 
@@ -164,7 +200,9 @@ export default defineConfig({
 
 > O plugin Vite `intlayer()` é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.
 
-### Passo 4: Configurar Rotas File-System do React Router v7
+</Step>
+
+<Step number={4} title="Configurar Rotas File-System do React Router v7">
 
 Configure sua configuração de rotas para usar rotas baseadas em sistema de arquivos com `flatRoutes`:
 
@@ -185,7 +223,9 @@ export default routes;
 
 > A função `flatRoutes` do `@react-router/fs-routes` habilita roteamento baseado em sistema de arquivos, onde a estrutura de arquivos no diretório `routes/` determina as rotas da sua aplicação. A opção `ignoredRouteFiles` garante que os arquivos de declaração de conteúdo do Intlayer (`.content.ts`, etc.) não sejam tratados como arquivos de rota.
 
-### Passo 5: Criar Arquivos de Rota com Convenções File-System
+</Step>
+
+<Step number={5} title="Criar Arquivos de Rota com Convenções File-System">
 
 Com roteamento baseado em sistema de arquivos, você usa uma convenção de nomenclatura plana onde pontos (`.`) representam segmentos de caminho e parênteses `()` denotam segmentos opcionais.
 
@@ -350,7 +390,9 @@ export default function AboutPage() {
 
 > Se a sua aplicação já existe, você pode usar o [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/compiler.md) em conjunto com o [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/extract.md) para converter milhares de componentes em um segundo.
 
-### Passo 6: Declarar seu Conteúdo
+</Step>
+
+<Step number={6} title="Declarar seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções. Coloque os arquivos de conteúdo ao lado dos seus arquivos de rota:
 
@@ -412,7 +454,9 @@ export default aboutContent;
 
 > Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
-### Passo 7: Criar Componentes Locale-Aware
+</Step>
+
+<Step number={7} title="Criar Componentes Locale-Aware">
 
 Crie um componente `LocalizedLink` para navegação consciente de localidade:
 
@@ -473,7 +517,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passo 8: Criar um Componente de Alternância de Locale
+</Step>
+
+<Step number={8} title="Criar um Componente de Alternância de Locale">
 
 Crie um componente para permitir que os usuários alterem idiomas:
 
@@ -534,7 +580,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Para saber mais sobre o hook `useLocale`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md).
 
-### Passo 9: Adicionar Gerenciamento de Atributos HTML (Opcional)
+</Step>
+
+<Step number={9} title="Adicionar Gerenciamento de Atributos HTML">
 
 Crie um hook para gerenciar os atributos HTML lang e dir:
 
@@ -555,7 +603,9 @@ export const useI18nHTMLAttributes = () => {
 
 Este hook já é usado no componente de layout (`root.tsx`) mostrado no Passo 5.
 
-### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={1} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -653,6 +703,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -719,7 +773,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Passo 10: Adicionar middleware (Opcional)
+<Steps>
+
+<Step number={10} title="Adicionar middleware">
 
 Você também pode usar o `intlayerProxy` para adicionar roteamento do lado do servidor à sua aplicação. Este plugin detectará automaticamente a localidade atual com base na URL e definirá o cookie de localidade apropriado. Se nenhuma localidade for especificada, o plugin determinará a localidade mais adequada com base nas preferências de idioma do navegador do usuário. Se nenhuma localidade for detectada, ele redirecionará para a localidade padrão.
 
@@ -742,6 +798,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configurar TypeScript
 
 O Intlayer usa module augmentation para aproveitar os benefícios do TypeScript e tornar sua codebase mais robusta.

package/docs/pt/intlayer_with_storybook.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
+updatedAt: 2026-05-31
 title: Como configurar o Intlayer com o Storybook
 description: Saiba como tornar o seu sistema de design multilíngue usando o Intlayer com o Storybook - compile declarações de conteúdo, adicione um seletor de local e visualize os seus componentes em qualquer idioma.
 keywords:
@@ -31,16 +31,47 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto, projetada para simplificar o suporte multilíngue em aplicações web modernas. Funciona ao **nível do componente** - cada componente possui as suas próprias declarações de conteúdo - mantendo as traduções localizadas junto ao código que as utiliza.
+Comparado com soluções principais como `storybook-react-i18next` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do livro de histórias">
 
-- **Gerir traduções de forma declarativa** com ficheiros de conteúdo por componente.
-- **Obter suporte completo para TypeScript** através de tipos gerados automaticamente e autocompletar no IDE.
-- **Alterar locais em tempo de execução** sem recarregar a página.
-- **Traduzir automaticamente** com integrações integradas de fornecedores de IA.
+O Intlayer é otimizado para funcionar perfeitamente com o Storybook, oferecendo **decoradores de histórias multilíngues**, **alteração de local** e todos os recursos necessários para dimensionar a internacionalização (i18n) em seu sistema de design.
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -59,7 +90,9 @@ O Storybook é a ferramenta padrão da indústria para desenvolver e documentar
 <Tabs>
 <Tab value="Vite Setup">
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +122,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Passo 2: Criar uma Configuração do Intlayer
+</Step>
+
+<Step number={2} title="Criar uma Configuração do Intlayer">
 
 Crie `intlayer.config.ts` na raiz do seu projeto (ou dentro do seu pacote de design system):
 
@@ -118,7 +153,9 @@ export default config;
 
 ---
 
-### Passo 3: Adicionar o Plugin Vite ao Storybook
+</Step>
+
+<Step number={3} title="Adicionar o Plugin Vite ao Storybook">
 
 O hook `viteFinal` do Storybook permite-lhe estender a configuração interna do Vite. Importe e adicione o plugin `intlayer()` aqui:
 
@@ -159,7 +196,9 @@ O plugin `intlayer()` monitoriza os seus ficheiros `*.content.ts` e reconstrói
 
 ---
 
-### Passo 4: Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local
+</Step>
+
+<Step number={4} title="Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local">
 
 O ficheiro `preview` do Storybook é o local ideal para envolver cada story com o `IntlayerProvider` e expor um seletor de local na barra de ferramentas:
 
@@ -216,7 +255,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Passo 1: Instalar Dependências
+</Step>
+
+<Step number={1} title="Instalar Dependências">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +281,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Passo 2: Criar uma Configuração do Intlayer
+</Step>
+
+<Step number={2} title="Criar uma Configuração do Intlayer">
 
 Crie `intlayer.config.ts` na raiz do seu projeto:
 
@@ -262,7 +305,9 @@ export default config;
 
 ---
 
-### Passo 3: Configurar o Webpack do Storybook
+</Step>
+
+<Step number={3} title="Configurar o Webpack do Storybook">
 
 Para configurações do Storybook baseadas em Webpack (por exemplo, `@storybook/react-webpack5`), estenda a configuração do webpack através de `webpackFinal` para adicionar os aliases e o loader do Intlayer:
 
@@ -289,7 +334,9 @@ export default config;
 
 ---
 
-### Passo 4: Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local
+</Step>
+
+<Step number={4} title="Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local">
 
 O mesmo que na configuração Vite - adicione o decorador e o tipo de local global em `.storybook/preview.tsx`:
 
@@ -335,6 +382,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Declarar Conteúdo
 
 Crie um ficheiro `*.content.ts` ao lado de cada componente. O Intlayer deteta-o automaticamente durante a compilação.