AndrewTaras/profpak-landing

Рефакторинг HTML-компонента

Когда применять

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

Процесс

1. Получи текущий HTML компонента.
2. Получи список улучшений от пользователя. Если список не указан — работай по приоритетам ниже.
3. Сохраняй существующую структуру — не переписывай с нуля.
4. Верни обновлённый HTML + необходимый CSS/JS (если нужен).

Приоритеты улучшений (по важности)

1. Типографика

• Заголовки: font-heading font-black tracking-tight, размеры text-4xl md:text-6xl
• Текст: leading-relaxed text-slate-600
• Не допускай «висячих» строк — используй text-balance где нужно
• Проверь контраст: тёмный текст на светлом, светлый на тёмном

2. Микроанимации

• Появление при скролле: класс section-reveal (уже есть в шаблоне)
• Hover на карточках: hover:-translate-y-1 hover:shadow-xl transition-all
• Hover на кнопках: hover:-translate-y-0.5 transition
• Иконки в hover: group-hover:scale-110 transition-transform

3. Адаптивность

• Проверка на 360px: нет горизонтального скролла, все элементы влезают
• Проверка на 768px: сетки перестраиваются в 2 колонки
• Проверка на 1440px: контент не растягивается больше max-w-7xl
• Если нужно — используй clamp() для размеров шрифта

4. Доступность (a11y)

• Семантические теги вместо <div>
• aria-label на иконочных кнопках
• Фокус-стили: focus:ring-2 focus:ring-industrial-orange focus:outline-none
• alt на всех изображениях, aria-hidden="true" на декоративных иконках

5. Производительность

• Убрать неиспользуемые классы Tailwind
• Убедиться, что все изображения с loading="lazy"
• Добавить width и height к изображениям (предотвращает CLS)
• Не дублировать CSS — использовать Tailwind-утилиты

Формат ответа

Верни в таком порядке:

1. Блок HTML — обновлённый код компонента (в ```html-обёртке, чтобы было удобно копировать)
2. Список изменений — краткий, 3–5 пунктов, что именно улучшено
3. Дополнительный CSS/JS — если добавлен, отдельным блоком с пометкой куда его положить

Пример вызова

Пользователь:

Улучши компонент Hero: типографика мощнее, анимация появления буллетов, адаптив на 360px. Вот код: [HTML]

Ты:

<section>...обновлённый код...</section>

Изменения:

• Заголовок: усилил до text-5xl md:text-7xl font-black tracking-tight
• Добавил section-reveal на буллеты с задержкой через style="animation-delay: Xms"
• Переработал сетку буллетов на grid-cols-1 sm:grid-cols-2 md:grid-cols-4
• Проверил на 360px — скролла нет
• Добавил aria-label на CTA-кнопки

Дополнительный CSS (в src/styles/custom.css):

.hero-bullet { animation: reveal .8s ease-out both; }