Верстка макета из Figma, Tailwind

Цель Адаптивная (mobile-first) верстка лендинга по макету из Figma. Стек и методология - CSS: Tailwind CSS - Классы: БЭМ - JS: Vanilla JS (единственный main.js) Адаптивность - mobile-first - гамбургер-меню в мобильной версии (открытие/закрытие по кнопке) Интерактивность - Меню: фиксация верхнего меню при прокрутке - FAQ: разворачивание подробного текста - “Дополнительное образование”: разворачивание подробного текста - Реализовать на чистом JS - реакция интерактивных элементов при наведении мыши (показано в UI-kit) Разметка и ссылки - Семантические теги (<header>, <section>, <footer>…) - Кнопки — это ссылки <a href="#">…</a> Стиль и переменные - Цвета - CSS-переменные в :root - Tailwind-утилиты для отступов, шрифтов и прочего Футер - Верстать только вариант с категориями и ссылками Иконки, изображения и карта - Карту вставить как статичную картинку через `<img>` - SVG-иконки — хранить в /assets/icons/, подключать через `<img>` или `<use>` - Фото-блоки: - фон — отдельным слоем в CSS - основной PNG с прозрачным фоном — поверх Структура проекта /index.html /css/ style.css /js/ main.js /assets/ icons/ ← .svg images/ ← .png, карта, фоновые изображения Критерии приёмки - Соответствие макету - Работоспособность интерактивных элементов - Семантическая, валидная HTML/CSS - Нет inline-стилей и встроенных SVG