Этот инструмент с открытым исходным кодом может развернуть целые веб -сайты из одной подсказки
hackernoon-top-story ai machine-learning nextjs open-source vercel chatgpt open-ai v0

Этот инструмент с открытым исходным кодом может развернуть целые веб -сайты из одной подсказки

28 июля 2025 г.

Этот учебник является первым выпуском комплексного руководства по созданию системы для автоматического генерации веб-страниц с использованием React 19 и Next.js 15. Наша фокус не только на скорости, но и на архитектурной элегантности и последовательном дизайне бренда.

Открытый исходный код:(https://github.com/aifa-agi/aifa)

Вот дорожная карта:

  • Часть 1 (вы здесь): Глубокое погружение в основном архитектуре-все маршруты, компонент PageHtmlTransformer и решительно напечатанные конфигурации страниц.
  • Часть 2: Продвинутые типы страниц - страницы документации и интерактивные учебные пособия.
  • Часть 3: Интеграция двигателя AI - подключение внешних моделей (CHATGPT, Claude) и нашего внутреннего агента AIFA для непрерывной, автономной генерации контента.
  • Бонус: тематическое исследование-развертывание, монетизация и масштабирование AI SaaS производственного класса с регистрацией пользователей и платежами по полоскам.

Этот пошаговый план проводит вас через создание собственного клона V0, готового к предприятию, в комплекте с аутентификацией и потоками платежей. Реальный продукт AI от концепции до запуска-полный исходный код, доступный по адресу. Подпишитесь, чтобы следовать полной серии - это только начало!

Технологический стек: React 19 · Next.js 15 · Vercel · Prisma · полоса · ai sdk · Chatgpt

Наша платформа сочетает в себе стабильность предприятия с инновациями BleedingEdge:

  • React 19 & Next.js 15 с приложением маршрутизатораДоставлять рендеры и настоящие параллельные маршруты.
  • ВертелPowers Zero-Laytime развертывание и глобальное масштабирование краев.
  • Prisma & NeonУбедитесь, что безопасный, молниеносный доступ к данным.
  • ПолосаОбрабатывает мгновенные платежи, совместимые с PCI из коробки.
  • AI SDK + CHATGPTСлои в генеративном интеллекте, поэтому стартер AIFA DEV может развернуться полным пользовательским интерфейсом, контент-модулями и прототипам за считанные минуты-выполнять встроенную аутентификацию и многоязычный чат ИИ.

Как это работает

  1. Быстрый: Отправьте единый запрос естественного языка в Chatgpt.
  2. Генерировать: Получить базирующийся в JSONPageConfigЭто определяет разделы вашей страницы, метаданные и макет.
  3. Строить: Оставьте файл конфигурации в приложение следующего.js и запуститьnpm run buildПолем Мгновенно у вас есть полностью стилизованная страница SEO-reade, в комплекте с Auth и AI-чатом.

Нужна интеграция предприятия? Просто включите наш «корпоративный режим V0» в [предстоящий AIFA.DEV (https://aifa.dev) для расширенной автоматизации, доступа на основе ролей и масштабируемой архитектуры микросервисов.

Кто выигрывает с генератором сайта с AI? Студии, предприятия, стартапы и фрилансеры

Агентство по дизайну следующего поколения: от макета до массового производства в считанные минуты

Представьте себе агентство, которое архитежирует масштабируемые технологические экосистемы, а не только статические макеты. Единственные авансовые инвестиции в фирменную библиотеку компонентов открывают возможность генерировать и развернуть более 50 веб-сайтов производства в час.

Это не научная фантастика. Это новая оперативная парадигма, где Creative Capital соответствует автоматическому исполнению. А со встроенной интеграцией полосы вы можете монетизировать эту новую скорость с первого дня. Мы рассмотрим это дальше в более позднем посте.

Развертывания предприятия: последовательность бренда и радикальная масштабируемость

Классический вариант использования предприятия: решение меню «под ключ» для национальной франшизы ресторана. Вы создаете мастер -систему дизайна для основного пользовательского опыта - например, карты продуктов или меню - просто один раз. Это становится белым решением, которое вы можете развернуть в сотнях франчайзи или местоположений.

Каждое местоположение настраивает брендинг и контент через простой интерфейс, в то время как основная целостность UX, производительность и дизайн остается запертой и последовательной. Это Trifecta требования к рынку предприятия в 2025 году:радикальная масштабируемостьВПуленепробиваемая консистенция бренда, иНепревзойденная скорость до рынкаПолем

Двигатель Core: наша архитектура трансформатора json-to-react

Вся эта система питается двумя критическими компонентами:

  1. Интеллектуальная оперативная инженерия

    Мы используем высокооплачиваемые инструкции, которые приказывают ИИ для вытягивания шаблонов разделов, проверенных в бою из векторной базы данных, и адаптировать их к вашему конкретному запросу.

  2. Архитектура трансформатора компонентов

    Наши компоненты React спроектированы для интерпретации этих конфигураций JSON, мгновенно преобразовывая их в полностью трансформированные интерактивные страницы.

В то время как внешние модели, такие как Chatgpt и Claude, обрабатывают генерацию контента, наши собственные компоненты трансформатора являются основным двигателем системы - часть, которую мы создали, чтобы гарантировать производительность и точность дизайна.

AI-клиентная документация: Используйте этот урок в качестве живой базы знаний

Останавливатьсячтениедокументация. Начинатькомандующийэто.

Настоящая сила этого руководства не в чтении его к покрытию. Он предназначен для того, чтобы быть частной, экспертной базой знаний вашего проекта.

Как это работает:

  1. КормитьВесь этот документ в Chatgpt.
  2. Проситьконкретные, контекстуальные вопросы: «Как мне реализовать пользовательский раздел?», «Какова цельFullScreenWrapper? »,« Покажи мне код дляDoublePresentationкомпонент. "
  3. ПолучатьТочные, готовые к производству ответы с полными фрагментами кода.

Это не просто документация; Это действенная пьеса. Попробуйте этот подход, и вы поймете, почему вся техническая документация в 2025 году должна быть AI-местной.

1. Введение: наша философия - согласованность превышает необработанную скорость

Это руководство не о создании максимально быстрого генератора страниц ИИ. В то время как инструменты искусственного интеллекта, такие как V0, определяют скорость сырой генерации, наша методология фокусируется на более важной бизнес -метрике:Общая стоимость владения (TCO)Полем Наша основная цель - обеспечить пуленепробиваемую последовательность дизайна и архитектурную гармонию по всему вашему цифровому следам.

В то время как начальное поколение одной страницы может занять немного больше времени, последующие сбережения в разработке, обслуживании и управлении брендом являются экспоненциальными. Вот почему этот компромисс обеспечивает превосходную рентабельность инвестиций:

  • Пуленепробиваемая консистенция бренда: Каждая страница, сгенерированная AI, автоматически соответствует вашей установленной системе проектирования. Нет компонентов Rogue, нет стиля внебренда.
  • Беспланный пользовательский опыт: Архитектура гарантирует гармоничное и сплоченное путешествие для пользователя, устраняя резкие несоответствия, распространенные на быстро генерируемых сайтах.
  • Радикально уменьшенная переделка: Применение стандартов в точке создания, мы минимизируем дорогие и трудоемкие ручные корректировки, как правило, требуются после поколения.
  • Истинная архитектурная масштабируемость: Наш подход становится более эффективным по мере масштабирования. Чем больше страниц вы генерируете, тем больше доходность скорости и последовательности.

Результат не просто коллекция страниц; Это цифровой активы сплоченного профессионального уровня, который изящно масштабируется с минимальными накладными расходом.

Помимо оснований: обработка реальной сложности

Этот первоначальный урок фокусируется на создании стандартных страниц с нашим ядромHeaderВBody, иFooterкомпоненты. Тем не менее, кодовая база с открытым исходным кодом предоставляет расширенные, вне коробки решения для более сложных требований:

  • Страницы документациис продвинутой, вложенной навигацией.
  • Интерактивные учебные страницыс государственными, пошаговыми элементами.

Наша архитектура предназначена для расширяемости. Для уникальных, очень интерактивных функций-таких как анимированные презентации, панели данных в реальном времени или компоненты со сложным управлением состоянием-вы можете вводитьПользовательские компонентыпрямо в конвейер рендеринга. Это дает вам гибкость для реализации индивидуальной функциональности, не ставя под угрозу основную целостность системы.

Ваш следующий шаг: практическое с помощью пользовательских компонентов

Чтобы по -настоящему овладеть этой системой, ваше практическое задание состоит в том, чтобы изучить процесс создания и интеграции нового пользовательского компонента. Это укрепит ваше понимание силы и гибкости архитектуры.

1.1. Концепция: ИИ как управляющий брендом, а не только контент -двигатель

Современные цифровые операции требуют скорости, целостности бренда и рыночной гибкости. Наша архитектура достигает этого, рассматривая вашу систему проектирования как структурированную, интеллектуальную базу знаний. Формализованные, предварительно одобренные определения для каждого критического бренда (Hero, CTA, FAQ, функции и т. Д.) Получаются AI.

Поправляя AI точные стандарты пользовательского интерфейса/UX, он становится больше, чем генератор контента - он становится окончательным управляющим идентичности вашего бренда, обеспечивая соблюдение согласованности на каждом этапе жизненного цикла создания страницы.

1.2. 5-ступенчатый рабочий процесс: от системы проектирования до Seo-Opttimized Build

  1. Принимайте вашу систему проектирования:Мы загружаем базу знаний ИИ с вашими шаблонами компонентов и явными инструкциями о том, как реализовать их визуально и структурно, обеспечивая 100% выравнивание бренда.
  2. Определите цель с помощью подсказки:Пользователь, менеджер проекта или разработчик представляет простую текстовую подсказку, описывающую желаемую страницу или его элементы.
  3. ИИ интерпретация и структурирование:Агент ИИ анализирует запрос, генерирует семантическое содержание и разумно отображает его с соответствующими, предварительно одобренными шаблонами из базы знаний.
  4. Создайте декларативный PageConfig:На основании выбранных шаблонов, система выводит сильноPageConfig- Декларативное описание финальной страницы. Это гарантирует соблюдение бренда и упрощает развитие вниз по течению.
  5. Автоматизированная сборка и развертывание:Конфигурация потребляется нашими компонентами рендеринга в процессе сборки. Выход-это готовая к производству, оптимизированная страница, которая визуально и технически соответствует вашим корпоративным стандартам.

1.3. Влияние на бизнес: конверсии и сбрасывание TCO

  • Ускоренный выход на рынок:Запустите новые страницы посадки и продукта с помощью одной подсказки, используя предварительно одобренные шаблоны для непревзойденной скорости.
  • Ironclad Brand Comtensity:Последовательность бренда и управление качеством автоматизированы, обеспечивающие обеспечение каждую новую страницу идеально отражает вашу систему проектирования.
  • Снижение ручных накладных расходов и масштабируемого A/B -тестирования:Расширить возможности маркетинговых групп для масштабирования вариаций страниц и контента A/B, не вовлекая разработчиков в процесс макета.
  • Создан для глобального масштаба:Все элементы текста и пользовательского интерфейса централизованы, что делает локализацию и адаптацию на рынке плавной.
  • Архитектурная гибкость:Разработанный для безупречной интеграции в современные трубопроводы CI/CD, платформы для хостинга и другие рабочие процессы, управляемые искусственным интеллектом.

1.4. Ваша дорога через эту серию

В этом всеобъемлющем учебном пособии мы проведем вас через:

  • Деконструирование основной архитектуры:Глубокое погружение вPageHtmlTransformer,Wrapper/FullScreenWrapperСистема и как взаимодействуют компоненты раздела.
  • Освоение конвейера рендеринга:Поймите логику, стоящую за рендерингом раздела, печати конфигурации и взаимосвязи между файлами конфигурации и компонентами React, чтобы вы могли продлить систему самостоятельно.
  • Учимся обучать ИИ:Узнайте, как создавать структурированные инструкции для метаданных, заголовков и нижних колонтитулов, и определить спецификации для получения содержания тела как фрагмент JSX.
  • Создание страниц по требованию:Примените свои знания, чтобы создатьconfigФайлы, которые ИИ использует для создания страниц, которые полностью соответствуют вашей архитектуре и стандартам дизайна.

2. Анатомия нашей архитектуры с AI с помощью AI

Наш проект организован, чтобы максимизировать масштабируемость, обслуживание и скорость развития. Мы используем Next.js 15 Conventions Router, включая параллельные маршруты (@right) и частные папки (_folder), чтобы создать чистую и мощную структуру.

Дерево каталогов проектов

app/@right/
├── public/
│   ├── (_routing)/
│   │   └── [[...slug]]/
│   │       └── page.tsx                   # 1. Dynamic Catch-All Route Handler
│   └── (_service)/
│       ├── (_config)/
│       │   └── public-pages-config.ts     # 6. AI-Generated Page Configurations
│       └── (_libs)/
│           └── utils.ts                   # 7. Configuration Utilities
└── (_service)/
    ├── (_types)
    │   └── page-wrapper-types.ts          # 5. The TypeScript Data Contract (AI <-> UI)
    └── (_components)/
        └── page-transformer-components/
            ├── page-html-transformer.tsx    # 2. The Core Page Transformer Engine
            ├── custom-sections/             # Directory for complex, interactive components
            ├── wrappers/
            │   ├── full-screen-wrapper.tsx  # 3. Immersive Full-Screen Wrapper
            │   └── wrapper.tsx              # 4. Standard Content Section Wrapper
            ├── header-sections-components/
            │   ├── header-section.tsx       # 8. Standardized Header Component
            │   ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2)
            │   └── announcement.tsx         # 10. Announcement Banner Component
            ├── body-sections-components/
            │   └── body-section.tsx         # 12. Flexible Body Content Container
            └── footer-sections-components/
                └── footer-section.tsx       # 11. Standardized Footer Component

Введите полноэкранную режим выхода из полноэкранного режима

Ключевые компонентные пути

1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx
2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx
3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx
4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx
5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts
6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts
7. @/app/@right/public/(_service)/(_libs)/utils.ts
8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx
9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx
10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx
11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx
12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx

Введите полноэкранную режим выхода из полноэкранного режима

2.1. Инструментарий Core Component: готовые к производству страниц из коробки

Цель

Наша стандартная библиотека компонентов обеспечивает инженерную основу для создания надежных, выравниваемых брендами страниц в масштабе. Эта коллекция состоит из архитектурных столбов нашей системы: динамическая маршрутизация, центральный двигатель трансформатора, универсальные обертки содержимого, разделы Unified Header и нижний колонтитул, а также файлы конфигурации и контракты данных, которые их управляют.

Основные архитектурные принципы:

  • Пуленепробиваемой консистенция пользовательского интерфейса: Каждый компонент придерживается единой системы проектирования и поведенческих шаблонов, обеспечивая бесшовный и предсказуемый пользовательский опыт.
  • AI-родной по дизайну: Архитектура оптимизирована для автономного поколения, что позволяет ИИ строить сложные страницы без ручного вмешательства.
  • SEO-оптимизированный с нуля: Лучшие практики для поисковой оптимизации и семантического HTML, а не прикреплены.
  • Тип-безопасность и предсказуемый: Мы используем строгое типирование TypeScript для обеспечения надежного договора данных между ИИ и пользовательским интерфейсом, обеспечивая стабильность системы.
  • Модульный и композитный: Каждый компонент представляет собой автономную единицу, которая решает конкретную проблему, предназначенную для максимальной повторного использования и расширяемости.

Вместе эти компоненты образуют основу системы, гарантируя, что каждая страница, сгенерированная AI, является не только визуально сплоченной, но и технически устойчивой и готовым для предприятий.

2.1.1. А[[...slug]]/page.tsxКомпонент: универсальный маршрут для динамических URL-адресов

2.1.1.1. Стратегическая ценность маршрутов с уловкой: ловкость и скорость развертывания

Маршрут с уловкой-это динамическая шаблон маршрутизации в next.js, которая позволяет одностраничному компоненту обрабатывать бесконечное количество сегментов URL. С помощью[[...slug]]Конвенция,slugПараметр становится массивом, содержащим каждую часть пути URL, независимо от того, насколько он глубоко вложен.

С точки зрения бизнеса, этот архитектурный выбор является огромным конкурентным преимуществом. Вот почему:

  • Бесконечное гнездование и глубина содержания:Вы больше не ограничены структурой файла проекта. URL как/public/category/nike/sneakers/black/12345обрабатывается точно таким же компонентом, что и/public/testПолем Это разблокирует возможность создавать глубоко иерархические каталоги продуктов, сайты документации или библиотеки контента, не требуя каких -либо изменений в кодовой базе.
  • Навигация без трения и запуск мгновенной страницы:Развертывание новой страницы так же просто, как добавить ее конфигурацию в центральный файл. Страница мгновенно выйдет в эфир, не создавая новые компоненты или навигации по сложной файловой системе. Это предотвращает контент -стратегию от инженерных циклов, расширяя возможности маркетинговых и продуктов, чтобы двигаться быстрее.
  • Встроенная автоматизация:Эта архитектура является основой для полностью автоматизированной экосистемы контента. Автопогенерированная боковая панель или меню может быть запрограммировано на чтение конфигураций страницы и динамически построить навигацию. Когда вы добавляете новую конфигурацию страницы, навигационные обновления автоматически обновляются, обеспечивая постоянный пользовательский опыт с нулевыми ручными усилиями.

2.1.1.2. Значение динамических URL -адресов для помощников искусственного интеллекта: бесконечная масштабируемость контента

В современной конкурентной ландшафте современные платформы SaaS и AI требуют ловкости, чтобы создать новые страницы на лету. Независимо от того, инициировано пользователем, администратором или автономным агентом искусственного интеллекта, контент должен быть заархивирован для мгновенного создания и развертывания. Наша архитектура маршрутизации All-это двигатель, который управляет этой возможностью.

Стратегические бизнес -преимущества:

  • Устраняет архитектурные ограничения:Он удаляет все ограничения на структуру контента и глубину гнездования, позволяя вашему цифровому присутствию бесконечно масштабироваться, не требуя изменений кода.
  • Разблокирует непревзойденную ловкость:Создайте сложные иерархии контента для любого варианта использования. Навигация управляется исключительно вашей бизнес -логикой, не ограниченной жесткой файловой системой. Это предотвращает вашу контент -стратегию от инженерных циклов, расширяет возможности продуктов и маркетинговых групп для быстрее.
  • Позволяет автоматизировать AI с AI:Эта архитектура предназначена для мирового мира. Он обеспечивает стабильную основу для агентов искусственного интеллекта для автономного генерирования, настройки и развертывания целых разделов вашего сайта, от каталогов продуктов до баз знаний.

2.1.1.3. Реальные варианты использования в масштабе

Эта архитектура не теоретическая; Это проверенная в битве модель для развертывания высоких, глубоко вложенных структур контента, которые стимулируют рост бизнеса:

  • Системы меню QR под ключ:Развернуть белое решение для франшизы национальной ресторана. Каждое место может иметь уникальное, глубоко категоризированное меню (например,,/public/menu/dallas-tx/dinner/mains/pasta-dishes), все это при сохранении идеальной последовательности бренда и целостности UX.
  • Каталоги продуктов электронной коммерции:Запустите обширные линейки продуктов с бесконечными вариациями мгновенно. URL как/public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345становится тривиальным для создания и управления, обеспечивая быстрое расширение рынка и организацию гранулированного продукта.
  • Корпоративные и образовательные порталы:Создайте обширные базы знаний или учебные платформы, где контент может быть организован логически, независимо от того, насколько глубока должна идти иерархия (например,/public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting) #### 2.1.1.4. Как это работает: двигатель контента по требованию

По своей сути процесс элегантно прост, но мощный: он динамически переводит любой путь URL в соответствующую конфигурацию страницы, которая затем отображается на лету. Это технический фонд, который открывает ловкость бизнеса, описанную ранее.

Основные задачи компонента:

  1. Получите URL:Он фиксирует входящий путь URL как массив сегментов (например,["category", "nike", "sneakers"])

  2. Генерировать статические пути:АgenerateStaticParamsФункция активно читает вашpublic-pages-config.tsфайл. Он сообщает Next.js всех действительных маршрутов страниц, определенных в вашей конфигурации. Для бизнеса это переводится как комплексная статическая генерация сайтов (SSG), обеспечивая предварительно созданную каждую страницу для молниеносного времени нагрузки и оптимального SEO.

    export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); }

  3. Привлечь и рендеринг:Когда пользователь запрашивает URL, компонент получаетslugмножество. Затем используетсяgetPageBySlugутилита для выполнения высокоскоростного поиска по сравнению"public"для точного совпадения). Если совпадение найдено, конфигурация передается в нашу универсальныйPageHtmlTransformerкомпонент для рендеринга.

    export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; }

