Верстка по готовому дизайну из Figma

Необходимо сверстать страницы сайта на основе предоставленного дизайна в Figma. Верстка должна быть выполнена с использованием Tailwind CSS. Все стили должны задаваться через утилитарные классы Tailwind без написания кастомных CSS-файлов (кроме случаев, когда это строго необходимо).
Требования к выполнению:
1. Полное соответствие макету Figma
- Структура блоков, отступы, типографика, размеры элементов.
- Соблюдение сетки и композиции согласно макету.
2. Адаптивная верстка
- Обязательные брейкпоинты: mobile, tablet, desktop.
- Сохранение логики отображения, указанной в дизайне.
3. Tailwind CSS
- Использовать утилитарные классы Tailwind для всех стилей.
- Не использовать внешние CSS-файлы, кроме кастомизаций в tailwind.config.js, если потребуется.
- Компоненты должны быть чистыми и легко читаемыми.
4. Качество кода
- Чистая, семантическая HTML-структура.
- Аккуратное расположение классов (группировка по смыслу).
- Переиспользование повторяющихся элементов (компонентов).
5. Интерактивные элементы
- Реализовать указанные в дизайне ховеры, состояния кнопок, выпадающие списки и т.д.
- Анимации в Figma адаптировать средствами CSS/Tailwind (или через простые утилиты).
Результат:
- Готовая адаптивная верстка всех страниц.
- Код в репозитории (Git), при необходимости - покомпонентная структура.