Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.
-
-
-
-
-
-
-
-
-
DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.
-
Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.
-
Как устроен подход
-
Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.
-
-
- 01
Удобный каталог
Фильтры по типу, региону, производителю, сорту, году, объему и стилю.
- 02
Персональный подход
Быстрая коммуникация с менеджером и подборки под формат клиента.
- 03
Склады в регионах
Инфраструктура для регулярных поставок и управления доступностью.
- 04
Собственная доставка
Контроль логистики и аккуратная работа с профессиональными заказами.
-
-
-
-
-
-
-
Portfolio
Винные дома и регионы
-
Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.
Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.
-
-
-
-
-
-
-
-
- 01
-
Структура статьи
-
Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.
-
-
Заголовок: конкретный, с именем производителя, региона или события.
-
Лид: 1-2 предложения, раскрывает главный повод.
-
Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.
-
Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.
-
-
-
- 02
-
Заголовки
-
Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.
-
-
Оптимально: 55-90 символов.
-
Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.
-
Избегать пустых формул: «уникальная история», «легендарное событие» без факта.
-
Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.
-
-
-
- 03
-
Текст
-
Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.
-
-
Абзац: 350-650 знаков.
-
Лид: до 280 знаков.
-
Новость: 3 000-5 500 знаков.
-
История производителя: 5 000-8 000 знаков.
-
Цифры, годы, награды и сорта проверять отдельно.
-
-
-
- 04
-
Фотографии
-
Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.
-
-
Hero: горизонтальное фото от 1600px по ширине.
-
Внутренние фото: от 1200px, без сильной компрессии.
-
Для карточек: предмет или бутылка должны быть читаемы на мобильном.
-
Не использовать тёмные, размытые, случайно обрезанные изображения.
-
Обязательно писать alt: кто/что изображено и где.
-
-
-
- 05
-
Композиция
-
Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.
-
-
Не ставить подряд больше 4 текстовых абзацев без паузы.
-
Цитаты использовать только если они усиливают материал.
-
Сайдбар может содержать факты: страна, регион, сорт, год, награда.
-
Финальный CTA должен быть связан с каталогом или менеджером.
-
-
-
- 06
-
SEO и handoff
-
Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.
-
-
Title: до 60 символов, включает бренд или тему.
-
Description: 140-160 символов.
-
URL: латиница, короткий slug.
-
Изображения называть по смыслу, а не `photo-final-2`.
-
В CMS хранить дату, автора/раздел, теги и связанные товары.
-
-
-
-
-
-
-
-
-
Pre-publish checklist
-
Проверка перед публикацией
-
-
-
Заголовок отражает конкретный повод и не звучит как реклама.
-
В лиде понятна ценность материала для профессиональной аудитории.
-
Все годы, имена, апелласьоны и награды проверены.
-
Есть минимум 2-4 качественные фотографии с alt-текстами.
-
Финал ведёт к каталогу, производителю, товару или контакту с менеджером.
Удобно для запросов прайса, карточек производителей и B2B-документов.
-
-
- Юридическая информация
-
Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.
-
-
-
-
Требуется аккаунт
-
Заявка доступна после входа
-
Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.
Удобно для запросов прайса, карточек производителей и B2B-документов.
-
-
- Юридическая информация
-
Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.
Villa Raiano: от оливкового масла к одному из лучших фиано Италии
-
6 апреля, 2026Ирпиния, Кампания
-
-
-
-
-
-
-
-
-
-
-
-
Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.
-
На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.
-
-
-
-
-
-
-
-
-
-
-
-
-
В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.
-
«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.
-
Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».
-
-
-
-
-
-
-
-
-
-
-
-
-
-
В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.
-
«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».
-
Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.
-
Чем не повод самому проверить мнение Gambero Rosso?
Villa Raiano: от оливкового масла к одному из лучших Fiano Италии
-
История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.
-
-
-
-
-
-
-
-
-
Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.
-
Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.
-
Почему Fiano di Avellino
-
Фьяно из Авеллино ценят за минеральность, плотную фактуру и способность к развитию в бутылке. В молодых винах часто появляются цитрусовые, груша, персик, травы и медовые оттенки; с возрастом они становятся глубже, прянее и сложнее.
-
Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.
-
Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.
-
Что показать в каталоге
-
Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.
@@ -269,6 +312,7 @@
КаталогКарточка товараВарианты карточек
+ Карточка на беломНовостьНовость v2Ред. гайд
diff --git a/src/css/v2.css b/src/css/v2.css
index 8eaed34..4560ff4 100644
--- a/src/css/v2.css
+++ b/src/css/v2.css
@@ -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;
+}
diff --git a/src/js/design-switcher.js b/src/js/design-switcher.js
index 572a3d5..863ab1c 100644
--- a/src/js/design-switcher.js
+++ b/src/js/design-switcher.js
@@ -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 =
- 'Главная' +
- '/' +
- 'Каталог' +
- '/' +
- 'Bordeaux' +
- '/' +
- 'Chateau Laroque Grand Cru';
- 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();
}
diff --git a/src/product-card-white.njk b/src/product-card-white.njk
new file mode 100644
index 0000000..fa3d632
--- /dev/null
+++ b/src/product-card-white.njk
@@ -0,0 +1,329 @@
+---
+title: "DP Trade — Product card · White background variants"
+layout: layouts/default
+permalink: /product-card-white.html
+bodyClass: compact-type
+---
+
+
+
+
+
UI-kit / Product cards
+
Карточка товара на белом фоне
+
+
Часть изображений бутылок сохранена на чистом белом фоне — под такие фото нужны карточки, где блок-медиа тоже белый. Ниже несколько вариантов решения: от минимального контура до акцентной рамки и split-композиции.
+
+
+
+
+
Variant A · minimal outline
+
Чистый белый с тонкой рамкой
+
Карточка и медиа на одном белом фоне, разделения нет. Только 1px нейтральный контур, чтобы отделить её от страницы. Самый нейтральный и «каталожный» вариант — бутылки на белом PNG встают без швов.
+
+
+
+
+ Bordeaux
+
Chateau Laroque Grand Cru
+
France · Red dry · 2019 · 0.75 L
+
+
+
+
+
+
+ Toscana
+
Brunello di Montalcino
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+ Mosel
+
Dr. Loosen Riesling
+
Germany · White off-dry · 2022 · 0.75 L
+
+
+
+
+
+
+
+
+
Variant B · elevated
+
Белая карточка с мягкой тенью
+
Без рамки, но с лёгкой тенью. Карточка «приподнята» над тёплым фоном страницы — премиальнее, чем outline. Хорошо работает, когда страница сама тёплая кремовая (V2 background), а карточка должна ощущаться как бумага.
+
+
+
+
+ Bordeaux
+
Chateau Laroque Grand Cru
+
France · Red dry · 2019 · 0.75 L
+
+
+
+
+
+
+ Piemonte
+
Marchesi Barolo
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+ Toscana
+
Brunello di Montalcino
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+
+
+
Variant C · hairline divider
+
Белое медиа + золотая тонкая линия
+
Медиа и тело на едином белом фоне, разделены только hairline-линией золотого акцента. Editorial-вайб, без тяжёлых блоков. Подходит для флагманских подборок и промо-полок.
+
+
+
+
+ Mosel
+
Dr. Loosen Riesling
+
Germany · White off-dry · 2022 · 0.75 L
+
+
+
+
+
+
+ Bordeaux
+
Chateau Laroque Grand Cru
+
France · Red dry · 2019 · 0.75 L
+
+
+
+
+
+
+ Toscana
+
Brunello di Montalcino
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+
+
+
Variant D · framed media
+
Белое медиа в бордовой рамке
+
Белый фон сохраняется, но медиа-блок обводится тонкой бордовой рамкой. Бутылка визуально «заперта» в окне и не растворяется в странице. Даёт больше структуры, чем hairline, не уходя в тяжёлый outline.
+
+
+
+
+ Piemonte
+
Marchesi Barolo
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+ Mosel
+
Dr. Loosen Riesling
+
Germany · White off-dry · 2022 · 0.75 L
+
+
+
+
+
+
+ Toscana
+
Brunello di Montalcino
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+
+
+
Variant E · split
+
Split: белое медиа + тёплое тело
+
Медиа остаётся на белом, а info-часть уходит на тёплый #F5F0E8. Визуально делит карточку на «полку с бутылкой» и «описание». Сильнее структурирует сетку каталога, полезно, когда карточек много.
+
+
+
+
+ Bordeaux
+
Chateau Laroque Grand Cru
+
France · Red dry · 2019 · 0.75 L
+
+
+
+
+
+
+ Toscana
+
Brunello di Montalcino
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+ Piemonte
+
Marchesi Barolo
+
Italy · Red dry · 2018 · 0.75 L
+
+
+
+
+
+
+
+
+
Variant F · wide / catalog
+
Широкая строка каталога, белая
+
Горизонтальный формат B2B-каталога на белом: фото слева, описание в центре, цена и CTA справа. Тонкий контур вокруг строки. Бутылки с белым PNG встают без «коробок».
Фото живёт в белом окне-«полке», справа — тёплый #F5F0E8 info-блок с ценой. Сильнее разделяет ассортимент и метаданные, удобно для плотных каталожных сеток.
Весь фон белый, фото отделено от текстовой части тонкой золотой вертикальной линией. Самый «editorial» wide-вариант — читается как строка винной карты.
Сеточные (плитки): для каталога и плотной сетки — A (outline) или E (split); для главной и подборок — B (elevated) или C (hairline); D (framed) — промежуточный. Широкие (каталог-строки): F (outline) как дефолт B2B, G (split) когда нужно визуально отделить метаданные, H (hairline) для editorial-подборок.
- Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade.
- Структура повторяет Figma-файл и использует критичный naming format.
-
Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.
-
-
-
- Ready
- Catalog List Cards
-
Есть варианты, состояния, фоны изображений, shadows и реальная страница для проверки.
-
-
- Ready
- Navigation / Mega-menu
-
Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.
-
-
- Ready
- Foundations
-
Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.
-
-
- Review
- Forms / Inputs
-
Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.
-
-
- Ready
- Templates
-
Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.
-
-
- Review
- Responsive QA
-
Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.
-
-
-
-
- Production rule
-
Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.
-
-
- Screen rule
-
Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.
-
-
- Content rule
-
Все изображения должны иметь понятный alt, стабильные размеры контейнера и не ломать layout на mobile.
-
-
-
-
Readiness Matrix
-
-
-
-
-
Раздел
-
Anatomy
-
States
-
Usage
-
Responsive
-
Status
-
-
-
-
-
Foundations
-
Да
-
Да
-
Да
-
Да
-
Ready
-
-
-
Buttons
-
Да
-
Partial
-
Да
-
Да
-
Review
-
-
-
Product Cards
-
Да
-
Да
-
Да
-
Да
-
Ready
-
-
-
Navigation
-
Да
-
Partial
-
Да
-
Partial
-
Review
-
-
-
Forms / Controls
-
Да
-
Partial
-
Да
-
Да
-
Review
-
-
-
Templates / Screens
-
Да
-
Да
-
Да
-
Да
-
Ready
-
-
-
-
-
-
-
-
-
-
01 Foundations
-
База системы
-
-
-
-
Colors
-
-
-
- Color / Primary / Wine / 100
- #4B0F24
-
-
-
- Color / Primary / Wine / 80
- #6D1C36
-
-
-
- Color / Neutral / Black
- #161616
-
-
-
- Color / Neutral / Gray / 600
- #66605F
-
-
-
- Color / Neutral / Gray / 300
- #D8D3CF
-
-
-
- Color / Background / Base
- #F4F6F9
-
-
-
- Color / Accent / Gold
- #B9965B
-
-
-
-
- Text roles
-
`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.
-
-
- Surface roles
-
`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.
-
-
- Brand roles
-
`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.
-
-
- State roles
-
Error использует #A33A2F. Success/review/draft пока локальные в UI-kit; перед разработкой их нужно вынести в state tokens.
-
-
-
-
-
-
Typography
-
- Text / Heading / H1 / Montserrat / 48 / 56
-
Rare wines for trade
-
-
- Text / Heading / H2 / Montserrat / 36 / 44
-
Catalog collections
-
-
- Text / Heading / H3 / Montserrat / 28 / 36
-
Producer selection
-
-
- Text / Body / Regular / Inter / 16 / 24
-
Вина, регионы, партии и коммерческие условия в единой системе.
-
-
- Text / Label / Caps / Inter / 12 / 16
-
FEATURED REGION
-
-
-
- Hero / H1
-
Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.
-
-
- Catalog / Product title
-
Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.
-
-
- Article / Lead
-
Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.
-
-
- Button / Label
-
Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.
Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.
-
-
- Pattern / About Page / Default
-
Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.
-
-
- Pattern / Contacts / Form
-
Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.
-
-
- Pattern / Contacts / Auth Gate
-
Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.
-
-
- Pattern / Editorial Guidelines
-
Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.
-
-
-
-
-
-
-
-
-
04 Templates
-
Шаблоны
-
-
Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.
- Status: Draft, needs final product content model.
-
-
-
-
-
-
-
-
05 Screens
-
Реальные экраны
-
-
Этот раздел ведёт на конкретные HTML-страницы проекта. В отличие от Templates, здесь фиксируются уже собранные экраны с реальным контентом, header/footer и состояниями.
- 
- 
- 
- 
- 
+ 