42point/dp-trade-UI-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migraion completed

Browse Source
This commit is contained in:
Alexey S 2026-04-23 10:23:28 +03:00
parent 6ca7190335
commit 83ce3622a3
19 changed files with 520 additions and 2116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.claude/settings.local.json Normal file
View File

@ -0,0 +1,8 @@
{
"permissions": {
"allow": [
"mcp__Claude_Preview__preview_start",
"Bash(npm run *)"
]
}
}

3
.gitignore vendored
View File

@ -3,3 +3,6 @@ node_modules/
dist/
_site/
.env
# Корневые HTML-файлы — артефакты до миграции на 11ty, источник правды — src/*.njk
/*.html

55
about.html
View File

@ -1,55 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — О компании</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="content-page">
<section class="page-hero page-hero--about">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">О компании</p>
<h1>DP Trade — территория качественного вина</h1>
<p>Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.</p>
</div>
<aside class="page-hero__meta" aria-label="Кратко о компании">
<span>Since 1991</span>
<strong>Premium wine trade</strong>
<p>Портфель винных домов для ресторанов, розницы и профессиональных закупок.</p>
</aside>
</div>
</section>
<section class="section">
<div class="container about-grid">
<article class="article-body">
<p class="lead">DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.</p>
<p>Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.</p>
<h2>Как устроен подход</h2>
<p>Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.</p>
</article>
<div class="feature-grid feature-grid--about">
<article class="feature-card"><span>01</span><h3>Удобный каталог</h3><p>Фильтры по типу, региону, производителю, сорту, году, объему и стилю.</p></article>
<article class="feature-card"><span>02</span><h3>Персональный подход</h3><p>Быстрая коммуникация с менеджером и подборки под формат клиента.</p></article>
<article class="feature-card"><span>03</span><h3>Склады в регионах</h3><p>Инфраструктура для регулярных поставок и управления доступностью.</p></article>
<article class="feature-card"><span>04</span><h3>Собственная доставка</h3><p>Контроль логистики и аккуратная работа с профессиональными заказами.</p></article>
</div>
</div>
</section>
<section class="section muted-section">
<div class="container section-heading section-heading--split">
<div><p class="eyebrow">Portfolio</p><h2>Винные дома и регионы</h2></div>
<p>Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.</p>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

121
article-guidelines.html
View File

@ -1,121 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Article Guidelines</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="content-page guidelines-page">
<section class="page-hero page-hero--guidelines">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Editorial guidelines</p>
<h1>Рекомендации по статьям DP Trade</h1>
<p>Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.</p>
</div>
<aside class="page-hero__meta">
<span>Для редакции</span>
<strong>Article system</strong>
<p>Единые правила помогают статьям выглядеть как часть продукта, а не как случайные публикации.</p>
</aside>
</div>
</section>
<section class="section">
<div class="container guideline-grid">
<article class="guideline-card guideline-card--lead">
<span>01</span>
<h2>Структура статьи</h2>
<p>Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.</p>
<ul>
<li>Заголовок: конкретный, с именем производителя, региона или события.</li>
<li>Лид: 1-2 предложения, раскрывает главный повод.</li>
<li>Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.</li>
<li>Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.</li>
</ul>
</article>
<article class="guideline-card">
<span>02</span>
<h2>Заголовки</h2>
<p>Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.</p>
<ul>
<li>Оптимально: 55-90 символов.</li>
<li>Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.</li>
<li>Избегать пустых формул: «уникальная история», «легендарное событие» без факта.</li>
<li>Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.</li>
</ul>
</article>
<article class="guideline-card">
<span>03</span>
<h2>Текст</h2>
<p>Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.</p>
<ul>
<li>Абзац: 350-650 знаков.</li>
<li>Лид: до 280 знаков.</li>
<li>Новость: 3 000-5 500 знаков.</li>
<li>История производителя: 5 000-8 000 знаков.</li>
<li>Цифры, годы, награды и сорта проверять отдельно.</li>
</ul>
</article>
<article class="guideline-card">
<span>04</span>
<h2>Фотографии</h2>
<p>Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.</p>
<ul>
<li>Hero: горизонтальное фото от 1600px по ширине.</li>
<li>Внутренние фото: от 1200px, без сильной компрессии.</li>
<li>Для карточек: предмет или бутылка должны быть читаемы на мобильном.</li>
<li>Не использовать тёмные, размытые, случайно обрезанные изображения.</li>
<li>Обязательно писать alt: кто/что изображено и где.</li>
</ul>
</article>
<article class="guideline-card">
<span>05</span>
<h2>Композиция</h2>
<p>Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.</p>
<ul>
<li>Не ставить подряд больше 4 текстовых абзацев без паузы.</li>
<li>Цитаты использовать только если они усиливают материал.</li>
<li>Сайдбар может содержать факты: страна, регион, сорт, год, награда.</li>
<li>Финальный CTA должен быть связан с каталогом или менеджером.</li>
</ul>
</article>
<article class="guideline-card">
<span>06</span>
<h2>SEO и handoff</h2>
<p>Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.</p>
<ul>
<li>Title: до 60 символов, включает бренд или тему.</li>
<li>Description: 140-160 символов.</li>
<li>URL: латиница, короткий slug.</li>
<li>Изображения называть по смыслу, а не `photo-final-2`.</li>
<li>В CMS хранить дату, автора/раздел, теги и связанные товары.</li>
</ul>
</article>
</div>
</section>
<section class="section muted-section">
<div class="container guideline-checklist">
<div>
<p class="eyebrow">Pre-publish checklist</p>
<h2>Проверка перед публикацией</h2>
</div>
<ul>
<li>Заголовок отражает конкретный повод и не звучит как реклама.</li>
<li>В лиде понятна ценность материала для профессиональной аудитории.</li>
<li>Все годы, имена, апелласьоны и награды проверены.</li>
<li>Есть минимум 2-4 качественные фотографии с alt-текстами.</li>
<li>Финал ведёт к каталогу, производителю, товару или контакту с менеджером.</li>
</ul>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

241
bottle-cards.html
View File

@ -1,241 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Bottle Card Variants</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="section card-lab-section">
<div class="container">
<div class="card-lab-head">
<div>
<p class="eyebrow">UI-kit / Product cards</p>
<h1>Варианты карточек бутылок</h1>
</div>
<p>Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.</p>
</div>
<section class="card-variant-block" aria-labelledby="cards-grid-title">
<div class="card-variant-title">
<p class="eyebrow">Variant 01</p>
<h2 id="cards-grid-title">Акцентные карточки каталога</h2>
</div>
<div class="bottle-card-grid">
<article class="bottle-card bottle-card--bordeaux">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
</div>
<div class="bottle-card__body">
<p class="bottle-card__region">Bordeaux</p>
<h3>Chateau Laroque Grand Cru</h3>
<p>France · Red dry · 2019 · 0.75 L</p>
</div>
<div class="bottle-card__footer">
<strong>3 890 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="bottle-card bottle-card--tuscany">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
</div>
<div class="bottle-card__body">
<p class="bottle-card__region">Tuscany</p>
<h3>Brunello di Montalcino</h3>
<p>Italy · Red dry · 2018 · 0.75 L</p>
</div>
<div class="bottle-card__footer">
<strong>4 240 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="bottle-card bottle-card--mosel">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" />
</div>
<div class="bottle-card__body">
<p class="bottle-card__region">Mosel</p>
<h3>Riesling Kabinett</h3>
<p>Germany · White · 2021 · 0.75 L</p>
</div>
<div class="bottle-card__footer">
<strong>2 150 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
</div>
</section>
<section class="card-variant-block" aria-labelledby="cards-alt-title">
<div class="card-variant-title">
<p class="eyebrow">Variant 02-04</p>
<h2 id="cards-alt-title">Альтернативные форматы</h2>
</div>
<div class="bottle-card-mix">
<article class="bottle-card bottle-card--clean">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Oremus Case of Aszu" />
</div>
<div class="bottle-card__body">
<p class="bottle-card__region">Clean retail</p>
<h3>Oremus Case of Aszu 5 Puttonyos</h3>
<p>Hungary · White sweet · 2000 · 0.5 L</p>
</div>
<div class="bottle-card__footer">
<strong>19 240 ₽</strong>
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
</div>
</article>
<article class="bottle-card bottle-card--compact">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Oremus Tokaji Aszu" />
</div>
<div class="bottle-card__body">
<p class="bottle-card__region">Compact</p>
<h3>Tokaji Aszu 5 Puttonyos</h3>
<p>Hungary · 12% · Furmint, Harslevelu</p>
</div>
<div class="bottle-card__footer">
<strong>19 240 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="bottle-card bottle-card--horizontal">
<div class="bottle-card__media">
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Oremus Tokaji Late Harvest" />
</div>
<div class="bottle-card__content">
<div class="bottle-card__body">
<p class="bottle-card__region">B2B row card</p>
<h3>Oremus Tokaji Late Harvest</h3>
<p>Вино белое полусладкое · Венгрия · 11.5%</p>
<p class="bottle-card__details">Сорт: Фурминт, Зета, Харшлевелю</p>
</div>
<div class="bottle-card__footer">
<strong>4 980 ₽</strong>
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
</div>
</div>
</article>
</div>
</section>
<section class="card-variant-block" aria-labelledby="catalog-card-title">
<div class="card-variant-title">
<p class="eyebrow">Catalog current</p>
<h2 id="catalog-card-title">Варианты текущей карточки каталога</h2>
</div>
<div class="catalog-card-variants">
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Default / как в каталоге</p>
<div class="product-card product-card--list">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Сладкое<br />12 %</p>
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</div>
</article>
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Compact / меньше высота</p>
<div class="product-card product-card--list product-card--list-compact">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Сладкое · 12% · Фурминт, Харшлевелю, Мускат</p>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</div>
</article>
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Hover / активная строка</p>
<div class="product-card product-card--list product-card--list-hover">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Полусладкое<br />11.5 %</p>
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
</div>
<div class="product-buy">
<strong>4 980 ₽</strong>
<a class="button button--primary" href="#">Подробнее</a>
</div>
</div>
</article>
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Color image / цветной фон фото</p>
<div class="product-card product-card--list product-card--list-color">
<a class="product-image product-image--gold" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Сладкое<br />12 %</p>
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</div>
</article>
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">B2B dense / больше данных</p>
<div class="product-card product-card--list product-card--list-b2b">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Венгрия · Tokaj · Oremus · 0.5 л · 12%</p>
<div class="product-params">
<span>Тип: белое сладкое</span>
<span>Сорт: Фурминт 70%</span>
<span>Упаковка: 6 шт.</span>
<span>Артикул: 00073820</span>
</div>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</div>
</article>
</div>
</section>
</div>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

89
catalog.html
View File

@ -1,89 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Catalog</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="section catalog-section">
<div class="container">
<div class="catalog-head">
<div>
<p class="eyebrow">Catalog / Country</p>
<h1>Венгрия</h1>
</div>
<div class="catalog-actions" aria-label="Действия каталога">
<span>Всего найдено: 22</span>
<a class="button button--secondary" href="#">Все в избранное</a>
<a class="button button--secondary" href="#">Очистить избранное</a>
</div>
</div>
<div class="catalog-toolbar">
<span>Всего найдено: 22</span>
<select class="input catalog-sort" aria-label="Сортировка">
<option>Исходная сортировка</option>
<option>По цене</option>
<option>По названию</option>
</select>
</div>
<section class="product-list" aria-label="Список товаров">
<article class="product-card product-card--list">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Сладкое<br />12 %</p>
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</article>
<article class="product-card product-card--list">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Сладкое<br />12 %</p>
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
</div>
<div class="product-buy">
<strong>19 240 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</article>
<article class="product-card product-card--list">
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
</a>
<div class="product-info">
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
<p>Вино Белое Полусладкое<br />11.5 %</p>
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
</div>
<div class="product-buy">
<strong>4 980 ₽</strong>
<a class="button button--secondary" href="#">В избранное</a>
</div>
</article>
</section>
</div>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

70
contacts-auth.html
View File

@ -1,70 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Контакты / Auth Gate</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="content-page contacts-auth-page">
<section class="page-hero page-hero--contacts">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Контакты</p>
<h1>Связаться с DP Trade</h1>
<p>Контакты открыты для всех, но заявка менеджеру доступна только зарегистрированным или залогиненным пользователям.</p>
</div>
<aside class="page-hero__meta" aria-label="Основные контакты">
<span>Sales office</span>
<strong>+7 (495) 937-94-60</strong>
<p>dptr@dp-trade.ru</p>
</aside>
</div>
</section>
<section class="section">
<div class="container contacts-layout">
<div class="contact-stack">
<article class="contact-panel">
<span>Телефон</span>
<a href="tel:+74959379460">+7 (495) 937-94-60</a>
<p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
</article>
<article class="contact-panel">
<span>Email</span>
<a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
<p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
</article>
<article class="contact-panel">
<span>Юридическая информация</span>
<p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
</article>
</div>
<section class="contact-form contact-auth-gate" aria-labelledby="auth-gate-title">
<div class="auth-gate__badge">Требуется аккаунт</div>
<h2 id="auth-gate-title">Заявка доступна после входа</h2>
<p>Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.</p>
<div class="auth-gate__actions">
<a class="button button--primary" href="#">Войти</a>
<a class="button button--secondary" href="#">Зарегистрироваться</a>
</div>
<div class="auth-gate__note">
<strong>После входа откроется:</strong>
<span>форма заявки, автозаполнение контактов, привязка к компании и история обращений.</span>
</div>
<div class="locked-form-preview" aria-label="Предпросмотр заблокированной формы">
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" disabled /></label>
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" disabled /></label>
<label>Сообщение<textarea class="input" rows="4" placeholder="Напишите, что нужно подобрать" disabled></textarea></label>
</div>
</section>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

59
contacts.html
View File

@ -1,59 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Контакты</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="content-page">
<section class="page-hero page-hero--contacts">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Контакты</p>
<h1>Связаться с DP Trade</h1>
<p>Для вопросов по каталогу, ассортименту, поставкам и работе с менеджером используйте телефон, почту или форму заявки.</p>
</div>
<aside class="page-hero__meta" aria-label="Основные контакты">
<span>Sales office</span>
<strong>+7 (495) 937-94-60</strong>
<p>dptr@dp-trade.ru</p>
</aside>
</div>
</section>
<section class="section">
<div class="container contacts-layout">
<div class="contact-stack">
<article class="contact-panel">
<span>Телефон</span>
<a href="tel:+74959379460">+7 (495) 937-94-60</a>
<p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
</article>
<article class="contact-panel">
<span>Email</span>
<a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
<p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
</article>
<article class="contact-panel">
<span>Юридическая информация</span>
<p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
</article>
</div>
<form class="contact-form" action="#">
<h2>Заявка менеджеру</h2>
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" /></label>
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" /></label>
<label>Сообщение<textarea class="input" rows="5" placeholder="Напишите, что нужно подобрать"></textarea></label>
<button class="button button--primary" type="submit">Отправить заявку</button>
</form>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

BIN
docs/Аудит сайт дп-трейд.pdf Normal file
View File

Binary file not shown.

101
index.html
View File

@ -1,101 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Home</title>
</head>
<body>
<div class="site-shell">
<div id="site-header"></div>
<main>
<section class="hero">
<div class="container hero-copy">
<p class="eyebrow">DP Trade</p>
<h1>Премиальный каталог вина для торговли</h1>
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
<div class="hero-actions">
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
<a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
</div>
</div>
</section>
<section class="section producers-section">
<div class="container">
<div class="section-heading section-heading--split">
<div>
<p class="eyebrow">Producers</p>
<h2>Производители</h2>
</div>
<p>Ключевые винные дома и хозяйства из портфеля DP Trade: от классических брендов до эксклюзивных партнеров.</p>
</div>
<div class="producer-grid">
<a class="producer-card" href="#"><span>Argentina</span><strong>Catena Zapata</strong></a>
<a class="producer-card" href="#"><span>Champagne</span><strong>Bollinger</strong></a>
<a class="producer-card" href="#"><span>Burgundy</span><strong>Domaine De Villaine</strong></a>
<a class="producer-card" href="#"><span>Italy</span><strong>Gaja</strong></a>
<a class="producer-card" href="#"><span>France</span><strong>Pascal Jolivet</strong></a>
<a class="producer-card" href="#"><span>Rhone</span><strong>Paul Jaboulet Aine</strong></a>
</div>
</div>
</section>
<section class="section news-section">
<div class="container">
<div class="section-heading section-heading--split">
<div>
<p class="eyebrow">Latest news</p>
<h2>Последние новости</h2>
</div>
<a class="button button--secondary" href="#">Все новости</a>
</div>
<div class="news-grid">
<article class="news-card">
<div class="news-card__image news-card__image--catena"></div>
<div><span>Интервью</span><h3>Интервью с Лаурой Катеной</h3></div>
</article>
<article class="news-card">
<div class="news-card__image news-card__image--brand"></div>
<div><span>Бренды</span><h3>Catena Zapata вновь признана самым почитаемым винным брендом мира</h3></div>
</article>
<article class="news-card">
<div class="news-card__image news-card__image--italy"></div>
<div><span>Италия</span><h3>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h3></div>
</article>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-heading">
<p class="eyebrow">Recommendations</p>
<h2>Рекомендации недели</h2>
</div>
<div class="product-grid">
<article class="product-card">
<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">
<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">
<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>
</article>
</div>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

87
news-villa-raiano-v2.html
View File

@ -1,87 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Villa Raiano editorial</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="news-editorial">
<article>
<header class="editorial-hero">
<div class="container editorial-hero__inner">
<div class="editorial-hero__copy">
<p class="eyebrow">Новости / Villa Raiano</p>
<h1>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h1>
<div class="editorial-meta"><span>6 апреля, 2026</span><span>Ирпиния, Кампания</span></div>
</div>
<figure class="editorial-hero__image">
<img src="assets/images/photo_2026-04-06_16-53-26.jpg" alt="Винодельня Villa Raiano среди холмов Ирпинии" />
</figure>
</div>
</header>
<section class="section editorial-section">
<div class="container editorial-layout">
<aside class="editorial-side">
<span>Article focus</span>
<p>Семья Бассо, новая винодельня, ставка на белые вина и признание Fiano di Avellino.</p>
</aside>
<div class="editorial-body">
<p class="lead">Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.</p>
<p>На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.</p>
</div>
</div>
</section>
<figure class="container editorial-image editorial-image--wide">
<img src="assets/images/photo_2026-04-06_16-53-24.jpg" alt="Сбор белого винограда Villa Raiano" />
</figure>
<section class="section editorial-section">
<div class="container editorial-layout">
<aside class="editorial-side editorial-side--timeline">
<span>Timeline</span>
<ol>
<li><strong>1990-е</strong><small>семейная маслобойня</small></li>
<li><strong>2008</strong><small>новое оборудование и команда</small></li>
<li><strong>2009</strong><small>винодельня на холме</small></li>
<li><strong>2024</strong><small>подземная винодельня</small></li>
</ol>
</aside>
<div class="editorial-body">
<p>В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.</p>
<blockquote>«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.</blockquote>
<p>Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».</p>
</div>
</div>
</section>
<section class="container editorial-photo-grid" aria-label="Фото Villa Raiano">
<figure><img src="assets/images/photo_2026-04-06_16-53-23.jpg" alt="Ящики с белым виноградом Villa Raiano" /></figure>
<figure><img src="assets/images/photo_2026-04-06_16-53-23-2.jpg" alt="Работа в погребе Villa Raiano" /></figure>
</section>
<section class="section editorial-section editorial-section--final">
<div class="container editorial-layout">
<aside class="editorial-side">
<span>Recognition</span>
<p>Gambero Rosso отметил Fiano di Avellino 2024 за лучшее соотношение цены и качества в регионе.</p>
</aside>
<div class="editorial-body">
<p>В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.</p>
<blockquote>«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».</blockquote>
<p>Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.</p>
<p class="editorial-outro">Чем не повод самому проверить мнение Gambero Rosso?</p>
</div>
</div>
</section>
</article>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

62
news-villa-raiano.html
View File

@ -1,62 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Villa Raiano</title>
</head>
<body class="compact-type">
<div class="site-shell">
<div id="site-header"></div>
<main class="content-page">
<section class="page-hero page-hero--news">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Новости / Италия</p>
<h1>Villa Raiano: от оливкового масла к одному из лучших Fiano Италии</h1>
<p>История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.</p>
</div>
<aside class="page-hero__meta" aria-label="Параметры новости">
<span>Producer spotlight</span>
<strong>Villa Raiano</strong>
<p>Campania · Irpinia · Fiano di Avellino</p>
</aside>
</div>
</section>
<section class="section">
<div class="container article-layout">
<article class="article-body">
<p class="lead">Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.</p>
<p>Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.</p>
<h2>Почему Fiano di Avellino</h2>
<p>Фьяно из Авеллино ценят за минеральность, плотную фактуру и способность к развитию в бутылке. В молодых винах часто появляются цитрусовые, груша, персик, травы и медовые оттенки; с возрастом они становятся глубже, прянее и сложнее.</p>
<p>Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.</p>
<blockquote>Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.</blockquote>
<h2>Что показать в каталоге</h2>
<p>Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.</p>
</article>
<aside class="article-aside">
<div class="info-card">
<span>Ключевые факты</span>
<dl>
<div><dt>Страна</dt><dd>Италия</dd></div>
<div><dt>Регион</dt><dd>Кампания, Ирпиния</dd></div>
<div><dt>Основание</dt><dd>1996</dd></div>
<div><dt>Сорта</dt><dd>Fiano, Greco, Aglianico</dd></div>
</dl>
</div>
<div class="info-card info-card--accent">
<span>Для UI-kit</span>
<p>Эта страница проверяет длинный заголовок новости, текстовую статью, боковую карточку фактов и CTA обратно в каталог.</p>
<a class="button button--primary button--sm" href="catalog.html">В каталог</a>
</div>
</aside>
</div>
</section>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

36
product.html
View File

@ -1,36 +0,0 @@
<!doctype html>
<html lang="ru">
<head>
<script src="components/head.js"></script>
<title>DP Trade — Product</title>
</head>
<body>
<div class="site-shell">
<div id="site-header"></div>
<main class="section">
<div class="container product-detail">
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
<section class="detail-copy">
<p class="eyebrow">Product / Default</p>
<h1>Chateau Laroque Grand Cru</h1>
<p>Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.</p>
<div class="meta-list">
<div><span>Регион</span><strong>Bordeaux</strong></div>
<div><span>Тип</span><strong>Red dry</strong></div>
<div><span>Год</span><strong>2019</strong></div>
<div><span>Объем</span><strong>0.75 L</strong></div>
<div><span>Цена</span><strong>3 890 ₽</strong></div>
</div>
<div class="hero-actions">
<a class="button button--primary" href="#">Запросить прайс</a>
<a class="button button--secondary" href="catalog.html">Вернуться в каталог</a>
</div>
</section>
</div>
</main>
<div id="site-footer"></div>
</div>
<script src="assets/js/components.js"></script>
</body>
</html>

46
src/_includes/partials/header.njk
View File

@ -247,7 +247,50 @@
</section>
</div>
<a href="#">Поставки</a>
<a href="#">Новости</a>
<div class="nav-item">
<button class="nav-trigger" type="button" aria-expanded="false">О компании <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
<section class="mega-menu" aria-label="О компании">
<div class="mega-intro">
<div>
<p class="eyebrow">DP Trade</p>
<h2>О компании и контакты</h2>
</div>
<p>Истории, статьи и прямые контакты для клиентов и партнёров.</p>
</div>
<div class="menu-grid">
<article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винные бочки в погребе">
<p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p>
</article>
<article class="menu-column">
<p class="section-title">Компания</p>
<a href="about.html">О нас</a>
<a href="contacts.html">Контакты</a>
<a href="contacts-auth.html">Контакты для партнёров</a>
</article>
<article class="menu-column">
<p class="section-title">Новости и статьи</p>
<a href="news-villa-raiano.html">Villa Raiano — классика</a>
<a href="news-villa-raiano-v2.html">Villa Raiano — editorial</a>
<a href="article-guidelines.html">Редакционный гайд</a>
</article>
<article class="menu-column popular-column">
<p class="section-title">Быстрые ссылки</p>
<div class="popular-list">
<a href="#">Склады и логистика</a>
<a href="#">Реквизиты</a>
<a href="#">Карьера</a>
<a href="#">Пресса</a>
</div>
</article>
</div>
</section>
</div>
<div class="nav-item">
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
<section class="mega-menu" aria-label="UI-kit">
@ -269,6 +312,7 @@
<a href="catalog.html">Каталог</a>
<a href="product.html">Карточка товара</a>
<a href="bottle-cards.html">Варианты карточек</a>
<a href="product-card-white.html">Карточка на белом</a>
<a href="news-villa-raiano.html">Новость</a>
<a href="news-villa-raiano-v2.html">Новость v2</a>
<a href="article-guidelines.html">Ред. гайд</a>

126
src/css/v2.css
View File

@ -406,3 +406,129 @@
[data-design-version="v2"] .section--muted {
background: var(--color-surface-warm);
}
/* ── White-background product card variants ─────────────────────────────
For bottle images with white/transparent backgrounds. Work under both
V1 and V2; typography inherits from the active version. */
.product-card[class*="--white"] {
background: #ffffff;
border: 1px solid rgba(22, 22, 22, 0.08);
box-shadow: none;
}
.product-card[class*="--white"] .product-media {
background: #ffffff !important;
min-height: 240px;
}
.product-card[class*="--white"] .product-photo {
max-height: 220px;
object-fit: contain;
}
/* Variant A — pure white, minimal outline */
.product-card--white-pure {
padding: 20px;
}
/* Variant B — elevated: white on warm page with soft shadow */
.product-card--white-elevated {
border-color: transparent;
box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 12px 32px rgba(22, 22, 22, 0.06);
padding: 20px;
}
/* Variant C — hairline gold divider between media and body */
.product-card--white-hairline .product-media {
border-bottom: 1px solid var(--color-accent-gold, #b9965b);
padding-bottom: 12px;
margin-bottom: 4px;
}
/* Variant D — thin burgundy frame around the media */
.product-card--white-framed .product-media {
border: 1px solid rgba(125, 2, 29, 0.18);
border-radius: 2px;
}
/* Variant E — split: white media, warm beige body */
.product-card--white-split {
padding: 0;
overflow: hidden;
}
.product-card--white-split .product-media {
border-radius: 0;
}
.product-card--white-split .product-meta,
.product-card--white-split .product-footer {
padding-left: 20px;
padding-right: 20px;
background: #F5F0E8;
}
.product-card--white-split .product-meta { padding-top: 16px; }
.product-card--white-split .product-footer { padding-bottom: 20px; }
/* Wide (catalog) variants — apply to .product-card--list */
.product-card--list[class*="--white"] {
background: #ffffff;
border: 1px solid rgba(22, 22, 22, 0.08);
box-shadow: none;
}
.product-card--list[class*="--white"] .product-image {
background: #ffffff;
}
/* Wide A — outline only, all white */
.product-card--list.product-card--white-wide {
/* base already applied above */
}
/* Wide B — white image, warm info column */
.product-card--list.product-card--white-wide-split {
padding: 0;
overflow: hidden;
background: #F5F0E8;
}
.product-card--list.product-card--white-wide-split .product-image {
background: #ffffff;
align-self: stretch;
padding: 20px;
border-right: 1px solid rgba(22, 22, 22, 0.06);
max-height: none;
min-height: 100%;
height: 100%;
}
.product-card--list.product-card--white-wide-split .product-info,
.product-card--list.product-card--white-wide-split .product-buy {
padding-top: 20px;
padding-bottom: 20px;
}
.product-card--list.product-card--white-wide-split .product-buy {
padding-right: 20px;
}
/* Wide C — white throughout with gold vertical hairline before info */
.product-card--list.product-card--white-wide-hairline .product-image {
border-right: 1px solid var(--color-accent-gold, #b9965b);
padding-right: 20px;
}
/* Showcase page layout */
.card-whitebg-section { background: var(--color-background-base); }
.card-whitebg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.card-whitebg-block { margin-top: 48px; }
.card-whitebg-block h2 {
font-size: 22px;
font-weight: 500;
margin: 0 0 6px;
}
.card-whitebg-block .eyebrow { margin: 0; }
.card-whitebg-block .variant-note {
color: var(--color-neutral-gray-600);
font-size: 14px;
margin: 0 0 24px;
max-width: 60ch;
}

22
src/js/design-switcher.js
View File

@ -31,27 +31,6 @@
// ── V2 DOM enhancements ────────────────────────────────────────────────
// All insertions are idempotent and tagged data-v2-only so V1 CSS hides them.
function ensureBreadcrumbs() {
// Only on product page — detect by .product-detail.
var detail = document.querySelector('.product-detail');
if (!detail) return;
var main = detail.closest('main');
if (!main || main.querySelector('[data-v2-only="breadcrumbs"]')) return;
var nav = document.createElement('nav');
nav.className = 'breadcrumbs container';
nav.setAttribute('data-v2-only', 'breadcrumbs');
nav.setAttribute('aria-label', 'Хлебные крошки');
nav.innerHTML =
'<a href="index.html">Главная</a>' +
'<span aria-hidden="true">/</span>' +
'<a href="catalog.html">Каталог</a>' +
'<span aria-hidden="true">/</span>' +
'<a href="#">Bordeaux</a>' +
'<span aria-hidden="true">/</span>' +
'<span aria-current="page">Chateau Laroque Grand Cru</span>';
main.insertBefore(nav, detail.parentElement === main ? detail : main.firstChild);
}
function ensureSplitContactFields() {
var form = document.querySelector('.contact-form');
if (!form || form.dataset.v2Enhanced === '1') return;
@ -93,7 +72,6 @@
}
function enhanceDomV2() {
ensureBreadcrumbs();
ensureSplitContactFields();
}

329
src/product-card-white.njk Normal file
View File

@ -0,0 +1,329 @@
---
title: "DP Trade — Product card · White background variants"
layout: layouts/default
permalink: /product-card-white.html
bodyClass: compact-type
---
<main class="section card-whitebg-section">
<div class="container">
<div class="card-lab-head">
<div>
<p class="eyebrow">UI-kit / Product cards</p>
<h1>Карточка товара на белом фоне</h1>
</div>
<p>Часть изображений бутылок сохранена на чистом белом фоне — под такие фото нужны карточки, где блок-медиа тоже белый. Ниже несколько вариантов решения: от минимального контура до акцентной рамки и split-композиции.</p>
</div>
<!-- Variant A -->
<section class="card-whitebg-block" aria-labelledby="whitebg-a">
<p class="eyebrow">Variant A · minimal outline</p>
<h2 id="whitebg-a">Чистый белый с тонкой рамкой</h2>
<p class="variant-note">Карточка и медиа на одном белом фоне, разделения нет. Только 1px нейтральный контур, чтобы отделить её от страницы. Самый нейтральный и «каталожный» вариант — бутылки на белом PNG встают без швов.</p>
<div class="card-whitebg-grid">
<article class="product-card product-card--white-pure">
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
<div class="product-meta">
<span class="tag tag--filled">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 product-card--white-pure">
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
<div class="product-meta">
<span class="tag tag--filled">Toscana</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 product-card--white-pure">
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
<div class="product-meta">
<span class="tag tag--filled">Mosel</span>
<h3>Dr. Loosen Riesling</h3>
<p>Germany · White off-dry · 2022 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>2 990 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
</div>
</section>
<!-- Variant B -->
<section class="card-whitebg-block" aria-labelledby="whitebg-b">
<p class="eyebrow">Variant B · elevated</p>
<h2 id="whitebg-b">Белая карточка с мягкой тенью</h2>
<p class="variant-note">Без рамки, но с лёгкой тенью. Карточка «приподнята» над тёплым фоном страницы — премиальнее, чем outline. Хорошо работает, когда страница сама тёплая кремовая (V2 background), а карточка должна ощущаться как бумага.</p>
<div class="card-whitebg-grid">
<article class="product-card product-card--white-elevated">
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
<div class="product-meta">
<span class="tag tag--filled">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 product-card--white-elevated">
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
<div class="product-meta">
<span class="tag tag--filled">Piemonte</span>
<h3>Marchesi Barolo</h3>
<p>Italy · Red dry · 2018 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>5 180 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="product-card product-card--white-elevated">
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
<div class="product-meta">
<span class="tag tag--filled">Toscana</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>
</div>
</section>
<!-- Variant C -->
<section class="card-whitebg-block" aria-labelledby="whitebg-c">
<p class="eyebrow">Variant C · hairline divider</p>
<h2 id="whitebg-c">Белое медиа + золотая тонкая линия</h2>
<p class="variant-note">Медиа и тело на едином белом фоне, разделены только hairline-линией золотого акцента. Editorial-вайб, без тяжёлых блоков. Подходит для флагманских подборок и промо-полок.</p>
<div class="card-whitebg-grid">
<article class="product-card product-card--white-hairline">
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
<div class="product-meta">
<span class="tag tag--filled">Mosel</span>
<h3>Dr. Loosen Riesling</h3>
<p>Germany · White off-dry · 2022 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>2 990 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<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 class="product-meta">
<span class="tag tag--filled">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 product-card--white-hairline">
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
<div class="product-meta">
<span class="tag tag--filled">Toscana</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>
</div>
</section>
<!-- Variant D -->
<section class="card-whitebg-block" aria-labelledby="whitebg-d">
<p class="eyebrow">Variant D · framed media</p>
<h2 id="whitebg-d">Белое медиа в бордовой рамке</h2>
<p class="variant-note">Белый фон сохраняется, но медиа-блок обводится тонкой бордовой рамкой. Бутылка визуально «заперта» в окне и не растворяется в странице. Даёт больше структуры, чем hairline, не уходя в тяжёлый outline.</p>
<div class="card-whitebg-grid">
<article class="product-card product-card--white-framed">
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
<div class="product-meta">
<span class="tag tag--filled">Piemonte</span>
<h3>Marchesi Barolo</h3>
<p>Italy · Red dry · 2018 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>5 180 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="product-card product-card--white-framed">
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
<div class="product-meta">
<span class="tag tag--filled">Mosel</span>
<h3>Dr. Loosen Riesling</h3>
<p>Germany · White off-dry · 2022 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>2 990 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
<article class="product-card product-card--white-framed">
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
<div class="product-meta">
<span class="tag tag--filled">Toscana</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>
</div>
</section>
<!-- Variant E -->
<section class="card-whitebg-block" aria-labelledby="whitebg-e">
<p class="eyebrow">Variant E · split</p>
<h2 id="whitebg-e">Split: белое медиа + тёплое тело</h2>
<p class="variant-note">Медиа остаётся на белом, а info-часть уходит на тёплый #F5F0E8. Визуально делит карточку на «полку с бутылкой» и «описание». Сильнее структурирует сетку каталога, полезно, когда карточек много.</p>
<div class="card-whitebg-grid">
<article class="product-card product-card--white-split">
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
<div class="product-meta">
<span class="tag tag--filled">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 product-card--white-split">
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
<div class="product-meta">
<span class="tag tag--filled">Toscana</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 product-card--white-split">
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
<div class="product-meta">
<span class="tag tag--filled">Piemonte</span>
<h3>Marchesi Barolo</h3>
<p>Italy · Red dry · 2018 · 0.75 L</p>
</div>
<div class="product-footer">
<strong>5 180 ₽</strong>
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
</div>
</article>
</div>
</section>
<!-- Wide F -->
<section class="card-whitebg-block" aria-labelledby="whitebg-f">
<p class="eyebrow">Variant F · wide / catalog</p>
<h2 id="whitebg-f">Широкая строка каталога, белая</h2>
<p class="variant-note">Горизонтальный формат B2B-каталога на белом: фото слева, описание в центре, цена и CTA справа. Тонкий контур вокруг строки. Бутылки с белым PNG встают без «коробок».</p>
<div class="catalog-card-variants">
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Wide · outline</p>
<div class="product-card product-card--list product-card--white-wide">
<a class="product-image" href="product.html" aria-label="Chateau Laroque Grand Cru">
<img src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
</a>
<div class="product-info">
<h3>Chateau Laroque Grand Cru, 0.75 л, 2019</h3>
<p class="product-origin">Красное сухое · Bordeaux · Франция</p>
<p>Купаж Merlot / Cabernet Franc · 13.5%</p>
<p>Артикул: 00081538 · Упаковка: 6 шт.</p>
</div>
<div class="product-buy">
<strong>3 890 ₽</strong>
<a class="button button--primary" href="product.html">В корзину</a>
</div>
</div>
</article>
</div>
</section>
<!-- Wide G -->
<section class="card-whitebg-block" aria-labelledby="whitebg-g">
<p class="eyebrow">Variant G · wide split</p>
<h2 id="whitebg-g">Split-строка: белое фото + тёплое описание</h2>
<p class="variant-note">Фото живёт в белом окне-«полке», справа — тёплый #F5F0E8 info-блок с ценой. Сильнее разделяет ассортимент и метаданные, удобно для плотных каталожных сеток.</p>
<div class="catalog-card-variants">
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Wide · split</p>
<div class="product-card product-card--list product-card--white-wide-split">
<a class="product-image" href="product.html" aria-label="Brunello di Montalcino">
<img src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
</a>
<div class="product-info">
<h3>Brunello di Montalcino, 0.75 л, 2018</h3>
<p class="product-origin">Красное сухое · Toscana · Италия</p>
<p>100% Sangiovese · 14%</p>
<p>Артикул: 00080768 · Упаковка: 6 шт.</p>
</div>
<div class="product-buy">
<strong>4 240 ₽</strong>
<a class="button button--primary" href="product.html">В корзину</a>
</div>
</div>
</article>
</div>
</section>
<!-- Wide H -->
<section class="card-whitebg-block" aria-labelledby="whitebg-h">
<p class="eyebrow">Variant H · wide hairline</p>
<h2 id="whitebg-h">Строка с золотой разделительной линией</h2>
<p class="variant-note">Весь фон белый, фото отделено от текстовой части тонкой золотой вертикальной линией. Самый «editorial» wide-вариант — читается как строка винной карты.</p>
<div class="catalog-card-variants">
<article class="catalog-card-sample">
<p class="catalog-card-sample__label">Wide · hairline</p>
<div class="product-card product-card--list product-card--white-wide-hairline">
<a class="product-image" href="product.html" aria-label="Dr. Loosen Riesling">
<img src="assets/images/00073820_1.png" alt="Dr. Loosen Riesling" />
</a>
<div class="product-info">
<h3>Dr. Loosen Riesling, 0.75 л, 2022</h3>
<p class="product-origin">Белое полусухое · Mosel · Германия</p>
<p>100% Riesling · 8.5%</p>
<p>Артикул: 00073820 · Упаковка: 6 шт.</p>
</div>
<div class="product-buy">
<strong>2 990 ₽</strong>
<a class="button button--primary" href="product.html">В корзину</a>
</div>
</div>
</article>
</div>
</section>
<section class="card-whitebg-block" aria-labelledby="whitebg-summary">
<p class="eyebrow">Резюме</p>
<h2 id="whitebg-summary">Какой брать</h2>
<p class="variant-note">Сеточные (плитки): для каталога и плотной сетки — <strong>A (outline)</strong> или <strong>E (split)</strong>; для главной и подборок — <strong>B (elevated)</strong> или <strong>C (hairline)</strong>; <strong>D (framed)</strong> — промежуточный. Широкие (каталог-строки): <strong>F (outline)</strong> как дефолт B2B, <strong>G (split)</strong> когда нужно визуально отделить метаданные, <strong>H (hairline)</strong> для editorial-подборок.</p>
</section>
</div>
</main>

9
src/product.njk
View File

@ -4,6 +4,15 @@ layout: layouts/default
permalink: /product.html
---
<main class="section">
<nav class="breadcrumbs container" data-v2-only="breadcrumbs" aria-label="Хлебные крошки">
<a href="index.html">Главная</a>
<span aria-hidden="true">/</span>
<a href="catalog.html">Каталог</a>
<span aria-hidden="true">/</span>
<a href="#">Bordeaux</a>
<span aria-hidden="true">/</span>
<span aria-current="page">Chateau Laroque Grand Cru</span>
</nav>
<div class="container product-detail">
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
<section class="detail-copy">

1172
ui-kit.html
View File

File diff suppressed because it is too large Load Diff