@intlayer/docs 8.11.1 → 8.11.3

package/docs/it/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Come tradurre un'app React Router v7 nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione React Router v7 utilizzando Intlayer. Segui questa guida completa per rendere la tua app multilingue con il routing consapevole della localizzazione.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Guida completa per tradurre React Router
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo React Router v7 applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -46,23 +46,55 @@ Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle applicazioni web moderne.
+Rispetto alle soluzioni principali come `react-i18next` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa del router React">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
-- **Garantire il supporto TypeScript** con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della localizzazione.
-- **Abilitare il routing consapevole della localizzazione** con il sistema di routing basato su configurazione di React Router v7.
+Intlayer è ottimizzato per funzionare perfettamente con React Router offrendo **routing per locale**, **middleware per il rilevamento locale** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
+
+</Accordion>
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[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 **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione React Router v7
 
-### Passo 1: Installare le dipendenze
+<Steps>
+
+<Step number={1} title="Installare le dipendenze">
 
 Installa i pacchetti necessari usando il tuo gestore di pacchetti preferito:
 
@@ -100,7 +132,13 @@ bun x intlayer init
 - **vite-intlayer**  
   Include il plugin Vite per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre a middleware per rilevare la locale preferita dall'utente, gestire i cookie e gestire il reindirizzamento degli URL.
 
-### Passo 2: Configurazione del tuo progetto
+</Step>
+
+<Step number={2} title="Configurazione del tuo progetto">
+
+</Step>
+
+</Steps>
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione React Router v7 con route basate sul file system
 
@@ -153,7 +191,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamenti middleware, nomi dei cookie, la posizione e l'estensione delle dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passo 3: Integra Intlayer nella tua configurazione Vite
+<Steps>
+
+<Step number={3} title="Integra Intlayer nella tua configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -169,7 +209,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passo 4: Configurare le rotte di React Router v7
+</Step>
+
+<Step number={4} title="Configurare le rotte di React Router v7">
 
 Configura la tua configurazione di routing con rotte consapevoli della localizzazione:
 
@@ -182,7 +224,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Passo 5: Crea i Componenti di Layout
+</Step>
+
+<Step number={5} title="Crea i Componenti di Layout">
 
 Configura il layout principale e i layout specifici per la localizzazione:
 
@@ -236,7 +280,9 @@ export function Layout({
 }
 ```
 
-### Passo 6: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={6} title="Dichiarare il Tuo Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -276,7 +322,9 @@ export default pageContent;
 
 > Per maggiori dettagli, consulta la [documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passo 7: Crea Componenti Consapevoli della Locale
+</Step>
+
+<Step number={7} title="Crea Componenti Consapevoli della Locale">
 
 Crea un componente `LocalizedLink` per una navigazione consapevole della locale:
 
@@ -339,7 +387,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passo 8: Utilizza Intlayer nelle tue Pagine
+</Step>
+
+<Step number={8} title="Utilizza Intlayer nelle tue Pagine">
 
 Accedi ai tuoi dizionari di contenuti in tutta l'applicazione:
 
@@ -393,7 +443,9 @@ export default function Page() {
 
 > Se la tua app esiste già, puoi utilizzare l' [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/compiler.md) in combinazione con il [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/extract.md) per convertire migliaia di componenti in un second.
 
-### Passo 9: Crea un Componente per il Selettore di Lingua
+</Step>
+
+<Step number={9} title="Crea un Componente per il Selettore di Lingua">
 
 Crea un componente per permettere agli utenti di cambiare lingua:
 
@@ -454,7 +506,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Per saperne di più sull'hook `useLocale`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md).
 
-### Passo 10: Aggiungere la gestione degli attributi HTML (Opzionale)
+</Step>
+
+<Step number={10} title="Aggiungere la gestione degli attributi HTML">
 
 Crea un hook per gestire gli attributi lang e dir dell'HTML:
 
@@ -492,7 +546,9 @@ export default function RootLayout() {
 }
 ```
 
-### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={1} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -590,6 +646,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.
@@ -655,7 +715,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 for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Passo 11: Aggiungere il middleware (Opzionale)
+<Steps>
+
+<Step number={11} title="Aggiungere il middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la lingua corrente basandosi sull'URL e imposterà il cookie della lingua appropriata. Se non viene specificata alcuna lingua, il plugin determinerà la lingua più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna lingua, verrà effettuato un reindirizzamento alla lingua predefinita.
 
@@ -678,6 +740,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configurare TypeScript
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.

package/docs/it/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 - Come tradurre un'app React Router v7 nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione React Router v7 utilizzando Intlayer con routing basato sul file system. Segui questa guida completa per rendere la tua app multilingue con il routing consapevole della localizzazione.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Guida completa per tradurre Complete
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo React Router v7 applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -44,17 +44,47 @@ Per il routing lato client, fare riferimento alla guida [Intlayer con React Rout
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle applicazioni web moderne.
+Rispetto alle soluzioni principali come `react-i18next` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa del router React">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
-- **Garantire il supporto TypeScript** con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della localizzazione.
-- **Abilitare il routing consapevole della localizzazione** con il sistema di routing basato sul file system di React Router v7.
+Intlayer è ottimizzato per funzionare perfettamente con React Router offrendo **routing per locale**, **middleware per il rilevamento locale** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
+
+</Accordion>
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[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 **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -92,7 +122,9 @@ Con Intlayer, puoi:
 
 See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) on GitHub.
 
-### Passo 1: Installare le dipendenze
+<Steps>
+
+<Step number={1} title="Installare le dipendenze">
 
 Installa i pacchetti necessari usando il tuo gestore di pacchetti preferito:
 
@@ -129,7 +161,9 @@ bun x intlayer init
 - **@react-router/fs-routes**
   Il pacchetto che abilita il routing basato sul file system per React Router v7.
 
-### Passo 2: Configurazione del tuo progetto
+</Step>
+
+<Step number={2} title="Configurazione del tuo progetto">
 
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
@@ -148,7 +182,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamenti middleware, nomi dei cookie, la posizione e l'estensione delle dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passo 3: Integra Intlayer nella tua configurazione Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer nella tua configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -164,7 +200,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passo 4: Configurare le rotte basate sul file system di React Router v7
+</Step>
+
+<Step number={4} title="Configurare le rotte basate sul file system di React Router v7">
 
 Configura la tua configurazione di routing per utilizzare rotte basate sul file system con `flatRoutes`:
 
@@ -185,7 +223,9 @@ export default routes;
 
 > La funzione `flatRoutes` di `@react-router/fs-routes` abilita il routing basato sul file system, dove la struttura dei file nella directory `routes/` determina le rotte della tua applicazione. L'opzione `ignoredRouteFiles` garantisce che i file di dichiarazione del contenuto Intlayer (`.content.ts`, ecc.) non vengano trattati come file di rotta.
 
-### Passo 5: Creare file di rotta con convenzioni del file system
+</Step>
+
+<Step number={5} title="Creare file di rotta con convenzioni del file system">
 
 Con il routing basato sul file system, usi una convenzione di denominazione piatta dove i punti (`.`) rappresentano segmenti di percorso e le parentesi `()` denotano segmenti opzionali.
 
@@ -352,7 +392,9 @@ export default function AboutPage() {
 }
 ```
 
-### Passo 6: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={6} title="Dichiarare il Tuo Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni. Posiziona i file di contenuto accanto ai file di rotta:
 
@@ -414,7 +456,9 @@ export default aboutContent;
 
 > Per maggiori dettagli, consulta la [documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passo 7: Crea Componenti Consapevoli della Locale
+</Step>
+
+<Step number={7} title="Crea Componenti Consapevoli della Locale">
 
 Crea un componente `LocalizedLink` per una navigazione consapevole della locale:
 
@@ -477,7 +521,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passo 8: Crea un Componente per il Selettore di Lingua
+</Step>
+
+<Step number={8} title="Crea un Componente per il Selettore di Lingua">
 
 Crea un componente per permettere agli utenti di cambiare lingua:
 
@@ -538,7 +584,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Per saperne di più sull'hook `useLocale`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md).
 
-### Passo 10: Aggiungere la gestione degli attributi HTML (Opzionale)
+</Step>
+
+<Step number={10} title="Aggiungere la gestione degli attributi HTML">
 
 Crea un hook per gestire gli attributi lang e dir dell'HTML:
 
@@ -559,7 +607,9 @@ export const useI18nHTMLAttributes = () => {
 
 Questo hook è già utilizzato nel componente di layout (`root.tsx`) mostrato nel Passo 5.
 
-### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={1} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -657,6 +707,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.
@@ -723,7 +777,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: Aggiungere il middleware (Opzionale)
+<Steps>
+
+<Step number={10} title="Aggiungere il middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la lingua corrente basandosi sull'URL e imposterà il cookie della lingua appropriata. Se non viene specificata alcuna lingua, il plugin determinerà la lingua più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna lingua, verrà effettuato un reindirizzamento alla lingua predefinita.
 
@@ -746,6 +802,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configurare TypeScript
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.

package/docs/it/intlayer_with_storybook.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
+updatedAt: 2026-05-31
 title: Come configurare Intlayer con Storybook
 description: Scopri come rendere multilingue il tuo design system usando Intlayer con Storybook - compila le dichiarazioni di contenuto, aggiungi un selettore di lingua e visualizza l'anteprima dei tuoi componenti in qualsiasi lingua.
 keywords:
@@ -31,16 +31,47 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è un'innovativa libreria di internazionalizzazione (i18n) open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web. Funziona a **livello di componente** - ogni componente possiede le proprie dichiarazioni di contenuto - mantenendo le traduzioni collocate insieme al codice che le utilizza.
+Rispetto alle soluzioni principali come `storybook-react-i18next` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa del libro di fiabe">
 
-- **Gestire le traduzioni in modo dichiarativo** con file di contenuto per singolo componente.
-- **Ottenere il supporto completo di TypeScript** tramite tipi generati automaticamente e l'autocompletamento dell'IDE.
-- **Cambiare lingua a runtime** senza ricaricare la pagina.
-- **Tradurre automaticamente** grazie alle integrazioni integrate con i provider di IA.
+Intlayer è ottimizzato per funzionare perfettamente con Storybook offrendo **decoratori di storie multilingue**, **cambio di lingua** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n) nel tuo sistema di progettazione.
+
+</Accordion>
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[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 **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -59,7 +90,9 @@ Storybook è lo strumento standard del settore per sviluppare e documentare i co
 <Tabs>
 <Tab value="Vite Setup">
 
-### Passaggio 1: Installa le dipendenze
+<Steps>
+
+<Step number={1} title="Installa le dipendenze">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +122,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Passaggio 2: Crea una configurazione Intlayer
+</Step>
+
+<Step number={2} title="Crea una configurazione Intlayer">
 
 Crea `intlayer.config.ts` nella root del tuo progetto (o all'interno del pacchetto del tuo design system):
 
@@ -118,7 +153,9 @@ export default config;
 
 ---
 
-### Passaggio 3: Aggiungi il plugin Vite a Storybook
+</Step>
+
+<Step number={3} title="Aggiungi il plugin Vite a Storybook">
 
 L'hook `viteFinal` di Storybook ti consente di estendere la configurazione interna di Vite. Importa e aggiungi il plugin `intlayer()` qui:
 
@@ -159,7 +196,9 @@ Il plugin `intlayer()` osserva i tuoi file `*.content.ts` e ricostruisce automat
 
 ---
 
-### Passaggio 4: Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua
+</Step>
+
+<Step number={4} title="Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua">
 
 Il file `preview` di Storybook è il posto giusto per avvolgere ogni story con l' `IntlayerProvider` ed esporre un selettore di lingua nella toolbar:
 
@@ -216,7 +255,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Passaggio 1: Installa le dipendenze
+</Step>
+
+<Step number={1} title="Installa le dipendenze">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +281,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Passaggio 2: Crea una configurazione Intlayer
+</Step>
+
+<Step number={2} title="Crea una configurazione Intlayer">
 
 Crea `intlayer.config.ts` nella root del tuo progetto:
 
@@ -262,7 +305,9 @@ export default config;
 
 ---
 
-### Passaggio 3: Configura il Webpack di Storybook
+</Step>
+
+<Step number={3} title="Configura il Webpack di Storybook">
 
 Per le configurazioni di Storybook basate su Webpack (ad es. `@storybook/react-webpack5`), estendi la configurazione webpack tramite `webpackFinal` per aggiungere gli alias e il caricatore di Intlayer:
 
@@ -289,7 +334,9 @@ export default config;
 
 ---
 
-### Passaggio 4: Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua
+</Step>
+
+<Step number={4} title="Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua">
 
 Stessa cosa della configurazione Vite - aggiungi il decorator e il tipo di lingua globale in `.storybook/preview.tsx`:
 
@@ -335,6 +382,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Dichiarazione dei contenuti
 
 Crea un file `*.content.ts` accanto a ogni componente. Intlayer lo rileva automaticamente durante la compilazione.