@intlayer/docs 8.11.2 → 8.11.3

package/docs/it/intlayer_with_vite+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Solid i18n - Come tradurre un'app Solid nel 2026
-description: Scopri come rendere il tuo sito Vite e Solid multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: Vite + Solid i18n - Guida completa per tradurre Solid
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Vite and Solid applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -56,16 +56,47 @@ history:
 
 <!-- Vedi il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-solid-template) su GitHub. -->
 
-## 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 moderne applicazioni web.
+Rispetto alle soluzioni principali come `@solid-primitives/i18n` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura solida completa">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
-- **Garantire il supporto a TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficia delle funzionalità avanzate**, come il rilevamento dinamico della lingua e il cambio della stessa.
+Intlayer è ottimizzato per funzionare perfettamente con Solid offrendo **ambito del contenuto a livello di componente**, **traduzioni reattive** 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>
 
 ---
 
@@ -75,7 +106,9 @@ Con Intlayer, puoi:
 
 <TOC/>
 
-### Passo 1: Installare le dipendenze
+<Steps>
+
+<Step number={1} title="Installare le dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -115,7 +148,9 @@ bun x intlayer init
 
   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 lingua 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">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -139,7 +174,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, il reindirizzamento tramite middleware, i nomi dei cookie, la posizione e l'estensione delle tue 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.
 
@@ -156,7 +193,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione del contenuto 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: Dichiara il tuo contenuto
+</Step>
+
+<Step number={4} title="Dichiara il tuo contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -183,7 +222,9 @@ export default appContent;
 
 > 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 5: Utilizzare Intlayer nel tuo codice
+</Step>
+
+<Step number={5} title="Utilizzare Intlayer nel tuo codice">
 
 Accedi ai tuoi dizionari di contenuto in tutta la tua applicazione:
 
@@ -243,7 +284,9 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### (Opzionale) Passo 6: Cambiare la lingua del tuo contenuto
+</Step>
+
+<Step number={6} title="Cambiare la lingua del tuo contenuto" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto, puoi usare la funzione `setLocale` fornita dall'hook `useLocale`. Questa funzione ti permette di impostare la locale dell'applicazione e aggiornare il contenuto di conseguenza.
 
@@ -272,7 +315,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Opzionale) Passo 7: Aggiungere il routing localizzato alla tua applicazione
+</Step>
+
+<Step number={7} title="Aggiungere il routing localizzato alla tua applicazione" isOptional={true}>
 
 Lo scopo di questo passo è creare route uniche per ogni lingua. Questo è utile per SEO e URL SEO-friendly.
 Esempio:
