JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

1. Это макет главной (лицевой) страницы. 

В шапке расположен слайдер с изображениями товаров(активный ассортимент). Изображения сменяют друг друга. Каждое изображение кликабельно и ведет на страницу данного товара.

Следом расположенны последние добавленные товары.

Под новинками распологается блок с мини эссе от авторов бренда(производителя). При нажатии на кнопку далее, будет совершен переход на страницу "О компании"

Следующий блок - описание уникальных преимуществ бренда в сравнении с другими производителями. Тут должны быть приведены доводы, сведетельствующие об уникальности Ваших товаров. О качестве. По сути, тут должен быть ответ на вопрос:" Почему клиент должен выбрать Вас".

Далее идет баннер с призывом сказать каталог продукции. При нажатии на кнопку, сразу происходит загрузка на компъютер пользователя Вашего последнего(действующего) каталога.

Ниже расположен блок инстаграмма. Сюда транслируются все фото из Вашего аккаунта инстаграм. Каждая картинка кликабельна. При нажатии открывается во всплывающем окне. В окне будут подгружаться все комментарии к данному фото из инстаграма. Так же будут видны лайки и кнопка ведущая на сам канал инстаграм. Фото автоматически перелистываются раз в несколько секунд.

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

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

3. Единица товар офлайн. Тут располагается информация по одному товару. Подробная информация. Аналог данной страницы - макет №9. Разница с 9-м макетом в том, что во втором случае есть вывод цены и кнопка положить в корзину. 

4. Страница с акциями. Тут располагаются банеры. При клике на баннер с акцией, происходит переход на страницу с самой акцией. 

5.  Страница с категориями товаров. При...