@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ru/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Как перевести приложение React Router v7 в 2026
-description: Узнайте, как добавить интернационализацию (i18n) в ваше приложение на React Router v7 с помощью Intlayer. Следуйте этому подробному руководству, чтобы сделать ваше приложение многоязычным с маршрутизацией, учитывающей локаль.
+updatedAt: 2026-05-31
+title: "React Router v7 i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения React Router v7. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -46,23 +46,62 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer**, это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как «react-i18next» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с автогенерируемыми типами, улучшая автодополнение и обнаружение ошибок.
-- **Воспользоваться расширенными возможностями**, такими как динамическое определение и переключение локали.
-- **Включить маршрутизацию с учетом локали** с помощью системы маршрутизации на основе конфигурации React Router v7.
+<Accordion header="Полное покрытие React Router">
+
+Intlayer оптимизирован для идеальной работы с React Router, предлагая **маршрутизацию с учетом локали**, **промежуточное ПО для определения локали** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[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)**, и **[навыки агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
+
+</Accordion>
+
+<Accordion header="Автоматизация">
+
+Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
+
+</Accordion>
+
+<Accordion header="Производительность">
+
+Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
+
+</Accordion>
+
+<Accordion header="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Пошаговое руководство по настройке Intlayer в приложении React Router v7
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью предпочитаемого менеджера пакетов:
 
@@ -100,7 +139,13 @@ bun x intlayer init
 - **vite-intlayer**
   Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления куки и обработки перенаправления URL.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
+
+</Step>
+
+</Steps>
 
 ## Пошаговое руководство по настройке Intlayer в приложении React Router v7 с маршрутами на основе файловой системы
 
@@ -153,7 +198,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL-адреса, перенаправления в middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
+<Steps>
+
+<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию:
 
@@ -169,7 +216,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Настройка маршрутов React Router v7
+</Step>
+
+<Step number={4} title="Настройка маршрутов React Router v7">
 
 Настройте конфигурацию маршрутов с учетом локализации:
 
@@ -182,7 +231,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Шаг 5: Создайте компоненты Layout
+</Step>
+
+<Step number={5} title="Создайте компоненты Layout">
 
 Настройте корневой layout и layout для конкретных локалей:
 
@@ -236,7 +287,9 @@ export function Layout({
 }
 ```
 
-### Шаг 6: Объявите ваш контент
+</Step>
+
+<Step number={6} title="Объявите ваш контент">
 
 Создайте и управляйте объявлениями контента для хранения переводов:
 
@@ -276,7 +329,9 @@ export default pageContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 7: Создайте компоненты с поддержкой локали
+</Step>
+
+<Step number={7} title="Создайте компоненты с поддержкой локали">
 
 Создайте компонент `LocalizedLink` для навигации с учётом локали:
 
@@ -339,7 +394,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Шаг 8: Использование Intlayer на ваших страницах
+</Step>
+
+<Step number={8} title="Использование Intlayer на ваших страницах">
 
 Получайте доступ к вашим словарям контента по всему приложению:
 
@@ -393,7 +450,9 @@ export default function Page() {
 
 > Если ваше приложение уже существует, вы можете использовать [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) в сочетании с [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md), чтобы преобразовать тысячи компонентов за одну секунду.
 
-### Шаг 9: Создайте компонент переключателя локали
+</Step>
+
+<Step number={9} title="Создайте компонент переключателя локали">
 
 Создайте компонент, позволяющий пользователям менять язык:
 
@@ -454,7 +513,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md).
 
-### Шаг 10: Добавление управления атрибутами HTML (необязательно)
+</Step>
+
+<Step number={10} title="Добавление управления атрибутами HTML">
 
 Создайте хук для управления атрибутами lang и dir в HTML:
 
@@ -492,7 +553,9 @@ export default function RootLayout() {
 }
 ```
 
-### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -590,6 +653,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 +722,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.
 
-### Шаг 11: Добавьте middleware (необязательно)
+<Steps>
+
+<Step number={11} title="Добавьте middleware">
 
 Вы также можете использовать `intlayerProxy` для добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующее cookie с локалью. Если локаль не указана, плагин определит наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не будет обнаружена, произойдет перенаправление на локаль по умолчанию.
 
@@ -678,6 +747,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Настройка TypeScript
 
 Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать ваш код более надежным.

package/docs/ru/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 - Как перевести приложение React Router v7 в 2026
-description: Узнайте, как добавить интернационализацию (i18n) в ваше приложение на React Router v7 с помощью Intlayer с маршрутизацией на основе файловой системы. Следуйте этому подробному руководству, чтобы сделать ваше приложение многоязычным с маршрутизацией, учитывающей локаль.
+updatedAt: 2026-05-31
+title: "React Router v7 i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения React Router v7. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -44,17 +44,54 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer**, это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как «react-i18next» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с автогенерируемыми типами, улучшая автодополнение и обнаружение ошибок.
-- **Воспользоваться расширенными возможностями**, такими как динамическое определение и переключение локали.
-- **Включить маршрутизацию с учетом локали** с помощью системы маршрутизации на основе конфигурации React Router v7.
+<Accordion header="Полное покрытие React Router">
+
+Intlayer оптимизирован для идеальной работы с React Router, предлагая **маршрутизацию с учетом локали**, **промежуточное ПО для определения локали** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[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)**, и **[навыки агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
+
+</Accordion>
+
+<Accordion header="Автоматизация">
+
+Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
+
+</Accordion>
+
+<Accordion header="Производительность">
+
+Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
+
+</Accordion>
+
+<Accordion header="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -92,7 +129,9 @@ history:
 
 See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) on GitHub.
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью предпочитаемого менеджера пакетов:
 
@@ -129,7 +168,9 @@ bun x intlayer init
 - **@react-router/fs-routes**
   Пакет, который обеспечивает маршрутизацию на основе файловой системы для React Router v7.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -148,7 +189,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL-адреса, перенаправления в middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию:
 
@@ -164,7 +207,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Настройка маршрутов на основе файловой системы React Router v7
+</Step>
+
+<Step number={4} title="Настройка маршрутов на основе файловой системы React Router v7">
 
 Настройте конфигурацию маршрутов для использования маршрутов на основе файловой системы с `flatRoutes`:
 
@@ -185,7 +230,9 @@ export default routes;
 
 > Функция `flatRoutes` из `@react-router/fs-routes` включает маршрутизацию на основе файловой системы, где структура файлов в директории `routes/` определяет маршруты вашего приложения. Опция `ignoredRouteFiles` гарантирует, что файлы декларации контента Intlayer (`.content.ts`, и т.д.) не обрабатываются как файлы маршрутов.
 
-### Шаг 5: Создайте файлы маршрутов с соглашениями файловой системы
+</Step>
+
+<Step number={5} title="Создайте файлы маршрутов с соглашениями файловой системы">
 
 При маршрутизации на основе файловой системы вы используете плоское соглашение об именовании, где точки (`.`) представляют сегменты пути, а скобки `()` обозначают необязательные сегменты.
 
@@ -350,7 +397,9 @@ export default function AboutPage() {
 
 > Если ваше приложение уже существует, вы можете использовать [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) в сочетании с [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md), чтобы преобразовать тысячи компонентов за одну секунду.
 
-### Шаг 6: Объявите ваш контент
+</Step>
+
+<Step number={6} title="Объявите ваш контент">
 
 Создайте и управляйте объявлениями контента для хранения переводов. Разместите файлы контента рядом с файлами маршрутов:
 
@@ -412,7 +461,9 @@ export default aboutContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 7: Создайте компоненты с поддержкой локали
+</Step>
+
+<Step number={7} title="Создайте компоненты с поддержкой локали">
 
 Создайте компонент `LocalizedLink` для навигации с учётом локали:
 
@@ -475,7 +526,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Шаг 8: Создайте компонент переключателя локали
+</Step>
+
+<Step number={8} title="Создайте компонент переключателя локали">
 
 Создайте компонент, позволяющий пользователям менять язык:
 
@@ -536,7 +589,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md).
 
-### Шаг 9: Добавление управления атрибутами HTML (необязательно)
+</Step>
+
+<Step number={9} title="Добавление управления атрибутами HTML">
 
 Создайте хук для управления атрибутами lang и dir в HTML:
 
@@ -557,7 +612,9 @@ export const useI18nHTMLAttributes = () => {
 
 Этот хук уже используется в компоненте layout (`root.tsx`), показанном в Шаге 5.
 
-### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -655,6 +712,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.
@@ -721,7 +782,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.
 
-### Шаг 10: Добавьте middleware (необязательно)
+<Steps>
+
+<Step number={10} title="Добавьте middleware">
 
 Вы также можете использовать `intlayerProxy` для добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующее cookie с локалью. Если локаль не указана, плагин определит наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не будет обнаружена, произойдет перенаправление на локаль по умолчанию.
 
@@ -744,6 +807,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Настройка TypeScript
 
 Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать ваш код более надежным.

package/docs/ru/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Как настроить Intlayer с помощью Storybook
-description: Узнайте, как сделать вашу дизайн-систему многоязычной с помощью Intlayer и Storybook - компилируйте декларации контента, добавьте переключатель языков и просматривайте компоненты на любом языке.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения Storybook. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -31,16 +31,54 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях. Она работает на **уровне компонентов** - каждый компонент владеет своими декларациями контента, что позволяет хранить переводы рядом с кодом, который их использует.
+По сравнению с основными решениями, такими как «storybook-react-i18next» или «i18next», Intlayer — это решение со встроенными оптимизациями, такими как:
 
-С Intlayer вы можете:
+<AccordionGroup>
 
-- **Управлять переводами декларативно** с помощью файлов контента для каждого компонента.
-- **Получать полную поддержку TypeScript** через автоматически создаваемые типы и автодополнение в IDE.
-- **Переключать языки во время выполнения** без перезагрузки страницы.
-- **Переводить автоматически** благодаря встроенной интеграции с ИИ.
+<Accordion header="Полный сборник рассказов">
+
+Intlayer оптимизирован для идеальной работы с Storybook, предлагая **многоязычные декораторы историй**, **переключение языковых стандартов** и все функции, необходимые для масштабирования интернационализации (i18n) в вашей дизайн-системе.
+
+</Accordion>
+
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[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)**, и **[навыки агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
+
+</Accordion>
+
+<Accordion header="Автоматизация">
+
+Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
+
+</Accordion>
+
+<Accordion header="Производительность">
+
+Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
+
+</Accordion>
+
+<Accordion header="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook - это отраслевой стандарт для разработ
 <Tabs>
 <Tab value="Vite Setup">
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Шаг 2: Создание конфигурации Intlayer
+</Step>
+
+<Step number={2} title="Создание конфигурации Intlayer">
 
 Создайте `intlayer.config.ts` в корне вашего проекта (или внутри вашего пакета дизайн-системы):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Шаг 3: Добавление плагина Vite в Storybook
+</Step>
+
+<Step number={3} title="Добавление плагина Vite в Storybook">
 
 Хук `viteFinal` в Storybook позволяет расширить внутреннюю конфигурацию Vite. Импортируйте и добавьте туда плагин `intlayer()`:
 
@@ -159,7 +203,9 @@ export default config;
 
 ---
 
-### Шаг 4: Добавление декоратора `IntlayerProvider` и переключателя языков
+</Step>
+
+<Step number={4} title="Добавление декоратора `IntlayerProvider` и переключателя языков">
 
 Файл `preview` в Storybook - подходящее место для обертывания каждой истории в `IntlayerProvider` и добавления переключателя языков в панель инструментов:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Шаг 1: Установка зависимостей
+</Step>
+
+<Step number={1} title="Установка зависимостей">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Шаг 2: Создание конфигурации Intlayer
+</Step>
+
+<Step number={2} title="Создание конфигурации Intlayer">
 
 Создайте `intlayer.config.ts` в корне вашего проекта:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Шаг 3: Настройка Webpack в Storybook
+</Step>
+
+<Step number={3} title="Настройка Webpack в Storybook">
 
 Для настроек Storybook на базе Webpack (например, `@storybook/react-webpack5`) расширьте конфигурацию webpack через `webpackFinal`, чтобы добавить алиасы и загрузчик Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Шаг 4: Добавление декоратора `IntlayerProvider` и переключателя языков
+</Step>
+
+<Step number={4} title="Добавление декоратора `IntlayerProvider` и переключателя языков">
 
 Аналогично настройке Vite - добавьте декоратор и глобальный тип языка в `.storybook/preview.tsx`:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Объявление контента
 
 Создайте файл `*.content.ts` рядом с каждым компонентом. Intlayer автоматически подхватит его во время компиляции.