@@ -337,7 +382,9 @@ const App: Component = () => (
 export default App;
 ```
 
-### (Opzionale) Passo 8: Cambiare l'URL quando la lingua cambia
+</Step>
+
+<Step number={8} title="Cambiare l'URL quando la lingua cambia" isOptional={true}>
 
 Per cambiare l'URL quando la locale cambia, puoi usare la prop `onLocaleChange` fornita dall'hook `useLocale`. Puoi usare gli hook `useNavigate` e `useLocation` da `@solidjs/router` per aggiornare il percorso dell'URL.
 
@@ -374,7 +421,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Opzionale) Passo 9: Cambiare gli attributi di lingua e direzione dell'HTML
+</Step>
+
+<Step number={9} title="Cambiare gli attributi di lingua e direzione dell'HTML" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per corrispondere alla locale corrente per accessibilità e SEO.
 
@@ -397,7 +446,9 @@ const AppContent: Component = () => {
 };
 ```
 
-### (Opzionale) Passo 10: Creare un Componente Link Localizzato
+</Step>
+
+<Step number={10} title="Creare un Componente Link Localizzato" isOptional={true}>
 
 Crea un componente `Link` personalizzato che prefissa automaticamente gli URL interni con la lingua corrente.
 
@@ -418,7 +469,9 @@ export const Link: ParentComponent<AnchorProps> = (props) => {
 };
 ```
 
-### (Opzionale) Passo 11: Renderizzare Markdown
+</Step>
+
+<Step number={11} title="Renderizzare Markdown" isOptional={true}>
 
 Intlayer supporta il rendering del contenuto Markdown direttamente nella tua applicazione Solid usando il suo parser interno. Per impostazione predefinita, Markdown è trattato come testo normale. Per renderizzarlo come HTML ricco, avvolgi la tua applicazione con il `MarkdownProvider`.
 
@@ -497,7 +550,9 @@ Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazio
 
 ---
 
-### (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.
 
@@ -672,3 +727,7 @@ Adatta i comandi se usi pnpm o yarn. Puoi anche richiamare lo script dalla CI o
 Per approfondire, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/it/intlayer_with_vite+svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Svelte i18n - Come tradurre un'app Svelte nel 2026
-description: Scopri come rendere il tuo sito web Vite e Svelte multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: Vite + Svelte i18n - Guida completa per tradurre Svelte
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Vite and Svelte applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -62,16 +62,47 @@ history:
 
 <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 moderne applicazioni web.
+Rispetto alle soluzioni principali come `svelte-i18n` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa e snella">
 
-- **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 autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della locale.
+Intlayer è ottimizzato per funzionare perfettamente con Svelte offrendo **ambito del contenuto a livello di componente**, **traduzioni reattive** 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>
 
 ---
 
@@ -87,7 +118,9 @@ Con Intlayer, puoi:
 
 Consulta il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-vite-svelte-template) su GitHub.
 
-### Passo 1: Installa le dipendenze
+<Steps>
+
+<Step number={1} title="Installa le dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -125,7 +158,9 @@ 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">
 
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
@@ -149,7 +184,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamenti middleware, nomi dei cookie, la posizione e l'estensione delle tue 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.
 
@@ -166,7 +203,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la generazione dei file di dichiarazione del contenuto 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: Dichiara il tuo contenuto
+</Step>
+
+<Step number={4} title="Dichiara il tuo contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -208,7 +247,9 @@ export default appContent;
 
 > 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 5: Utilizza Intlayer nel tuo codice
+</Step>
+
+<Step number={5} title="Utilizza Intlayer nel tuo codice">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -232,7 +273,9 @@ export default appContent;
 
 > 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 secondo.
 
-### (Opzionale) Passo 6: Cambia la lingua del tuo contenuto
+</Step>
+
+<Step number={6} title="Cambia la lingua del tuo contenuto" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -261,7 +304,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Opzionale) Passo 7: Renderizza Markdown
+</Step>
+
+<Step number={7} title="Renderizza Markdown" isOptional={true}>
 
 Intlayer supporta il rendering di contenuti Markdown direttamente nella tua applicazione Svelte. Per default, il Markdown è trattato come testo semplice. Per convertire il Markdown in HTML ricco, puoi integrare `@humanspeak/svelte-markdown` o un altro parser Markdown.
 
@@ -282,13 +327,17 @@ Intlayer supporta il rendering di contenuti Markdown direttamente nella tua appl
 
 > Puoi anche accedere ai dati del front-matter del tuo markdown usando la proprietà `content.markdownContent.metadata.xxx`.
 
-### (Opzionale) Passo 8: Configura l'editor / CMS di intlayer
+</Step>
+
+<Step number={8} title="Configura l'editor / CMS di intlayer" isOptional={true}>
 
 Per configurare l'editor di intlayer, devi seguire la [documentazione dell'editor intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
 
 Per configurare il CMS di intlayer, devi seguire la [documentazione del CMS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
 
-### (Opzionale) Passo 7: Aggiungi il routing localizzato alla tua applicazione
+</Step>
+
+<Step number={7} title="Aggiungi il routing localizzato alla tua applicazione" isOptional={true}>
 
 Per gestire il routing localizzato nella tua applicazione Svelte, puoi usare `svelte-spa-router` insieme a `localeFlatMap` di Intlayer per generare le rotte per ogni locale.
 
@@ -393,7 +442,9 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 });
 ```
 
-### (Opzionale) Passo 8: Cambiare l'URL quando la lingua cambia
+</Step>
+
+<Step number={8} title="Cambiare l'URL quando la lingua cambia" isOptional={true}>
 
 Per permettere agli utenti di cambiare lingua e aggiornare di conseguenza l'URL, puoi creare un componente `LocaleSwitcher`. Questo componente utilizzerà `getLocalizedUrl` da `intlayer` e `push` da `svelte-spa-router`.
 
@@ -457,7 +508,9 @@ Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazio
 
 ---
 
-### (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.
 
@@ -630,3 +683,7 @@ Adatta i comandi se usi pnpm o yarn. Puoi anche richiamare lo script dalla CI o
 ### Vai oltre
 
 Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/it/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Come tradurre un'app Vanilla JS nel 2026
-description: Scopri come rendere multilingue il tuo sito web Vite e Vanilla JS. Segui la documentazione per l'internazionalizzazione (i18n) e la traduzione.
+updatedAt: 2026-05-31
+title: i18n Vite + Vanilla JS - Guida completa per tradurre Vanilla JS
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Vite and Vanilla JS applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -58,22 +58,55 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `i18next` o `i18n.js`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa di Vite">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, percorsi e contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della lingua.
+Intlayer è ottimizzato per funzionare perfettamente con Vite offrendo **gestione dei contenuti indipendente dal framework**, **supporto TypeScript** 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 Vite e Vanilla JS
 
-### Passaggio 1: Installa le dipendenze
+<Steps>
+
+<Step number={1} title="Installa le dipendenze">
 
 Installa i pacchetti necessari utilizzando npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per l'integrazione di Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre a un middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.
 
-### Passaggio 2: Configurazione del progetto
+</Step>
+
+<Step number={2} title="Configurazione del progetto">
 
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione sulla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 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.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione del contenuto e li monitora in modalità sviluppo. Definisce le variabili di ambiente Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 4: Bootstrap di Intlayer nel tuo punto di ingresso
+</Step>
+
+<Step number={4} title="Bootstrap di Intlayer nel tuo punto di ingresso">
 
 Chiama `installIntlayer()` **prima** che qualsiasi contenuto venga renderizzato in modo che il singleton della lingua globale sia pronto.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Passaggio 5: Dichiarazione del contenuto
+</Step>
+
+<Step number={5} title="Dichiarazione del contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -253,7 +294,9 @@ export default appContent;
 >
 > Per maggiori dettagli, consulta la [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 6: Usa Intlayer nel tuo JavaScript
+</Step>
+
+<Step number={6} title="Usa Intlayer nel tuo JavaScript">
 
 `vanilla-intlayer` rispecchia l'API di superficie di `react-intlayer`: `useIntlayer(key, locale?)` restituisce direttamente il contenuto tradotto. Collega `.onChange()` sul risultato per iscriverti ai cambiamenti di lingua - l'equivalente esplicito di un re-render di React.
 
@@ -289,7 +332,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opzionale) Passaggio 7: Cambia la lingua dei tuoi contenuti
+</Step>
+
+<Step number={7} title="Cambia la lingua dei tuoi contenuti" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto, usa la funzione `setLocale` esposta da `useLocale`.
 
@@ -324,7 +369,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (Opzionale) Passaggio 8: Renderizza contenuti Markdown e HTML
+</Step>
+
+<Step number={8} title="Renderizza contenuti Markdown e HTML" isOptional={true}>
 
 Intlayer supporta le dichiarazioni di contenuto `md()` e `html()`. In vanilla JS, l'output compilato viene inserito come HTML grezzo tramite `innerHTML`.
 
@@ -383,7 +430,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Opzionale) Passaggio 9: Aggiungi il routing localizzato alla tua applicazione
+</Step>
+
+<Step number={9} title="Aggiungi il routing localizzato alla tua applicazione" isOptional={true}>
 
 Per creare percorsi unici per ogni lingua (utile per il SEO), puoi utilizzare `intlayerProxy` nella tua configurazione Vite per il rilevamento della lingua lato server.
 
