На очереди крутой макет, присланный подписчицей <3. Есть мобильная версия и подробный стайлгайд.
Этот макет вы можете легко взять как pet-project для разработки на любом из фреймворков.
1. На скриншоте 1 верхний блок сайта. В хедере есть раскрывающийся пункт меню Category (скриншот 2). Поисковая строка может быть реализована как фильтр по названиям товаров, раскрывающийся списком-подсказкой, когда пользователь начинает вводить первые буквы. Не забудьте и про выпадающий список с выбором валюты в верхнем правом углу. Кнопка View Intro в hero-блоке может открывать лайтбокс с видео с Youtube.
2. Главная страница несложная и представлена несколькими блоками карточек и кнопками, уводящими в соответствующую категорию. При верстке карточек не забывайте проверять их на переполнение и что верстка не ломается при нестандартном контенте.
3. На странице категории (скриншот 3) должна быть реализована фильтрация. Слева присутствуют блоки фильтров со списками с возможностью выбрать конкретную опцию, а так же возможность определить диапазон цен. Изменение любых фильтров должно добавлять в query-параметры соответствующие данные, для того, чтобы при перезагрузке страницы восстанавливалось текущее состояние страницы с примененнными фильтрами.
4. Возле названия категории выводится количество найденных товаров.
5. Если найденных товаров много, то внизу страницы добавляется пагинация (скриншот 4).
6. На этой же странице должна быть реализована сортировка минимум по 2 критериям, например, по популярности и цене (от большего к меньшему и наоборот). Данные сортировки должны быть добавлены в query-параметр адресной строки.
7. На странице товара реализованы 2 слайдера. Причем в первом из них (скриншот 5) под основной картинкой представлены уменьшенные версии остальных фотографий. Второй слайдер (скриншот 6) можно попробовать сделать бесконечным, чтобы после последнего элемента показывался первый и т.д.
Удачи в реализации проекта!
Поделись выполненной работой с другими!