Мобильная верстка Landing page на React
Для планшетов и ПК будет заглушка.
Общее требования:
Pixel-perfect, тянущаяся верстка (в пределах разрешений экранов телефонов), не использовать jQuery, можно использовать MUI, bootstrap, можно использовать JSX. Слайдер желательно использовать "react-slick".
Описание экранов:
1) Статический экран рамка всегда на одном расстоянии от краев экрана
2) Слайдер.
Картинка слайдера расположена в обертке "wrapper" имеет class: "pos_absolute_top" При прокрутке страницы, когда картинка слайдера доходит до верхней границы экрана, она фиксируется (class "pos_fixed"), остальной контент (список категорий от 1 до 11) продолжает скролится в тексте страницы. Когда последняя категория из списка поднимается выше нижней границы экрана картинка слайдера начинает движение вместе со страницей class "pos_absolute_bottom". При скроллинге снизу вверх - аналогично. Цель: фиксировать картинку вверху экрана пока идет скроллинг категорий.
При клике на категорию в слайдер загружаются необходимые изображения. При клике на иконку увеличения - открывается галерея фото во весь экран.
3) Блок Яндекс/Гугл-карты с точками или фоновая картинка с точками
4) Модуль подбора апартаментов, состоящий из tab-ов.
Можно выбрать корпус (при клике на корпус открывается следующий tab с выбором вида), при выборе вида открывается tab №3 со списком апартаментов. При клике на btn "фото" открывается галерея с фото, при клике на btn "цена" открывается модальное окно с iframe
5) Текстовый блок с видео
Видео загружается/воспроизводится из директории сайта
6) Текстовый блок
7) Две вкладки tab с текстовым блоком
8) Форма заявки
9) Контакты (карта Яндекс/Гугл или фоновая картинка с картой)
На PC и планшете будет заглушка со слайдером.
Макеты во вложении.
Прошу указывать цену и писать вопросы (если они есть).