Верстка 3х страниц по макетам (интернет магазин - есть прототип в web)

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

В компании решили сделать редизайн магазина ua-pharm.com  на ~50 товаров он сейчас на
(тема Total лицензия, woocommerce) .

руководству понравился прототип указаный в файле links.txt, дизайнер нарисовал главной страницы на несколько ширин для адаптивной верстки.

начинаем с фронтенда
что нужно сделать,

№1.  Страница товара на woocomerce - с большим баннером сверху (баннер разный на каждый товар)

 Сверстать адаптивно страницу товара ИМ по картинке, есть папка с использоваными фото, и исходники макета в иллюстраторе CS6 (там ссылки на фото) - шрифты в формате OTF, (начертания, что используются - конвертировать для Web).

Поскольку это не абстрактная страница - а будущий магазин кнопки "купить" и подобные элементы интерфейса нужно верстать используя стили woocomerce. Кто не верстал, посмотрите любую тему wordpress, но лучше если есть опыт.

№2. Страница торгового ряда с фильтром.

 Скопировать или адаптировать верстку товарного ряда с фильтром, в css стилях страницы woocommerce/shop.

поставив другие png фото товаров, достаточно 7штук - как в указанном магазине (ссылка (2) в txt)

В этой странице хидер и футер очень похожи - в связи с этим цель создать минимальную WP тему магазина, на основе предложеных или ваших - которую вы будете дополнять
ведь зачем создавать все страницы "типа оформление заказа" - выбрать из
https://siteorigin.com/theme/vantage/
https://wordpress.org/themes/cashier/

Или платные похожие на понравившийся - можем купить любую тему, например

http://ipharm.axiomthemes.com/services-style-1/
http://ipharm.axiomthemes.com/shop/

или ваш вариант.

№3 Титульная Страница с фильтром

Сверстать адаптивно титульную страницу сайта, где каждый товар

будет представлен в виде полукруглых капсул с текстом с иконкой (векторы иконок есть в макете иллюстратора,

идея интерактива взята - см.ссылку в txt - нажимая на мужчину - отключаются все что ему не подходит - нужно реализовать этот функционал аналогично на css + js)

На страницах 1,2,3 аналогично должнен присутствовать  - кнопка "гамбургер" которая открывает/закрывает  "полупрозрачное меню в виде слайда"  

(всегда - не только в моб.) 

Для реагирования на нажатия фильтра (мужчина, женщина, дети)  задаются 3мя стилями  - мужской продукт, женский продукт, детский продукт.

Желательно использовать SVG из макета в иллюстраторе нарезав их в отдельные svg файлы (там они уже с белой обводкой не удалите случайно), лучше подключать их в css - поскольку там же задается цвет иконки и фона капсулы.

Есть исходники в иллюстраторе шириной 1920, по главной странице
есть 766 и 500, по адаптивности см по ссылке в txt  - где все уже.. работает.

По JS, моб.меню, слайдеру на ваш вкус

Если вы профи - результат предполагает после оплаты отдачу SASS/SCSS
с файлом сборки gulp/webpack с опцией сборки .min.css вариантов файлов.

==

если вы не просто верстаете, а еще и fullstack по (задаче 3) - дополнительно оплачиваемо
php который будет собирать страницу с таблетками - по входным данным

в json/php arrays  или даже сразу из WP Advanced Custom Fields 

Просьба писать сразу цену и сроки, по всему или отдельно.

PixelPerfect верстка не требуется, главное аккуратность оперативность и отсутствие глюков.

Я онлайн 14часов в день, занимаюсь сейчас только этим проектом до сентября,

 как проект-менеджер с высоким уровнем понимания любых веб.технологий.