@@ -403,7 +452,9 @@ export default defineConfig({
 });
 ```
 
-### (Opzionale) Passaggio 10: Cambia l'URL quando cambia la lingua
+</Step>
+
+<Step number={10} title="Cambia l'URL quando cambia la lingua" isOptional={true}>
 
 Per aggiornare l'URL del browser quando cambia la lingua, chiama `useRewriteURL()` dopo aver installato Intlayer:
 
@@ -417,7 +468,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Opzionale) Passaggio 11: Passa agli attributi HTML della lingua e della direzione
+</Step>
+
+<Step number={11} title="Passa agli attributi HTML della lingua e della direzione" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per corrispondere alla lingua corrente per l'accessibilità e il SEO.
 
@@ -435,7 +488,9 @@ useLocale({
 });
 ```
 
-### (Opzionale) Passaggio 12: Caricamento differito dei dizionari per lingua
+</Step>
+
+<Step number={12} title="Caricamento differito dei dizionari per lingua" isOptional={true}>
 
 Per le app di grandi dimensioni potresti voler dividere il dizionario di ogni lingua nel proprio chunk. Usa `useDictionaryDynamic` insieme all'`import()` dinamico di Vite:
 
@@ -458,7 +513,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > Il bundle di ogni lingua viene recuperato solo quando quella lingua diventa attiva e il risultato viene memorizzato nella cache - i successivi passaggi alla stessa lingua sono istantanei.
 
-### (Opzionale) Passaggio 13: Estract il contenuto dei tuoi componenti
+</Step>
+
+<Step number={13} title="Estract il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -673,3 +730,7 @@ Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazio
 ### Vai oltre
 
 Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare il tuo contenuto utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+</Step>
+
+</Steps>