Tweak V2 header search and recommendation cards
This commit is contained in:
parent
5667395b02
commit
dea75dcaf8
82
README.md
82
README.md
@ -1,23 +1,77 @@
|
||||
# DP Trade — Site UI Kit
|
||||
|
||||
Единый HTML/CSS проект для сайта и дизайн-системы DP Trade.
|
||||
Единый 11ty-проект для сайта, UI-kit и дизайн-системы DP Trade.
|
||||
|
||||
## Текущее состояние
|
||||
|
||||
- Источник правды: `src/`.
|
||||
- Сборка: Eleventy пишет результат в `_site/`.
|
||||
- Активная дизайнерская доработка: переключаемая версия `V2`, подключенная поверх базового `site.css` через `src/css/v2.css`.
|
||||
- `V1` сохранен как исходная версия для сравнения.
|
||||
- `V2` включает обновленную премиальную палитру, Cormorant Garamond + Manrope, легкие Cormorant `400/500`, переработанные карточки, mega-menu, footer, контакты и часть product/about-паттернов.
|
||||
- Подробный аудит и статусы: `docs/design-audit-followup.md`.
|
||||
|
||||
## Структура
|
||||
|
||||
- `index.html` — главная страница с меню, hero, карточками и футером.
|
||||
- `catalog.html` — пример страницы каталога.
|
||||
- `product.html` — пример страницы продукта.
|
||||
- `ui-kit.html` — живая витрина дизайн-системы.
|
||||
- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени.
|
||||
- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts.
|
||||
- `css/ui-kit.css` — стили страницы UI-kit.
|
||||
- `components/menu.html` — HTML-фрагмент меню.
|
||||
- `components/footer.html` — HTML-фрагмент футера.
|
||||
- `assets/images` и `assets/icons` — место для локальных изображений и иконок.
|
||||
- `src/*.njk` — исходные страницы.
|
||||
- `src/_includes/layouts/` — базовые layout-шаблоны.
|
||||
- `src/_includes/partials/` — header/footer.
|
||||
- `src/css/tokens.css` — шрифты, цвета, базовые дизайн-токены.
|
||||
- `src/css/site.css` — базовая V1-верстка сайта.
|
||||
- `src/css/v2.css` — V2-оверрайды по дизайнерскому аудиту.
|
||||
- `src/css/ui-kit.css` — стили витрины UI-kit.
|
||||
- `src/js/design-switcher.js` — переключение `V1/V2` через `localStorage`.
|
||||
- `src/js/inspector.js` — вспомогательный инспектор.
|
||||
- `src/fonts/` — шрифты, которые попадают в сборку.
|
||||
- `src/assets/` — изображения и локальные медиа.
|
||||
- `_site/` — результат сборки, не коммитится.
|
||||
- `docs/` — проектные документы, аудит, handoff.
|
||||
|
||||
## Как смотреть
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm run dev
|
||||
```
|
||||
|
||||
После `npm run dev` Eleventy поднимет локальный сервер. Для статической проверки можно открыть файлы из `_site/`.
|
||||
|
||||
Переключатель `V1/V2` есть в header и на странице `ui-kit.html`. Выбранная версия сохраняется в `localStorage` под ключом `dp-design-version`.
|
||||
|
||||
## Основные страницы
|
||||
|
||||
- `index.html` — главная: hero, producers, news, recommendations.
|
||||
- `catalog.html` — пример каталога.
|
||||
- `product.html` — пример страницы продукта, включая V2-only breadcrumbs.
|
||||
- `product-card-white.html` — варианты карточек на белом фоне.
|
||||
- `bottle-cards.html` — лаборатория карточек бутылок.
|
||||
- `about.html` — страница о компании.
|
||||
- `contacts.html` — контакты и форма.
|
||||
- `contacts-auth.html` — вариант контактов с auth-gate.
|
||||
- `news-villa-raiano.html` и `news-villa-raiano-v2.html` — редакционные страницы.
|
||||
- `article-guidelines.html` — гайд по статьям.
|
||||
- `ui-kit.html` — витрина дизайн-системы.
|
||||
|
||||
## Что уже решено
|
||||
|
||||
- Внедрен 11ty pipeline с passthrough для `src/css`, `src/js`, `src/fonts`, `src/assets`.
|
||||
- Добавлена V2-версия дизайна без удаления V1.
|
||||
- Подключены настоящие Cormorant Garamond `400/500` (`CormorantGaramond-Regular.woff2`, `CormorantGaramond-Medium.woff2`).
|
||||
- В V2 обновлены основные токены: бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, Cormorant Garamond + Manrope.
|
||||
- В V2 облегчены Cormorant-заголовки, карточки товара, section headings, footer и mega-menu.
|
||||
- В V2 добавлены breadcrumbs для product, split contact fields и success-state формы.
|
||||
- Последняя проверенная сборка: `npm run build`.
|
||||
|
||||
## Что осталось
|
||||
|
||||
- Визуально проверить `V2` на desktop/tablet/mobile: `index`, `catalog`, `product`, `about`, `contacts`, `ui-kit`.
|
||||
- Довести product content model: расширенное описание, реальные характеристики, финальная композиция price/CTA.
|
||||
- Решить, нужно ли переносить V2-токены непосредственно в `src/css/ui-kit.css`, или достаточно текущего `v2.css` override.
|
||||
- Дооформить production-сценарии: catalog pagination, 404, cookie/privacy, реальные form validation states, auth routes.
|
||||
|
||||
## Правило организации
|
||||
|
||||
В проекте должен быть один Git-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты.
|
||||
В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в `src/`; корневые HTML-файлы и `_site/` считаются артефактами сборки/миграции, а не источником правды.
|
||||
|
||||
## Naming
|
||||
|
||||
@ -34,7 +88,3 @@ Button / Primary / Default
|
||||
Card / Product / Hover
|
||||
Nav / Header / Desktop
|
||||
```
|
||||
|
||||
## Как смотреть
|
||||
|
||||
Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен.
|
||||
|
||||
@ -9,6 +9,12 @@
|
||||
|
||||
Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.
|
||||
|
||||
## Статус проекта - 2026-05-19
|
||||
|
||||
Кодовая база сейчас находится в состоянии V1 + переключаемый V2. Источник правды - `src/`, сборка идет через Eleventy в `_site/`. Основные дизайнерские замечания закрыты в V2: обновлены токены, подключены легкие Cormorant `400/500`, снижена жирность Cormorant, переработаны карточки товара, section headings, mega-menu, footer, контакты и product breadcrumbs. V1 остается для сравнения и не считается финальным направлением.
|
||||
|
||||
Открытые задачи: визуальный QA V2 на desktop/tablet/mobile, финальная продуктовая модель и расширенное описание товара, проверка плотных catalog list-cards, перенос V2-токенов в Elementor-документ/production handoff, production-блоки вроде pagination, 404, cookie/privacy и полноценной form validation.
|
||||
|
||||
## Статус проверки кода - 2026-04-23
|
||||
|
||||
Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В `src/_includes/layouts/base.njk` подключен `css/v2.css`, `src/js/design-switcher.js` переключает `data-design-version="v1|v2"` через `localStorage`, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2".
|
||||
@ -29,7 +35,7 @@
|
||||
| Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. |
|
||||
| "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. |
|
||||
| "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. |
|
||||
| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-04-28; Eleventy записал 12 файлов в `_site`. |
|
||||
| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-05-19; Eleventy записал 12 файлов в `_site`. |
|
||||
|
||||
## Новые замечания дизайнера - 2026-04-28
|
||||
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
2. **Декомпозиция работ** — список Elementor-элементов (Global Styles, CSS-слой, глобальные шаблоны, страницы) с оценкой сложности и зависимостями.
|
||||
3. **Пошаговый план** — 6 этапов с QA и планом отката.
|
||||
|
||||
> Основной источник дизайна: `index.html`, `catalog.html`, `product.html`, `bottle-cards.html`, `about.html`, `contacts.html`, `contacts-auth.html`, `news-villa-raiano.html`, `news-villa-raiano-v2.html`, `article-guidelines.html`, `ui-kit.html` плюс `css/tokens.css`, `css/site.css`, `css/ui-kit.css`.
|
||||
> Основной источник дизайна: `src/*.njk`, `src/css/tokens.css`, `src/css/site.css`, `src/css/v2.css`, `src/css/ui-kit.css`, `src/fonts/`, `src/js/design-switcher.js`. Сборочный результат находится в `_site/`.
|
||||
|
||||
> Статус на 2026-05-19: production-направление для новых правок — **V2**. V1 сохранен для сравнения, но перенос в Elementor должен ориентироваться на V2-токены: Cormorant Garamond + Manrope, бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, тонкие Cormorant-заголовки и обновленные карточки/mega-menu/footer.
|
||||
|
||||
---
|
||||
|
||||
@ -74,7 +76,7 @@
|
||||
| Meta list (4 пары label/value) | `.meta-list`, `.meta-list div`, `.meta-list span` | product | Лёгко |
|
||||
| Article body (editorial) | `.article-body`, `.article-body .lead`, `.article-body h2/h3/p/ul` | news, guidelines | Средне |
|
||||
| Footer | `.site-footer`, `.footer-container`, `.footer-main`, `.footer-brand-block`, `.nav-group`, `.contacts-card`, `.social-links` | все страницы | Лёгко |
|
||||
| Breadcrumbs | отсутствуют в макете | — | нужно добавить отдельно |
|
||||
| Breadcrumbs | `.breadcrumbs` | product V2 | Лёгко |
|
||||
| Pagination | отсутствует в макете | — | нужно добавить отдельно |
|
||||
|
||||
### 2.3 Проблемные места для Elementor
|
||||
@ -108,14 +110,14 @@
|
||||
|
||||
Эти блоки **не реализованы** в HTML-ките, но без них запуск не собрать. Добавьте их в бэклог:
|
||||
|
||||
- Breadcrumbs на catalog / single product / news / guidelines.
|
||||
- Breadcrumbs на catalog / news / guidelines. Product V2 уже содержит базовые breadcrumbs.
|
||||
- Pagination и «показать ещё» в каталоге.
|
||||
- Author/byline и дата публикации в новостях.
|
||||
- 404 page.
|
||||
- Cookie / privacy banner.
|
||||
- WooCommerce cart/checkout/account (если магазин включён), минимальная стилизация.
|
||||
- Сохранённое состояние поиска, пустое состояние каталога.
|
||||
- Форма обратной связи с валидацией и success-экраном.
|
||||
- Форма обратной связи с полной валидацией. V2 уже содержит split contact fields и простой success-state.
|
||||
- Skeleton / loading state для каталога.
|
||||
- Accessible labels на иконках хедера.
|
||||
|
||||
@ -125,11 +127,13 @@
|
||||
|
||||
| Файл | Что это |
|
||||
|---|---|
|
||||
| `css/tokens.css` | Единый источник значений: цвета, шрифты, spacing, radius, shadows, container |
|
||||
| `css/site.css` | Все боевые стили: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
|
||||
| `css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
|
||||
| `src/css/tokens.css` | Единый источник значений: шрифты, цвета, spacing, radius, shadows, container |
|
||||
| `src/css/site.css` | Базовая V1-верстка: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
|
||||
| `src/css/v2.css` | Production-направление V2: теплая палитра, Cormorant/Manrope, карточки, mega-menu, footer, form states |
|
||||
| `src/css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
|
||||
| `src/fonts/` | Шрифты, включая Cormorant Garamond `400/500/600/700` и Manrope |
|
||||
|
||||
В Elementor переносите не CSS целиком, а токены + CSS-классы `dp-*`. `ui-kit.css` остаётся как reference.
|
||||
В Elementor переносите не CSS целиком, а V2-токены + CSS-классы `dp-*`. `site.css` и `ui-kit.css` остаются reference; `v2.css` фиксирует актуальные дизайнерские решения.
|
||||
|
||||
---
|
||||
|
||||
@ -139,16 +143,17 @@
|
||||
|
||||
| Elementor name | CSS token | Value | Роль |
|
||||
|---|---|---|---|
|
||||
| DP Wine 100 | `--color-primary-wine-100` | `#4b0f24` | Основной бренд, primary кнопки, hover меню, линки |
|
||||
| DP Wine 80 | `--color-primary-wine-80` | `#6d1c36` | Hover primary, вторичный вин |
|
||||
| DP Wine 100 | `--color-primary-wine-100` | `#7D021D` | Основной бренд, primary кнопки, hover меню, линки |
|
||||
| DP Wine 80 | `--color-primary-wine-80` | `#9b1a33` | Hover primary, вторичный вин |
|
||||
| DP Black | `--color-neutral-black` | `#161616` | Основной текст |
|
||||
| DP Gray 700 | `--color-neutral-gray-700` | `#30343a` | Навигация, плотный secondary text |
|
||||
| DP Gray 600 | `--color-neutral-gray-600` | `#66605f` | Muted text, подписи, описания |
|
||||
| DP Gray 300 | `--color-neutral-gray-300` | `#d9dee6` | Бордеры, разделители |
|
||||
| DP Background | `--color-background-base` | `#f4f6f9` | Фон страниц |
|
||||
| DP Background | `--color-background-base` | `#FFFDFA` | Фон страниц |
|
||||
| DP Surface | `--color-surface` | `#ffffff` | Карточки, формы, панели |
|
||||
| DP Surface Warm | `--color-surface-warm` | `#F5F0E8` | Product media, warm sections, soft secondary buttons |
|
||||
| DP Gold | `--color-accent-gold` | `#b9965b` | Eyebrow, статусы, премиум-акцент |
|
||||
| DP Blue | `--color-accent-blue` | `#1f3476` | Logo `.brand-logo`, `.phone-link`, инфо-акценты |
|
||||
| DP Blue | `--color-accent-blue` | `#7D021D` | В V2 синий убран из UI; оставить настоящий синий только внутри изображения логотипа |
|
||||
| DP Error | `--color-error` | `#a33a2f` | Ошибки форм |
|
||||
|
||||
Также рекомендуются служебные **alpha-значения**, которые лучше держать в `--dp-*` переменных, а не как Global Colors (Elementor не умеет alpha-переменные как токены):
|
||||
@ -157,38 +162,38 @@
|
||||
--dp-border-soft: rgba(102, 96, 95, 0.12);
|
||||
--dp-border-med: rgba(102, 96, 95, 0.16);
|
||||
--dp-border-strong: rgba(102, 96, 95, 0.24);
|
||||
--dp-wine-border: rgba(75, 15, 36, 0.24);
|
||||
--dp-wine-hover: rgba(75, 15, 36, 0.06);
|
||||
--dp-header-bg: rgba(248, 250, 252, 0.94);
|
||||
--dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
|
||||
--dp-wine-border: rgba(125, 2, 29, 0.24);
|
||||
--dp-wine-hover: rgba(125, 2, 29, 0.06);
|
||||
--dp-header-bg: rgba(255, 253, 250, 0.94);
|
||||
--dp-focus-ring: 0 0 0 4px rgba(125, 2, 29, 0.08);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Global Fonts
|
||||
|
||||
Подключить в Elementor → Site Settings → Global Fonts. Google Fonts в `index.html` включают: `Inter`, `Montserrat`, `Playfair Display`, `Cormorant Garamond`, `Manrope`. В production для Elementor достаточно первых трёх; `Cormorant`/`Manrope` — только если будете использовать editorial/neo type cards.
|
||||
Подключить в Elementor → Site Settings → Global Fonts. Для V2 production используйте `Cormorant Garamond` для заголовков/названий вин и `Manrope` для body/UI. В проекте уже лежат локальные файлы Cormorant Garamond `400/500` плюс прежние `600/700`; при переносе в WordPress лучше загрузить эти файлы локально, а не полагаться на внешний Google Fonts.
|
||||
|
||||
| Elementor style | Font | Weight | Desktop | Line height | Transform |
|
||||
|---|---|---|---|---|---|
|
||||
| DP H1 | Montserrat | 800 | 56–72px | 1.0–1.1 | Uppercase |
|
||||
| DP H2 | Montserrat | 800 | 36–44px | 1.1 | Uppercase |
|
||||
| DP H3 | Montserrat | 800 | 22–28px | 1.15–1.25 | Uppercase |
|
||||
| DP Body | Inter | 400 | 16px | 1.5 | None |
|
||||
| DP Body Large | Inter | 400 | 18–19px | 1.5 | None |
|
||||
| DP Lead | Inter | 500 | 22px | 1.48 | None |
|
||||
| DP Caption | Inter | 700–800 | 12–13px | 1.2 | Uppercase |
|
||||
| DP Button | Inter | 700 | 14–16px | 1.2 | None |
|
||||
| DP Nav | Inter | 800 | 12px | 1.2 | Uppercase |
|
||||
| DP Editorial H | Playfair Display | 700 | 36–56px | 1.1 | None |
|
||||
| DP H1 | Cormorant Garamond | 400 | 48–80px | 1.05–1.1 | None |
|
||||
| DP H2 Section | Cormorant Garamond | 400 | 28–44px | 1.04 | Uppercase |
|
||||
| DP H3 / Card Title | Cormorant Garamond | 400 | 20–24px | 1.1–1.2 | None |
|
||||
| DP Body | Manrope | 400 | 16px | 1.5 | None |
|
||||
| DP Body Large | Manrope | 400 | 18–19px | 1.5 | None |
|
||||
| DP Lead | Cormorant Garamond | 400 | 22px | 1.48 | None |
|
||||
| DP Caption | Manrope | 600–700 | 12–13px | 1.2 | Uppercase |
|
||||
| DP Button | Manrope | 500–600 | 14–16px | 1.2 | None |
|
||||
| DP Nav | Manrope | 600–700 | 12px | 1.2 | Uppercase |
|
||||
| DP Footer Heading | Cormorant Garamond | 400 | 16px | 1.2 | None |
|
||||
|
||||
Responsive:
|
||||
|
||||
| Style | Tablet | Mobile |
|
||||
|---|---|---|
|
||||
| DP H1 | 40–56px | 34–44px |
|
||||
| DP H2 | 32–36px | 28–32px |
|
||||
| DP H3 | 22–24px | 20–22px |
|
||||
| DP H2 Section | 30–36px | 28–32px |
|
||||
| DP H3 / Card Title | 21–22px | 20–21px |
|
||||
| DP Body | 16px | 16px |
|
||||
| DP Button | 14–16px | 14px |
|
||||
|
||||
@ -226,8 +231,8 @@ Responsive:
|
||||
|
||||
| Token | Value | Где |
|
||||
|---|---|---|
|
||||
| `--dp-radius-sm` | 8px | Кнопки, поля, карточки, теги |
|
||||
| `--dp-radius-md` | 12px | Крупные панели, preview |
|
||||
| `--dp-radius-sm` | 4px | Кнопки, поля, карточки, теги |
|
||||
| `--dp-radius-md` | 8px | Крупные панели, preview |
|
||||
| `--dp-radius-lg` | 24px | Акцентные блоки (в текущем макете используется редко — оставляем про запас) |
|
||||
|
||||
### Shadows
|
||||
@ -235,7 +240,7 @@ Responsive:
|
||||
| Token | Value | Где |
|
||||
|---|---|---|
|
||||
| `--dp-shadow-soft` | `0 12px 32px rgba(22, 22, 22, 0.08)` | Карточки, формы, footer panel |
|
||||
| `--dp-shadow-lift` | `0 20px 52px rgba(75, 15, 36, 0.14)` | Hover карточек, mega menu, primary hover |
|
||||
| `--dp-shadow-lift` | `0 20px 52px rgba(125, 2, 29, 0.12)` | Hover карточек, mega menu, primary hover |
|
||||
| `--dp-shadow-header` | `0 10px 28px rgba(22, 22, 22, 0.05)` | Sticky header |
|
||||
| `--dp-focus-ring` | `0 0 0 4px rgba(75, 15, 36, 0.08)` | Input/search focus |
|
||||
|
||||
|
||||
@ -100,6 +100,33 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .site-header {
|
||||
background: rgba(255, 253, 250, 0.94);
|
||||
border-bottom-color: rgba(125, 2, 29, 0.12);
|
||||
box-shadow: 0 10px 28px rgba(125, 2, 29, 0.06);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar {
|
||||
background: #ffffff;
|
||||
border-color: rgba(125, 2, 29, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar:focus-within {
|
||||
border-color: rgba(125, 2, 29, 0.42);
|
||||
box-shadow: 0 0 0 3px rgba(125, 2, 29, 0.08);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar input {
|
||||
background: transparent;
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar input::placeholder {
|
||||
color: rgba(102, 96, 95, 0.72);
|
||||
}
|
||||
|
||||
/* ── Hero (home) ──────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .hero h1 {
|
||||
font-family: var(--font-heading);
|
||||
@ -127,7 +154,7 @@
|
||||
[data-design-version="v2"] .product-media,
|
||||
[data-design-version="v2"] .product-media--amber,
|
||||
[data-design-version="v2"] .product-media--green {
|
||||
background: #F5F0E8 !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .product-card h3 {
|
||||
@ -157,6 +184,7 @@
|
||||
background: transparent;
|
||||
color: var(--color-primary-wine-100);
|
||||
border: 1px solid var(--color-primary-wine-100);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
|
||||
@ -7,7 +7,7 @@ permalink: /
|
||||
<section class="hero">
|
||||
<div class="container hero-copy">
|
||||
<p class="eyebrow">DP Trade</p>
|
||||
<h1>Премиальный каталог вина для торговли</h1>
|
||||
<h1>ПРЕМИАЛЬНЫЙ КАТАЛОГ ВИНА</h1>
|
||||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||||
@ -69,17 +69,17 @@ permalink: /
|
||||
<h2>Рекомендации недели</h2>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" /></div>
|
||||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user