Потому чтоslugArrможет быть любой длиной, а поиск - прямое совпадение, эта система обеспечивает бесконечную глубину гнезда с нулевым риском столкновений маршрута.

2.1.1.5. Ключевые функции и их влияние на бизнес
  • generateStaticParams: DrivesПроизводительность и SEOсообщив next.js, который

2.1.1.7. Компонент: двигатель выполнения

Этот компонент-это двигатель, который воплощает в жизнь нашу архитектуру с AI. Это единственный, мощный компонент сервера Next.js, который действует как универсальный обработчик для каждой динамически сгенерированной общедоступной страницы. Он отвечает за получение правильной конфигурации страницы на основе URL-адреса и организации окончательного визуализации, обеспечивающего максимальную производительность, так и соблюдение SEO из ящика.

// @/app/@right/public/(_routing)/[[...slug]]/page.tsx


import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer";
import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config";
import { constructMetadata } from "@/lib/construct-metadata";
import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types";
import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages";


interface Props {
  params: Promise<{ slug?: string[] }>;
}


export async function generateStaticParams() {
  const pages: PageConfig[] = getAllPublicPages();


  return pages.map((page: PageConfig) => ({
    slug: page.metadata.slug || [],
  }));
}


export async function generateMetadata({ params }: Props) {
  const resolvedParams = await params;
  const slugArr = resolvedParams.slug ?? [];
  const pageConfig = getPageBySlug(["public", ...slugArr]);


  if (!pageConfig) return {};
  return constructMetadata(pageConfig.metadata);
}


