Как заменить первый экран сайта, не переделывая всю страницу

1. Найдите границы первого экрана

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

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

Результат этого шага — понятная граница изменения: один компонент или фрагмент страницы, список затрагиваемых файлов и поведение, которое должно остаться.

2. Подберите замену под содержание

В примере используем hero-015. Он подходит для короткого обещания, поясняющего абзаца и одного перехода к работам или контактам. Большой текст и курсив задают характер, поэтому здесь не нужна дополнительная картинка ради заполнения пространства.

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

Заранее подготовьте заголовок, короткое пояснение и назначение ссылки. Для hero-015 не нужны выдуманные показатели: prop index можно передать пустым массивом и убрать нижнюю строку с фактами.

3. Замените секцию, не добавляйте вторую

На странице блока скопируйте свежую инструкцию для ИИ. Если устанавливаете компонент впервые, порядок действий есть в базовом гайде. Затем дайте агенту узкую задачу на замену существующего hero.

Замени только текущий первый экран главной на hero-015:
<свежая ссылка из «Копировать для ИИ»>

Сначала найди границы старой секции и перечисли связанные якоря, обработчики и события аналитики. Установи компонент из registry с зависимостями. Замени старый hero, не добавляй второй поверх него. Не меняй шапку, остальные секции, маршруты и общую конфигурацию проекта.

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

hero-015 использует компонент-ссылку button-077. Не подменяйте ссылку кнопкой с router.push только ради внешнего вида: это меняет поведение открытия вкладки и копирования адреса. Проверьте фактические файлы и импорты после установки.

4. Передайте свои данные через props

У hero-015 свои имена props: studio, title, titleAccent, lede, link и index. Ниже пример для страницы, на которой уже существует секция с id=work. Подставьте собственные тексты, а адрес ссылки проверьте в своём проекте.

import { Hero015 } from "@/components/vibeui/hero-015"

<Hero015
  studio="Название вашей студии"
  title="Проектируем сайты,"
  titleAccent="которыми удобно пользоваться"
  lede="Помогаем небольшим командам превратить продуктовую идею в понятный интерфейс."
  link={{ label: "Посмотреть работы", href: "#work" }}
  index={[]}
/>

Не меняйте размер шрифта сразу после первого переноса. Сначала оцените длину своего заголовка: более длинная фраза закономерно займёт больше строк. Если композиция перестала работать, попробуйте сократить текст, а затем решайте, нужен ли другой тип первого экрана.

5. Проверьте новую секцию и её соседей

• На странице остался один основной h1, а старый hero больше не занимает место в разметке.
• Шапка и следующая секция сохранили прежние функции; между ними нет неожиданной пустоты или двойных отступов.
• Главная ссылка ведёт к существующей секции; если раньше было событие аналитики, оно сохранено и проверено.
• На телефоне виден полный заголовок, ссылку удобно нажать, горизонтальной прокрутки нет.
• Проверены светлая и тёмная темы, если сайт поддерживает обе. В вашем окружении serif-шрифт может отличаться от кадра каталога — сравните реально используемую гарнитуру.

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