kirill-zhirnov / boundless-marsfull-nextjs-ecommerce-template Goto Github PK

Страница: http://localhost:3000/shipping

• H1 - посмотри, какой размер используется в образце, жирность. Такую жирность мы подгружаем в _app.tsx
• Дефолтные ссылки: не знаю, есть ли для них переменые, если нет - давай введем.
• Заголовки h2-h6
• Нужно текст обернуть в дополнительный контейнер text-container, с max-width: ~800px, и центровкой по центру - сейчас такой широкий текст сложно воспринимать (на 4к)
• .btn-action - нужно переопредить цвета как в https://i1232.my-sellios.ru/ , эти кнопки появляются на страницах товара http://localhost:3000/product/chekhol-the-amity-affliction или в каруселях:

Основываясь на базовой теме (https://blank.demos.boundless-commerce.com/) сделать тему mars-full.

Примеры темы mars-full:

• https://i1232.my-sellios.ru/ - основной пример, с точки зрения цветов - берем его
• https://i562.my-sellios.ru/
• https://i3704.my-sellios.ru/

Основные элементы темы это:

• шапка
• меню
• Типографика
• Кнопки
• список товаров
• Блок с добавлением в корзину
• Корзина
• Футер

Макета нет, за основу берём сайты примеры. Если вдруг надо - я могу прислать исходники mars-full для sellios. Часть компонентов я уже начал делать - они содержат базовую верстку или стили.

Требования к теме:

• Размеры шрифтов в rem, кроме дизайнерских элементов. Например, в шапке логотип "Brand Shop" - его в px - тк это элемент дизайна. Как проверяем? В Chrome поставить шрифт по умолчанию "болшой" или очень-большой - это должно отражаться на шрифтах.
• Цвета темы - через переменные. Если нам нужно переопределить переменную, делаем это в файле: styles/styles.scss
• Кросс-браузерность, проверить во всех современных браузерах.

Предлагаю работать по задачам - отдельная задача это pull-request.

По окончанию сделай Lint кода: npx stylelint ./styles --fix - чтобы автоматически поправить сортировку стилей.

Предлагаю делать в следующем порядке:

• #4
• #2
• #3
• #5
• #6

Позже подготовлю остальные задачи.

• Цвета как на samples.
• Логотип Boundless - либо удалить, либо наложить gray-scale фильтр, чтобы небыло микса цветов
• Сейчас в футере бага - некоторые компоненты имеют фиксированные размер шрифтов, если в хроме поставить размер шрифта (не zoom, а именно размер шрифта в настройках), то увеличения в футере не будет.

Сейчас базовые стили уже есть, но в целом я особо не прорабатывал их. Нужно более детально проработать для xxl разрешения (размеры шрифтов, отступы), затем сделать мобильную версию шапки (см образец). Чтобы тебе не мешало меню/содержание - его можно закоментировать/скрыть.

Шапка не обязательно должна копировать образец на 100%, главное чтобы выглядело нормально.

Размер шрифта для .mars-top-nav я поставил немного меньше основного шрифта - давай это оставим (в образце этого нет).

Логотип: нужно попробовать вставить картинку, которая значительно превосходит размер блока и эта картинка должна сжиматься стилями и выглядеть хорошо. Пример: https://i562.my-sellios.ru/ - посмотри стили картинки логотипа.

Проверь плз, чтобы шрифты нормально подгружались и отображались (те убедись визуально, что это заданные шрифты).

При увеличении размера шрифта, корзина не длжна увеличиваться:

Фон у кол-ва пунктов должен увеличиваться вместе со шрифтом:

• Не обязательно, чтобы смотрелось 1 в 1, как в образце, но примерно также.
• Поведение при наведении - сделать как в образце.
• xs-md разрешения в образце мне не очень нравятся: можно попробовать сохранить высоту товаров в ряд. У кнопки добавь текст "Add to cart" в верстке (сейчас я удалил)
• Товар может быть не в наличии, тогда кнопки в корзину не будет - это надо учитывтаь
• На странице категории: http://localhost:3000/category/chekhly-na-iphone - можно выводить 3 товара в ряд? Я добавил доп. класс .products_in-category, ели надо - можно еще как-то поменять разметку - маякни - обсудим.

Спорный момент - поведение при увеличении шрифта. Может сделать чтобы пункты переносились на следующую строку?

Тоже самое на md разрешении. Будем импровизировать.