Адаптивная вёрстка по макету figma

1. Общие требования Тип проекта: Верстка веб-страницы по макету Figma https://www.figma.com/design/lrjLHUBCTQZt6DMOSSUJY...Цель: Реализовать адаптивную и кроссбраузерную верстку.Технологии: HTML5, CSS3 (Flexbox, Grid), SCSS или PostCSS для CSS-препроцессинга, JavaScript (ES6+), фреймворки и библиотеки по необходимости 2. Требования к вёрстке Адаптивность: Страница должна корректно отображаться на экранах от 320px до 1920px. Использовать принцип mobile-first.Кроссбраузерность: Поддержка последних версий популярных браузеров (Chrome, Firefox, Safari, Edge).Pixel Perfect: Соответствие макету из Figma.Оптимизация для SEO: Заголовки, альтернативные описания для изображений, семантические HTML-элементы. 3. Функциональные элементы Меню навигации:Адаптивное бургер-меню на мобильных устройствах.При клике на меню выполняется плавное раскрытие с анимацией.Слайдеры и карусели:Использование библиотек для каруселей (например, Swiper.js).Адаптация слайдера для мобильных устройств.Формы:Реализация полей ввода с валидацией (например, email, номер телефона).Модальные окна:Модальные окна для различных всплывающих окон.Таблицы и списки:Адаптивная верстка таблиц с возможностью горизонтальной прокрутки на мобильных устройствах.Фильтрация:Чекбоксы: Реализовать стилизованные чекбоксы, соответствующие макету Figma. Проверка состояния с анимацией при выборе.Селекты: Использовать кастомные стилизованные выпадающие списки (селекты) с анимацией при открытии и выборе опций. Инпуты: Реализовать текстовые поля для фильтрации по значению. Поля должны быть стилизованы в соответствии с макетом и включать состояние ошибки при некорректном вводе.Спойлеры:Спойлеры: Реализовать спойлеры для показа/скрытия содержимого с анимацией. При раскрытии одного спойлера другие должны сворачиваться, если указано в макете (аккордеон). Плавная анимация раскрытия и закрытия с использованием CSS или JavaScript.