export default async function PublicDynamicSlugPage({ params }: Props) {
  const resolvedParams = await params;
  const slugArr = resolvedParams.slug ?? [];
  const publicPageConfig = getPageBySlug(["public", ...slugArr]);


  if (!publicPageConfig) {
    return <div>Page not found</div>;
  }


  return <PageHtmlTransformer data={publicPageConfig} />;
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.1.7. Итог: маршруты с уловкой в качестве двигателя контента ИИ

Сочетание маршрутов с уловкой с централизованной конфигурацией страницы создает архитектуру, которая максимально гибкая, расширяемая и специально построенная для оркестровки контента, управляемого AI. Этот подход дружелюбен как для разработчиков, так и для агентов искусственного интеллекта, создавая плавный рабочий процесс от концепции до развертывания.

Основной принцип прост, но преобразующий:Новая страница - это просто новая запись в файле конфигурации.Нет новых кодовых файлов, нет сложных структур папок. Системы навигации и рендеринга адаптируются автоматически, что делает его краеугольным камнем действительно гибкой и масштабируемой платформы с AI.

2.1.3. FullScreenWrapper vs.

2.1.3.1. Основная цель

АFullScreenWrapperспециально спроектирован для разделов, которые требуют захватывающей полноэкранированной презентации с фоновым видео или поддержкой изображения. Он служит основополагающим контейнером для разделов «Герой», где контент элегантно накладывается поверх богатых элементов медиа.

2.1.3.2. Многослойная архитектура

Компонент использует сложную слоистую структуру, чтобы обеспечить контент оставаться разборчивым и визуально отличным от фона.

Технические основные моменты:

  • min-h-screen: Гарантирует, что раздел заполняет всю высоту видопросмотра, создавая очаровательный, полный эффект.

  • relativeПозиционирование: обеспечивает точноеz-indexУправление для укладки элементов.

  • Фоновые элементы (video/img): Расположено сabsoluteиz-0сидеть за всем другим контентом.

  • Контент -контейнер: Используетrelativeпозиционирование сz-10чтобы убедиться, что он всегда появляется на фоне.

    <section classname = "Относительный гибкий min-h-screen flex-col py-10 lg: py-14 bg-background"> {founalelement} // z-0 <div classname = "Относительный Z-10 Flex-Colle-Col Flex-1"> {Дети} // Заголовок → Body → Cool </div> </section>

Введите полноэкранную режим выхода из полноэкранного режима

2.1.3.3. Настройка и расширяемость

АFullScreenWrapperпредназначен для легкой настройки. Вы можете добавить сложные визуальные эффекты непосредственно черезclassNameпроп.

<FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900">

Введите полноэкранную режим выхода из полноэкранного режима

  • Контроль непрозрачности: Фоновые видео автоматически получаютopacity-40Класс для улучшения читаемости текста, но это может быть легко переопределено.
  • Плавные переходы: Аtransition-all duration-500Класс встроен для обеспечения плавных изменений в фоновых свойствах.

2.1.3.4. Усовершенствованный стиль и многоразовые шаблоны

Когда вам нужны разделители, границы, сияющие эффекты или фоновые размытыFullScreenWrapperПредоставляет идеальную основу для реализации этих стилей. Это делает его идеальным для создания высокоэлизованных, многоразовых шаблонов.

typescript

<FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect">

Введите полноэкранную режим выхода из полноэкранного режима

2.1.3.5. Компонент

// @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx


import React, { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";


interface FullScreenWrapperProps extends HTMLAttributes<HTMLDivElement> {
  videoUrl?: string;
  imageUrl?: string;
  className?: string;
  children: React.ReactNode;
}


export function FullScreenWrapper({
  videoUrl,
  imageUrl,
  className,
  children,
  ...props
}: FullScreenWrapperProps) {
  let backgroundElement: React.ReactNode = null;


  if (videoUrl) {
    backgroundElement = (
      <video
        className="absolute inset-0 size-full object-cover z-0 opacity-40 transition-all duration-500"
        autoPlay
        loop
        muted
        playsInline
        src={videoUrl}
      />
    );
  } else if (imageUrl) {
    backgroundElement = (
      <img
        className="absolute inset-0 size-full object-cover z-0"
        src={imageUrl || "/placeholder.svg"}
        alt="Background"
      />
    );
  }


  return (
    <section
      className={cn(
        "relative flex min-h-screen flex-col py-10 lg:py-14 bg-background",
        className
      )}
      {...props}
    >
      {backgroundElement}
      <div className="relative z-10 flex flex-col flex-1">{children}</div>
    </section>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.4. Обертка: стандартный контейнер для секции

2.1.4.1. Основной вариант использования

АWrapperэто контейнер по умолчанию для большинства разделов контента. Он предназначен для обеспечения стандартной заполнения, центрирования контента и последовательного, предсказуемого макета для информационных блоков.

2.1.4.2. Структура и стиль

typescript
<section className="py-10 lg:py-14 bg-background">
  <div className="container mx-auto px-4">
    {children}  // Header → Body → Footer
  </div>
</section>

Введите полноэкранную режим выхода из полноэкранного режима

Структура компонента проста и оптимизирована для производительности, полагаясь на несколько ключевых классов CSS с ключевым ветром:

  • py-10 lg:py-14: Применяет адаптивную вертикальную прокладку для последовательного расстояния между устройствами.
  • container mx-auto px-4: Создает центр контейнера с шириной максимальной ширины с горизонтальной прокладкой, обеспечивая, чтобы контент хорошо выровнялся и читается.
  • bg-background: Использует переменную CSS текущей темы для цвета фона, обеспечивая бесшовную интеграцию с режимами света/темного.

2.1.4.3. Точки настройки

В то время как минималистский по дизайну,Wrapperявляется гибкой основой для пользовательского стиля черезclassNameпроп. Это идеальная база для добавления:

  • Пользовательские фоновые цвета или градиентные эффекты.
  • Границы или разделители между разделами.
  • Тонкие визуальные усовершенствования, такие как эффекты размытия или свечения.

2.1.4.4. Строительные повторные шаблоны

typescript
// Пример для pricing-секций
<Wrapper className="bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200">
  <HeaderSection />
  <PricingTable />
  <FooterSection />
</Wrapper>

Введите полноэкранную режим выхода из полноэкранного режима

Когда ваш дизайн требует шаблона с уникальным стилем, но стандартной центрированной структурой контента,Wrapperэто идеальный выбор. Он обеспечивает структурную основу, позволяя вам сосредоточиться на конкретных стилях шаблона.

2.1.4.5. Компонент

// app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx


import React, { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";


interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: React.ReactNode;
}


export function Wrapper({ className, children, ...props }: WrapperProps) {
  return (
    <section
      className={cn("py-10 lg:py-14 bg-background", className)}
      {...props}
    >
      <div className="container mx-auto px-4">{children}</div>
    </section>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5. Page-wrapper-types.ts: контракт с AI-TO-UI-UI

2.1.5.1. Основной контракт: соединение генерации ИИ и рендеринга пользовательского интерфейса

Аpage-wrapper-types.tsФайл устанавливает формальный, строгого типичный контракт между нашим генератором контента ИИ и системой рендеринга пользовательского интерфейса. Этот контракт является фундаментальным для нашей архитектуры, определяя структуру всех возможных компонентов страницы и правила, регулирующие их взаимодействие для обеспечения бесшовной интеграции и предсказуемости.

2.1.5.2. Категории секций и генерация, управляемое искусственным интеллектом

Операционная модель ИИ сосредоточена вокругSectionTypeперевозить Во -первых, ИИ анализирует доступные типы раздела, определенные в этом перечислении. Затем, основываясь на запросе пользователя, он стратегически выбирает, какие разделы собираются для данной страницы. Чтобы облегчить полностью автономную и высококачественную генерацию контента, база знаний ИИ должна быть заполнена комплексными инструкциями и разнообразными примерами для каждого из 25 типов раздела.

typescript
export type SectionType =
  | "hero-section" | "cta-section" | "faq-section"
  | "features-section" | "testimonials-section" | "pricing-section"

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5.3. Оптимизация SEO и метаданные

АPageMetadataИнтерфейс гарантирует, что стандарты, соответствующие генерации метатеток, что имеет решающее значение для поисковой оптимизации (SEO). Метатеги генерируются автоматически черезgenerateMetadata()функция Эта функция получает данные из конфигурации страницы и передает ихconstructMetadata()Утилита, которая, в свою очередь, создает хорошо сформированные заголовки HTML.

typescript
export interface PageMetadata {
  id: string;           // Уникальный идентификатор
  title: string;        // <title> тег для SEO
  description: string;  // <meta description> для сниппетов
  image?: string;       // Open Graph изображение
  slug?: string[];      // URL-структура страницы
  type: SectionType;    // Тип основной секции
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5.4. HeaderContentConfig: управление SEO иерархией

Управление иерархией заголовка имеет решающее значение для SEO на странице.

Примечание осторожности:АHeaderРаздел является необязательным. Это преднамеренный выбор дизайна, потому что некоторые типы разделов могут встроитьH1/H2теги непосредственно в ихbodyContentПолем Хотя это обеспечивает гибкость, он вносит потенциальный риск для согласованности пользовательского интерфейса, которая является основной целью этой архитектуры. Тщательная реализация требуется для поддержания логической и дружественной к SEO структуру документа.

typescript
interface HeaderContentConfig {
  heading: string;
  headingLevel?: 1 | 2;  // H1/H2 для поисковой иерархии
  description?: string;
  showBorder?: boolean;
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5.5. Бодиза: обеспечение максимальной свободы дизайна

typescript
bodyContent?: React.ReactNode;

Введите полноэкранную режим выхода из полноэкранного режима

По дизайну корпус секции предоставляется полная свобода для реализации любого макета или дизайна. Этот архитектурный выбор обеспечивает максимальную творческую гибкость, что позволяет ИИ генерировать богатый и разнообразный контент. Этот подход намеренно контрастирует сHeaderиFooter, которые стандартизированы для поддержания постоянного внешнего вида и ощущения во всем применении.

typescript
interface FooterContentConfig {
  actions?: {
    label: string;
    href: string;
    variant?: "default" | "secondary" | "outline" | "ghost" | "link";
  }[];
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5.6. SoineContentConfig: минималистский подход

Текущая реализация нижнего колонтитула является преднамеренно минималистской. Он поддерживает только дополнительные кнопки вызовов к действию. Никаких дополнительных элементов не включено, принятие решения о определении приоритетов простоты, скорости и однородности на всех генерируемых страницах.

2.1.5.7. Принципы для расширения определений типа

Чтобы представить новыйSectionType, необходимо предпринять следующие шаги:

  1. Обновите знание ИИ:База знаний ИИ должна быть обновлена с помощью комплексных инструкций и примеров для нового типа раздела.
  2. Расширить Enum:Новый тип должен быть добавлен вSectionTypeперевозить
  3. Расширить интерфейсы:Если новый раздел требуют уникальных параметров конфигурации, соответствующий интерфейс конфигурации должен быть расширен.

Этот процесс достигает решающего архитектурного баланса:HeaderиFooterстрого напечатаны для обеспечения соблюдения лучших практик SEO и последовательности пользовательского интерфейса, в то время какBodyпредлагает максимальную гибкость для инновационных, управляемых искусственным интеллектуальным дизайном.

2.1.5.8. Компонент

// app/@right/(_service)/(_types)/page-wrapper-types.ts




export interface MetadataConfig {
  title?: string;
  description?: string;
}


export interface PageMetadata {
  id: string;
  title: string;
  description: string;
  image?: string;
  slug?: string[];
  type: SectionType;
}


export type SectionType =
  | "hero-section"
  | "cta-section"
  | "faq-section"
  | "features-section"
  | "testimonials-section"
  | "pricing-section"
  | "contact-section"
  | "blog-posts-section"
  | "product-grid-section"
  | "image-gallery-section"
  | "text-block-section"
  | "video-section"
  | "team-section"
  | "about-us-section"
  | "newsletter-section"
  | "social-proof-section"
  | "comparison-table-section"
  | "map-section"
  | "custom-html-section"
  | "changelog-section"
  | "comparison-two-column-section"
  | "comparison-three-column-section"
  | "feature-showcase-section";


export interface BaseSection {
  id: string;
  type: SectionType;
  className?: string;
}


export interface HeaderContentConfig {
  announcement?: {
    badgeText?: string;
    descriptionText?: string;
    href?: string;
  };
  heading: string;
  headingLevel?: 1 | 2;
  description?: string;
  showBorder?: boolean;
}


export interface FooterContentConfig {
  actions?: {
    label: string;
    href: string;
    variant?:
      | "default"
      | "secondary"
      | "destructive"
      | "outline"
      | "ghost"
      | "link";
  }[];
}
export interface SectionConfig extends BaseSection {
  type: SectionType;
  headerContent: HeaderContentConfig;
  bodyContent?: React.ReactNode;
  footerContent?: FooterContentConfig;
  videoUrl?: string;
  imageUrl?: string;
  sectionClassName?: string;
  contentWrapperClassName?: string;
  customComponentsAnyTypeData?: any;
}


export type Section = SectionConfig;


export interface PageConfig {
  metadata: PageMetadata;
  sections: Section[];
}


export type SlugType = string[];

Введите полноэкранную режим выхода из полноэкранного режима

2.1.5.9. CustomComponententsAnyTypedata: поддерживающий произвольные компоненты

АcustomComponentsAnyTypeData?: any;поле внутриSectionConfigслужит мощным «люком побега». Он предназначен для передачи неструктурированных данных в разделы, которые используют сложные или уникальные пользовательские компоненты, которые не соответствуют нашим стандартным интерфейсам.

Для поддержания архитектурной целостности тип и структура этих данных должны быть строго определены и задокументированывнутри самого компонентаПолем Этот выбор дизайна обеспечивает необходимую гибкость для интеграции высоко интерактивных, динамичных и расширенных разделов, связанных с пользователем, без ущерба для контракта с основной архитектурой основной страницы.

2.1.6. Общественные страниц-config.ts: Общественная страница и реестр пульсных маршрутов

2.1.6.1. Роль в архитектуре системы

Аpublic-pages-config.tsФайл является сгенерированным AI реестр всех общедоступных страниц в рамках приложения. Эта конфигурация автоматически генерируется нашим ИИ на основе системных инструкций и пользовательских подсказок. На его структуру напрямую влияют доступные компоненты в наших примерах базы знаний и перечисления в рамкахSectionTypeопределения

Полученная конфигурация действует как мост, переводя анализ AIS требований пользователей в структуру, которую наша система рендеринга страницы может интерпретировать и отображать.

2.1.6.2. Когда использовать эту конфигурацию на основе файлов

Этот подход идеально подходит для:

  • Проекты с ограниченным количеством страниц (обычно 10-15).
  • Веб -сайты со статическим контентом, которые требуют нечастых обновлений.
  • Быстрое прототипирование и минимальные жизнеспособные продукты (MVP), что позволяет быстро запустить без настройки базы данных.
  • Целевые страницы с фиксированной, предопределенной структурой.

Когда переходить на базу данных:

Для крупномасштабных производственных приложений подход на основе файлов является практичным только для небольшого набора страниц. Большинство сценариев выиграют от хранения этой информации в базе данных, чтобы обеспечить динамическое управление контентом и масштабируемость.

2.1.6.3. Структура конфигурации

typescript
export const PublicPagesConfig = {
  pages: [
    {
      metadata: {
        id: "public",
        title: "Enterprise-Grade AI Next.js starter",
        description: "Free Open-Source starter kit...",
        slug: ["public", "test"],
        type: "hero-section",
      },
      sections: [
        {
          id: "test-block",
          type: "hero-section",
          headerContent: { /* SEO-заголовки */ },
          bodyContent: {},
          footerContent: { /* Кнопки действий */ },
          videoUrl: "/_static/video/ai-loop.mp4",
          contentWrapperClassName: "text-white",
        } as SectionConfig,
      ],
    },
  ] as PageConfig[],
};

Введите полноэкранную режим выхода из полноэкранного режима

2.1.6.4. Принцип категоризации конфигурации

Ключевое архитектурное решение:Размещение файла конфигурации вpublic/(_service)/(_config)/Справочник означает свою роль в управлении общественными страницами.

Масштабирование по категории:

Наша архитектура поддерживает масштабирование путем классификации конфигураций, обеспечивая чистую и организованную структуру:

  • public-pages-config.ts- Для общественных страниц (например, посадка, о контакте).
  • docs-pages-config.ts- Для сайтов документации с расширенной навигацией.
  • admin-pages-config.ts- Для административных панелей.
  • blog-pages-config.ts- Для постов в блоге и статьях.

Каждая категория предназначена для того, чтобы иметь свою собственную:

  • Выделенный файл конфигурации.
  • Специализированные типы разделов.
  • Уникальная логика рендеринга.

2.1.6.5. Взаимодействие с системой генерации ИИ

Для нашей системы ИИ этот файл конфигурации служит:

  • Структурный шаблон:Определение какPageConfigОбъекты должны быть сформированы.
  • Пример данных:Предоставление эталонных значений для процесса генерации.
  • Схема проверки типа:Принудительно применяется TypeScript для безопасности строгого типа.

Рабочий процесс выглядит следующим образом:

  1. ИИ анализирует существующий файл конфигурации.
  2. Он генерирует новыйPageConfigобъект на основе подсказки пользователя.
  3. Затем разработчик добавляет новую конфигурацию вpagesмножество.
  4. Система автоматически распознает и регистрирует новые маршруты.

2.1.6.6. Преимущества и ограничения

Преимущества подхода на основе файлов:

  • Управление версией:Легко управляется и версируется через GIT.
  • Безопасность типа:Преимущества безопасности типа компиляции с помощью TypeScript.
  • Нулевая задержка:Никакие запросы базы данных приводят к более быстрой загрузке страниц.
  • Упрощенное развертывание:Работает без проблем со статическим генерацией сайта (SSG).

Ограничения:

  • Нет динамических обновлений:Не хватает динамических возможностей управления контентом.
  • Требуется перераспределение:Любое изменение требует новой сборки и развертывания.
  • Не для UGC:Не подходит для пользовательского контента.
  • Проблемы масштабируемости:Становится трудно управлять за пределами 20-30 страниц.

2.1.6.7. Компонент

// @/app/@right/public/(_servise)/(_config)/public-pages-config.ts


import {
  PageConfig,
  SectionConfig,
} from "@/app/@right/(_service)/(_types)/page-wrapper-types";


export const PublicPagesConfig = {
  pages: [
    {
      metadata: {
        id: "public",
        title: "Enterprise-Grade AI Next.js starter",
        description: "Free Open-Source starter kit...",
        slug: ["public", "test"],
        type: "hero-section",
      },
      sections: [
        {
          id: "test-block",
          type: "hero-section",
          headerContent: {
            announcement: {
              badgeText: "Thanks",
              descriptionText: "AI-SDK V5 & Vercel AI",
              href: "https://github.com/aifa-agi/aifa",
            },
            heading: "Enterprise-Grade AI Next.js starter",
            description:
              "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.",
            showBorder: false,
            headingLevel: 1,
          },
          bodyContent: {},
          footerContent: {
            actions: [
              {
                label: "Get Started",
                href: "/https://github.com/aifa-agi/aifa",
                variant: "default",
              },
              { label: "Browse Docs", href: "/docs", variant: "ghost" },
            ],
          },
          videoUrl: "/_static/video/ai-loop.mp4",
          contentWrapperClassName: "text-white",
        } as SectionConfig,
      ],
    },
  ] as PageConfig[],
};

Введите полноэкранную режим выхода из полноэкранного режима

2.1.6.8. Заключение

public-pages-config.tsявляется практическим решением для малых и средних проектов, предлагающих баланс между простотой управления и функциональностью. Для более масштабных приложений он служит отличной отправной точкой, прежде чем переходить на более надежную архитектуру, управляемую базой данных.

2.1.7. utils.ts: функции утилиты конфигурации

Этот модуль предоставляет функции утилиты для управления конфигурациями страницы. Он включает две основные функции:getAllPublicPages(), который фильтрует все страницы с «публичным» префиксом для статического поколения, иgetPageBySlug(), который находит определенную страницу с точным, чувствительным к случаям, совпадением ее массива Slug.

// @app/@right/public/(_servise)/(_libs)/utils.ts


import {
  PageConfig,
  SlugType,
} from "@/app/@right/(_service)/(_types)/page-wrapper-types";
import { PublicPagesConfig } from "../(_config)/public-pages-config";


export function getAllPublicPages(): PageConfig[] {
  return PublicPagesConfig.pages.filter(
    (page: PageConfig) => page.metadata.slug?.[0] === "public"
  );
}


export function getPageBySlug(slug: SlugType): PageConfig | undefined {
  return PublicPagesConfig.pages.find(
    (page: PageConfig) =>
      JSON.stringify(
        page.metadata.slug?.map((s: string) => s.toLowerCase())
      ) === JSON.stringify(slug.map((s: string) => s.toLowerCase()))
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.8. Заголовок.

Этот стандартизированный компонент служит универсальным заголовком для всех типов разделов, обеспечивая согласованность по всему приложению. Он предлагает дополнительные элементы, такие как объявление, заголовок H1/H2 и описание. Этот компонент играет решающую роль в оптимизации SEO и поддержании визуальной консистенции для страниц, сгенерированных AI.

// @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx


import React from "react";
import { cn } from "@/lib/utils";
import {
  PageHeaderDescription,
  PageHeaderHeading,
} from "./page-header-elements";


import { Announcement } from "./announcement";
import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types";


export type HeaderSectionProps = {
  headerContent: HeaderContentConfig;
} & React.HTMLAttributes<HTMLDivElement>;


export function HeaderSection({
  headerContent,
  className,
  ...props
}: HeaderSectionProps) {
  if (!headerContent) return null;


  const {
    announcement,
    heading,
    headingLevel = 1,
    description,
    showBorder = false,
  } = headerContent;


  return (
    <section
      className={cn(
        showBorder && "border-t-4 border-b-4 border-primary",
        className
      )}
      {...props}
    >
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center gap-1 py-8 md:py-10 lg:py-12">
          {announcement && (
            <Announcement
              badgeText={announcement.badgeText}
              descriptionText={announcement.descriptionText}
              href={announcement.href}
            />
          )}
          <PageHeaderHeading level={headingLevel}>{heading}</PageHeaderHeading>
          {description && (
            <PageHeaderDescription>{description}</PageHeaderDescription>
          )}
        </div>
      </div>
    </section>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.9. Заголовок.

В этом разделе подробно описываются атомные компоненты, используемые для строительства заголовков:PageHeaderHeading(Поддержка H1/H2),PageHeaderDescriptionДля подзаголовков иPageActionsдля размещения кнопок. Эти компоненты используютcreateElementДля динамической генерации HTML -тегов обеспечивает правильную иерархию SEO.

// @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx


import { HTMLAttributes, createElement } from "react";
import { cn } from "@/lib/utils";


type HeadingTag = "h1" | "h2";


interface PageHeaderHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2;
}


function PageHeaderHeading({
  className,
  level = 1,
  ...props
}: PageHeaderHeadingProps) {

  const Heading: HeadingTag = level === 1 ? "h1" : "h2";
  const h1Classes = "text-2xl sm:text-3xl  md:text-6xl lg:text-7xl";
  const h2Classes = "text-lg sm:text-xl  md:text-3xl lg:text-4xl";



  return createElement(Heading, {
    className: cn(
      "text-center font-bold leading-tight tracking-tighter font-serif",
      level === 1 ? h1Classes : h2Classes,
      className
    ),
    ...props,
  });
}


function PageHeaderDescription({
  className,
  ...props
}: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p
      className={cn(
        "max-w-2xl text-balance text-center text-base font-light text-muted-foreground sm:text-lg",
        className
      )}
      {...props}
    />
  );
}


function PageActions({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex w-full items-center justify-center gap-2 pt-2",
        className
      )}
      {...props}
    />
  );
}



export { PageActions, PageHeaderDescription, PageHeaderHeading };

Введите полноэкранную режим выхода из полноэкранного режима

2.1.10. Объявление.tsx: компонент объявления

Этот интерактивный компонент значка предназначен для объявлений и уведомлений. Он поддерживает навигацию, управление клавиатурой и условное рендеринг, автоматически скрываясь, когда контента не присутствует. Он используется для привлечения внимания к важным обновлениям или ссылкам.

// @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx


"use client";


import { useRouter } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";


interface AnnouncementProps {
  badgeText?: string; 
  descriptionText?: string; 
  href?: string; 
  className?: string;
}


export function Announcement({
  badgeText,
  descriptionText,
  href,
  className,
}: AnnouncementProps) {
  const router = useRouter();


  const handleOnClick = () => {
    if (href) {
      router.push(href);
    }
  };


  // Если нет текста для бейджа, описания или ссылки, возвращаем null
  if (!badgeText && !descriptionText && !href) {
    return null;
  }


  return (
    <div
      className={cn(
        "flex cursor-pointer items-center gap-2 rounded-full border border-primary bg-muted px-3 py-1 text-sm transition-colors hover:bg-muted/80",
        className
      )}
      onClick={handleOnClick}
      role="link"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          handleOnClick();
        }
      }}
    >
      {badgeText && (
        <Badge variant="secondary" className="text-xs">
          {badgeText}
        </Badge>
      )}
      {descriptionText && (
        <span className="text-muted-foreground">{descriptionText}</span>
      )}
      {href && <ArrowRight className=" h-3 w-3 text-muted-foreground" />}
    </div>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

Этот стандартизированный компонент нижнего колонтитула включает кнопки действий. Он поддерживает несколько кнопок с различными вариантами стиля, обеспечивая однородность элементов Call-Action (CTA) во всех разделах. Он автоматически скрывается, когда действия не определены.

// @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx


"use client";


import { useRouter } from "next/navigation";
import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { PageActions } from "../header-sections-components/page-header-elements";


interface FooterAction {
  label: string;
  href: string;
  variant?:
    | "default"
    | "secondary"
    | "destructive"
    | "outline"
    | "ghost"
    | "link";
}


interface FooterSectionProps extends HTMLAttributes<HTMLDivElement> {
  actions?: FooterAction[];
}


export function FooterSection({
  actions,
  className,
  ...props
}: FooterSectionProps) {
  const router = useRouter();


  if (!actions || actions.length === 0) {
    return null;
  }


  return (
    <section className={cn("py-4 md:py-6 lg:py-8", className)} {...props}>
      <div className="container mx-auto px-4">
        <PageActions>
          {actions.map((action) => (
            <Button
              key={action.href} // href должен быть уникальным!
              size="sm"
              variant={action.variant || "default"}
              onClick={() => router.push(action.href)}
            >
              {action.label}
            </Button>
          ))}
        </PageActions>
      </div>
    </section>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.12. Body-section.tsx: произвольный контейнер содержимого

2.1.12.1. Цель и философия

BodySectionслужит очень гибким контейнером для основного контента в разделах. В отличие от строго стандартизированных компонентов заголовка и нижнего колонтитула,BodySectionОбеспечивает полную свободу для размещения любого контента React.

2.1.12.2. Принципы генерации контента

Важно:Содержание дляbodyContentдолжен генерироваться как простые TSX без использования.map()Элементы, где все элементы представлены в расширенном формате.

typescript
// ✅ 
bodyContent: (
  <>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="feature-card">
        <h3>Feature 1</h3>
        <p>Description 1</p>
      </div>
      <div className="feature-card">
        <h3>Feature 2</h3>
        <p>Description 2</p>
      </div>
      <div className="feature-card">
        <h3>Feature 3</h3>
        <p>Description 3</p>
      </div>
    </div>
  </>
)

Введите полноэкранную режим выхода из полноэкранного режима

// ❌ 
bodyContent: (
  <div className="grid">
    {features.map(feature => <FeatureCard key={feature.id} {...feature} />)}
  </div>
)

Введите полноэкранную режим выхода из полноэкранного режима

2.1.12.3. Когда использовать пользовательские компоненты

Если раздел требует сложной логики (состояние, эффекты, интерактивность), создайте независимый компонент и добавьте ее вPageHtmlTransformerкак отдельная сущность.

typescript
// @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx
export function BodySection({ children, className, ...props }: BodySectionProps) {
  const hasChildren = children !== null && children !== undefined && 
    !(Array.isArray(children) && children.length === 0) &&
    !(typeof children === "string" && children === "");

  if (!hasChildren) return null;

  return (
    <div className={cn(className)} {...props}>
      {children}
    </div>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.12.4. Компонент

// @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx


import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";
import { SectionType } from "../../../(_types)/page-wrapper-types";


interface BodySectionProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode | null;
  type: SectionType;
}



export function BodySection({
  children,
  className,
  ...props
}: BodySectionProps) {
  const defaultHeightRem = 0;
  const hasChildren =
    children !== null &&
    children !== undefined &&
    // Covers case when children = [] or ""
    !(Array.isArray(children) && children.length === 0) &&
    !(typeof children === "string" && children === "");


  if (!hasChildren && defaultHeightRem) {
    return (
      <div
        className={cn(className)}
        style={{ height: `${defaultHeightRem}rem` }}
        {...props}
      >
        {/* Empty section with default height */}
      </div>
    );
  }


  if (!hasChildren) {
    return null;
  }


  return (
    <div className={cn(className)} {...props}>
      {children}
    </div>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

2.1.12.5. Заключение

BodySectionВыступает в качестве моста между стандартизированной архитектурой системы и творческой свободой генерации ИИ, что составляет баланс между контролем и гибкостью.

2.2. Усовершенствованные пользовательские компоненты

Расширенные пользовательские компоненты разработаны для обеспечения сложных интерактивных функций, которые выходят за рамки возможностей наших стандартных архитектурных моделей. Эти компоненты зарезервированы для сценариев, требующих управления государством, сложных анимаций, обработки данных в реальном времени или уникальной бизнес-логики.

Когда использовать пользовательские компоненты:

  • Интерактивные элементы: Формы с проверкой, калькуляторами, конфигураторами продукта.
  • Анимированные презентации: Сложные переходы, эффекты параллакса, автоматические ползунки.
  • Функциональность в реальном времени: Чаты, уведомления, живые каналы данных.
  • Адаптивная логика: Компоненты с принципиально различным поведением на рабочем столе и мобильном телефоне.
  • Уникальные шаблоны пользовательского интерфейса: Нестандартные элементы интерфейса, специфичные для проекта.

Архитектурная интеграция:

Пользовательские компоненты интегрированы вPageHtmlTransformerкак отличаетсяcaseзаявления в пределахswitchблокировать. Этот подход позволяет им получить доступ к общему контексту, таким как информация о темах и устройствах, сохраняя при этом постоянный вид и ощущение с помощью общих классов CSS и токенов дизайна. Хотя они придерживаются визуального языка системы, они сохраняют полную свободу в своей внутренней логике и реализации. Эта стратегия обеспечивает баланс между стандартизацией большинства контента и разрешением творческой свободы в реализации сложных интерактивных элементов.

2.2.1. Рекомендации по реализации пользовательских компонентов

2.2.1.1. Политика обертки

Нет внешних оберток: Пользовательские компоненты должны быть возвращены непосредственно без прикрытия вWrapperилиFullScreenWrapperПолем Они несут ответственность за управление собственным макетом, заполнением и наслоением, чтобы обеспечить полный контроль над их презентацией.

2.2.1.2. Компонентный типинг

Локальные интерфейсы: Интерфейсы опоры для пользовательского компонента должны быть объявлены в верхней части самого файла компонента. Все данные передаются из конфигурации страницы в компонент черезcustomComponentsAnyTypeDataПоле в разделе конфигурация.

2.2.1.3. ПродлениеSectionType

Добавить новый тип раздела: Каждый пользовательский компонент требует добавления уникального типа вSectionTypeenum inpage-wrapper-types.tsПолем Это обеспечивает правильную проверку типов и позволяетswitchЗаявление в трансформаторе, чтобы правильно идентифицировать и отображать компонент.

typescript
// @/app/@right/(_service)/(_types)/page-wrapper-types.ts
// ...
export type SectionType ="hero-section" | “new-custom-section”;

Введите полноэкранную режим выхода из полноэкранного режима

2.2.1.4. Обновление случаев в AgeHtmltransformer

Пользовательская обработка корпуса Новый случай добавляется в PageHtmltransformer для обработки пользовательского типа раздела с прямым

// В PageHtmlTransformer:
case "new-custom-section":
  return (
    <NewCustomSection
      key={config.id}
      customData={section.customComponentsAnyTypeData.customData}
    />
  );

Введите полноэкранную режим выхода из полноэкранного режима

2.2.1.5. Пользовательская структура конфигурации

Структура конфигурации: Ниже приведен пример конфигурации страницы, которая включает в себя пользовательский раздел. Все данные, специфичные для компонентовcustomComponentsAnyTypeDataобъект, который может иметь любую структуру, требуемую компонентом.

export const PublicPagesConfig = {
    pages: [
{
      metadata: {
        id: "CIUD",
        title: "1",
        description: "2",
        slug: ["public", "name"],
        type: "new-custom-section",
      },
      sections: [
        {
          id: "new-custom-section",
          type: "new-custom-section",
          customComponentsAnyTypeData: {
            metaData: {
              metaTitle: "1",
              metaDescription: "2",
            },
            customData: {
              mediaUrl: "/_static/illustrations/3.png",
              title: "4",
              description:
                "5",
            },
          },
        } as SectionConfig,
      ],
    },


             ] as PageConfig[],

Введите полноэкранную режим выхода из полноэкранного режима

2.2.2. Пример пользовательского компонента

2.2.2.1.DoublePresentation

2.2.2.1.1. Обновите виды основных типов

Во -первых, добавьте новый тип раздела вSectionTypeперевозить

typescript
// @/app/@right/(_service)/(_types)/page-wrapper-types.ts


export type SectionType =
  | "hero-section"
  | "cta-section"
  | "double-presentation-section"

Введите полноэкранную режим выхода из полноэкранного режима

2.2.2.1.2. Добавить новый корпус вPageHtmlTransformer

Далее добавьте соответствующийcaseвPageHtmlTransformerЧтобы отобразить компонент.

case "double-presentation-section":
            return (
              <DoublePresentation
                key={section.id}
                metaData={section.customComponentsAnyTypeData.metaData}
                leftItem={section.customComponentsAnyTypeData.leftItem}
                rightItem={section.customComponentsAnyTypeData.rightItem}
              />
            );

Введите полноэкранную режим выхода из полноэкранного режима

2.2.2.1.4. Пример конфигурации

Вот пример того, как настроитьDoublePresentationкомпонент вpublic-pages-config.tsПолем

// app/@right/(_service)/(_types)/page-wrapper-types.ts


export interface MetadataConfig {
  title?: string;
  description?: string;
}


export type CuidString = string;


export interface PageMetadata {
  id: CuidString;
  title: string;
  description: string;
  image?: string;
  slug?: string[];
  type: SectionType;
}


export type SectionType =
  | "hero-section"
  | "cta-section"
  | "faq-section"
  | "features-section"
  | "testimonials-section"
  | "pricing-section"
  | "contact-section"
  | "blog-posts-section"
  | "product-grid-section"
  | "image-gallery-section"
  | "text-block-section"
  | "video-section"
  | "team-section"
  | "about-us-section"
  | "newsletter-section"
  | "social-proof-section"
  | "comparison-table-section"
  | "map-section"
  | "custom-html-section"
  | "changelog-section"
  | "comparison-two-column-section"
  | "comparison-three-column-section"
  | "feature-showcase-section"
  | "double-presentation-section";


export interface BaseSection {
  id: string;
  type: SectionType;
  className?: string;
}


export interface HeaderContentConfig {
  announcement?: {
    badgeText?: string;
    descriptionText?: string;
    href?: string;
  };
  heading: string;
  headingLevel?: 1 | 2;
  description?: string;
  showBorder?: boolean;
}


export interface FooterContentConfig {
  actions?: {
    label: string;
    href: string;
    variant?:
      | "default"
      | "secondary"
      | "destructive"
      | "outline"
      | "ghost"
      | "link";
  }[];
}
export interface SectionConfig extends BaseSection {
  type: SectionType;
  headerContent: HeaderContentConfig;
  bodyContent?: React.ReactNode;
  footerContent?: FooterContentConfig;
  videoUrl?: string;
  imageUrl?: string;
  sectionClassName?: string;
  contentWrapperClassName?: string;
  customComponentsAnyTypeData?: any;
}


export type Section = SectionConfig;


export interface PageConfig {
  metadata: PageMetadata;
  sections: Section[];
}


export type SlugType = string[];

Введите полноэкранную режим выхода из полноэкранного режима

2.2.2.1.5. Компонент

Полный код дляDoublePresentationкомпонент.

// @/app/@right/public/(_servise)/(_config)/public-pages-config.ts


import {
  PageConfig,
  SectionConfig,
} from "@/app/@right/(_service)/(_types)/page-wrapper-types";


export const PublicPagesConfig = {
  pages: [
    {
      metadata: {
        id: "public",
        title: "Enterprise-Grade AI Next.js starter",
        description: "Free Open-Source starter kit...",
        slug: ["public", "test"],
        type: "hero-section",
      },
      sections: [
        {
          id: "test-block",
          type: "hero-section",
          headerContent: {
            announcement: {
              badgeText: "Thanks",
              descriptionText: "AI-SDK V5 & Vercel AI",
              href: "https://github.com/aifa-agi/aifa",
            },
            heading: "Enterprise-Grade AI Next.js starter",
            description:
              "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.",
            showBorder: false,
            headingLevel: 1,
          },
          bodyContent: {},
          footerContent: {
            actions: [
              {
                label: "Get Started",
                href: "/https://github.com/aifa-agi/aifa",
                variant: "default",
              },
              { label: "Browse Docs", href: "/docs", variant: "ghost" },
            ],
          },
          videoUrl: "/_static/video/ai-loop.mp4",
          contentWrapperClassName: "text-white",
        } as SectionConfig,
      ],
    },
    {
      metadata: {
        id: "interactive-ai",
        title: "Interactive AI Demo",
        description: "Demo: DoublePresentation custom case",
        slug: ["public", "example"],
        type: "double-presentation-section",
      },


      sections: [
        {
          id: "double-presentation-demo",
          type: "double-presentation-section",
          customComponentsAnyTypeData: {
            metaData: {
              metaTitle: "Interactive AI: Where Conversation Builds the UI",
              metaDescription: "Discover what makes AIFA revolutionary...",
            },
            leftItem: {
              mediaUrl: "/_static/illustrations/ai-chat.png",
              title: "Ai Artifacts Chatbot",
              description:
                "As the AI chatbot speaks, it highlights elements...",
            },
            rightItem: {
              mediaUrl: "/_static/illustrations/ai-web.png",
              title: "Related Pages",
              description:
                "Click any UI element, and the AI provides instant context...",
            },
          },
        } as SectionConfig,
      ],
    },
  ] as PageConfig[],
};

Введите полноэкранную режим выхода из полноэкранного режима

2.2.2.1.3.page-wrapper-types.ts

Вот полныйpage-wrapper-types.tsФайл с новым типом.

// @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx


"use client";


import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import { cn } from "@/lib/utils";
import { useMediaQuery } from "@/hooks/use-media-query";


interface PresentationMeta {
  metaTitle: string;
  metaDescription: string;
}


interface PresentationItem {
  mediaUrl: string;
  title: string;
  description: string;
}


interface DoublePresentationProps {
  metaData: PresentationMeta;
  leftItem: PresentationItem;
  rightItem: PresentationItem;
}


export default function DoublePresentation({
  metaData,
  leftItem,
  rightItem,
}: DoublePresentationProps) {
  const { isMobile } = useMediaQuery();


  // Desktop animation state
  const [activeContainer, setActiveContainer] = useState<"left" | "right">(
    "left"
  );
  const [sliderKey, setSliderKey] = useState(0);


  // Desktop auto-switching effect
  useEffect(() => {
    // Only run animation cycle on desktop
    if (isMobile) return;


    let sliderTimer: NodeJS.Timeout;
    let transitionTimer: NodeJS.Timeout;


    const startAnimationCycle = () => {
      setSliderKey((prev) => prev + 1);
      sliderTimer = setTimeout(() => {
        setActiveContainer((prev) => (prev === "left" ? "right" : "left"));
        transitionTimer = setTimeout(() => {
          startAnimationCycle();
        }, 500);
      }, 9000);
    };


    startAnimationCycle();


    return () => {
      clearTimeout(sliderTimer);
      clearTimeout(transitionTimer);
    };
  }, [isMobile]);


  // Return null while determining screen size
  if (isMobile === null) {
    return null;
  }


  // Common CSS classes
  const metaBlockClass = "text-center max-w-3xl flex flex-col items-center";
  const descriptionClass =
    "mb-12 max-w-xl text-base text-muted-foreground text-center";
  const desktopTitleClass =
    "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl";
  const desktopDescriptionClass =
    "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center";


  // Mobile card renderer
  const renderMobileCard = (item: PresentationItem) => (
    <div className="relative flex flex-col rounded-xl bg-gray-900 text-white shadow-lg mb-6 overflow-hidden">
      <div className="w-full relative" style={{ paddingTop: "56.25%" }}>
        <Image
          src={item.mediaUrl}
          alt={item.title}
          fill
          className="object-cover rounded-t-xl"
          sizes="100vw"
          priority
        />
      </div>
      <div className="flex flex-col p-4">
        <h2 className="text-xl font-bold mb-2">{item.title}</h2>
        <p className="text-gray-300 mb-2 text-base min-h-16">
          {item.description}
        </p>
      </div>
    </div>
  );


  // Desktop card renderer
  const renderDesktopCard = (item: PresentationItem, isActive: boolean) => (
    <motion.div
      layout
      animate={{ flex: isActive ? "7 1 0%" : "3 1 0%" }}
      transition={{ duration: 0.5 }}
      className="relative flex flex-col rounded-lg overflow-hidden bg-transparent text-white p-0 shadow-lg h-[30rem] flex-shrink-0"
    >
      <div className="relative w-full h-60 mb-4 rounded-xl overflow-hidden border-4 border-gray-700">
        <Image
          src={item.mediaUrl}
          alt={item.title}
          fill
          className="object-cover"
          priority
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <div className="flex flex-col pt-6">
        <h2 className="text-2xl font-bold mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
          {item.title}
        </h2>
        <div className="relative w-full h-px bg-gray-700 mb-4">
          <motion.div
            key={`slider-${item.title}-${sliderKey}`}
            className={cn(
              "absolute top-0 left-0 h-full",
              isActive ? "bg-primary" : "bg-gray-700"
            )}
            initial={{ width: 0 }}
            animate={{ width: isActive ? "100%" : "0%" }}
            transition={
              isActive ? { duration: 9, ease: "linear" } : { duration: 0 }
            }
          />
        </div>
        <p className="text-gray-300 mb-4 text-sm line-clamp-4 min-h-[4rem]">
          {item.description}
        </p>
      </div>
    </motion.div>
  );


  // Mobile layout
  if (isMobile) {
    return (
      <section className="w-full pt-20">
        <div className="container mx-auto px-4 flex flex-col items-center">
          <div className={metaBlockClass}>
            <h2 className="text-xl font-bold mb-4">{metaData.metaTitle}</h2>
            <p className={descriptionClass}>{metaData.metaDescription}</p>
          </div>


          <div className="w-full flex flex-col">
            {renderMobileCard(leftItem)}
            {renderMobileCard(rightItem)}
          </div>
        </div>
      </section>
    );
  }


  // Desktop layout
  return (
    <section className="w-full pt-28">
      <div className="container mx-auto px-4 flex flex-col items-center gap-12">
        <div className={metaBlockClass}>
          <h2 className={desktopTitleClass}>{metaData.metaTitle}</h2>
          <p className={desktopDescriptionClass}>{metaData.metaDescription}</p>
        </div>


        <div className="flex gap-6 w-full max-w-6xl">
          {renderDesktopCard(leftItem, activeContainer === "left")}
          {renderDesktopCard(rightItem, activeContainer === "right")}
        </div>
      </div>
    </section>
  );
}

Введите полноэкранную режим выхода из полноэкранного режима

Вывод: как получить максимальную отдачу от этой документации

Мы понимаем, что представленные здесь инструкции и компоненты могут показаться обширными для одного поста. Вы можете даже почувствовать, что это не самое интересное чтение, и вы будете правы. Это не развлечение; Это подробное техническое руководство, предназначенное для того, чтобы дать вам полный контроль над мощной системой.

Чтобы преобразовать изучение этой сложной системы в интерактивный и продуктивный процесс, мы рекомендуем следующий подход.

Используйте ИИ для ускоренного обучения

Вместо пассивного чтения используйте эту документацию в качестве «мозга» для вашего помощника искусственного интеллекта.

Ваш план действий:

  1. Скопировать весь контентэтой статьи, от введения в этот раздел.
  2. Используйте его как системную подсказкудля Chatgpt. Это предоставит ИИ полный контекст архитектуры, который мы обсуждаем.
  3. Задайте вопросы о исходном коде.Теперь вы можете провести диалог с ИИ, который «понимает» наши правила и соглашения. Например:
    • «На основе предоставленной документации объясните, как создать новый пользовательский компонент для отображения отчетов клиентов».
    • "Покажите мне пример конфигурации для страницы, которая использует обаDoublePresentationиHeroSection. "

Этот метод поможет вам понять принципы приложения намного быстрее. Вы можете найти полный исходный код для этого проекта на нашемРепозиторий GitHubПолем

Что дальше?

В этой статье мы построили одну из двух критических частей нашей системы генерации сайтов:инструмент, который трансформируетConfigЗадайте в готовые к использованию компоненты React. Это прокладывает путь для автоматического создания страниц, где ИИ может генерировать конфигурацию, и нашTransformerпревращает его в красивый интерфейс.

Чтобы увидеть наш проект в действии, посетите живую демонстрацию вaifa.devПолем

Взгляд на будущие посты:

  • Часть 2: Магия отметки.Следующая статья будет посвящена второй ключевой технологии: генерирование страниц (документация, учебные пособия, страницы продукта) из файлов Markdown.
  • Часть 3: от конфигурации до пользовательского интерфейса.Мы пересмотрим тему этой статьи и глубже погрузимся в то, как преобразуется конфигурация, сгенерированная CHATGPT в компоненты React и как этот процесс может быть расширен.

В следующем уроке мы начнем с ответа на ключевой вопрос:Почему Markdown была выбрана для управления контентом?Следите за обновлениями!

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE