Необходимо сверстать макет для последующей его натяжки на opencart.

Ссылки на внешний вид:
Главная страница, логотипы, баннеры и все в таком духе
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket-Copy?node-id=1438%3A1646&viewport=3453%2C497%2C0.09883853793144226&scaling=min-zoom
_
Каталог товаров
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket-Copy?node-id=1438%3A3751&viewport=4096%2C1340%2C0.39106544852256775&scaling=min-zoom
_
Карточка товара и процесс покупки
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket-Copy?node-id=1438%3A3201&viewport=3391%2C800%2C0.2159881740808487&scaling=min-zoom
_
ЛК и вход
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket-Copy?node-id=1438%3A2157&viewport=4521%2C439%2C0.18036681413650513&scaling=min-zoom
_
Сравнения, контакты и текстовая страница
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket-Copy?node-id=1438%3A5697&viewport=-354%2C557%2C0.07029036432504654&scaling=min-zoom

Требования:

- Все интерактивные элементы должны изменять свое состояние при наведении-клике, выпадающие списки (каталог) раскрываться, слайдеры - скроллиться по таймеру (должна быть возможность отключить скролл передачей параметра при инициализации).

- Верстка должна корректно отображаться на различных разрешениях как десктопов, так и мобильных.

- Шапка должна быть закреплена при скролле на верхней части экрана
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35... - для десктопов (можно скроллить)
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35... - для мобильных (тоже можно скроллить)

- При раскрытии элемента каталога задний фон "затемняется" голубым:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...

- Аналогично затемняют фон и модальные окна и формы для заказа обратного звонка:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...

- При наведении на номер телефона в десктопной версии раскрывается меню с контактами (адрес и емейл). Все емейлы, отображающиеся на страницах зашифровать простым скриптом, чтобы они не были доступны при парсинге без js (простой скрипт вида return 'name' + '@' + 'domain.com').
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...

- Реализовать интерактивное поле поиска, в верстке оно должно обращаться к методу-болванке, который на живом сайте будет возвращать настоящие данные:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...
Поле поиска также затемняет фон:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...
Можно реализовать поиск и другие элементы, которые некритичны для сео во vue компоненте.
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...

- Для страницы контактов использовать карту яндекса вместо гугла. Для карты сделать так, чтобы она не блокировала скролл в мобильной версии одним пальцем.

- В шапке кнопка для раскрытия каталога вылезает за пределы контейнера на декстопе (в мобильном варианте все ок). Верстать надо будет так, чтобы она находилась в пределах - тут дизайнер не поправил.

- главная страница сайта в мобильной версии содержит дубль списка каталога
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...
Его отличие от каталога, появляющегося при клике на кнопку "каталог" в шапке в том, что там каждый подраздел снабжен картинкой, которая отображается при раскрытии секции:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...
При раскрытии списка из меню такой картинки нет:
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35...

- две полоски в шапке мобильной версии раскрывают меню с информационными ссылками, входом в лк и т.д.
https://www.figma.com/proto/Dev5wMXNX24ZhrZxl2ue35/AquaMarket.-Ready?node-id=1451%3A10&viewport=3453%2C497%2C0.09883853793144226&scaling=min-zoom

- К сожалению, диайнер забыл отрисовать всплывающее окно корзины. Сделать элементы там по аналогии с товарами в поиске по оформлению.

- Поля ввода имеют label, который уменьшется при клике на поле ввода и поднимается вверх (размер шрифта и позиция изменяются с анимацией).

- Соблюдать правила при верстке:
https://github.com/Tantacula/css-codestyle/blob/ma...

Ссылка на макет будет предоставлена после заключения сделки.