dp-trade-UI-kit/index.html

307 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DP Trade — Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/site.css" />
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="container header-top">
<a class="brand-logo" href="index.html" aria-label="DP Trade">
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33" />
</a>
<form class="search-bar" action="#" role="search">
<button type="submit" aria-label="Поиск"></button>
<input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск" />
</form>
<div class="header-actions">
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
<a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
<path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
</svg>
</a>
<a class="header-icon header-icon--air" href="#" aria-label="Корзина">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
<path d="M9.4 19.2h.1M16.8 19.2h.1" />
</svg>
</a>
</div>
</div>
<nav class="container main-nav" aria-label="Основная навигация">
<a href="catalog.html">Каталог</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">Регион</p>
<h2>Вина по географии</h2>
</div>
<p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
</div>
<div class="menu-grid">
<article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80" alt="Виноградник на холмах" />
<p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
</article>
<article class="menu-column">
<p class="section-title">Страны</p>
<a href="#">Старый Свет</a><a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Новый Свет</a><a href="#">Чили</a><a href="#">Аргентина</a>
</article>
<article class="menu-column appellations">
<p class="section-title">Апелласьоны</p>
<div class="appellation-group"><a class="country-link" href="#">Франция</a><a href="#">Bordeaux</a><a href="#">Medoc</a><a href="#">Margaux</a><a href="#">Pauillac</a><a href="#">Saint-Emilion</a></div>
<div class="appellation-group"><a class="country-link" href="#">Италия</a><a href="#">Toscana</a><a href="#">Chianti</a><a href="#">Brunello di Montalcino</a><a href="#">Piemonte</a></div>
</article>
<article class="menu-column">
<p class="section-title">Популярные регионы</p>
<div class="popular-list"><a href="#">Бордо</a><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">Вино <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">Вино</p>
<h2>Каталог по типу и стилю</h2>
</div>
<p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
</div>
<div class="menu-grid">
<article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Бокалы вина" />
<p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
</article>
<article class="menu-column">
<p class="section-title">По типу</p>
<a href="#">Красное</a><a href="#">Белое</a><a href="#">Розовое</a><a href="#">Игристое</a><a href="#">Шампанское</a>
</article>
<article class="menu-column">
<p class="section-title">По стилю</p>
<a href="#">Сухие</a><a href="#">Полусухие</a><a href="#">Полусладкие</a><a href="#">Сладкие</a><a href="#">Брют</a><a href="#">Экстра брют</a>
</article>
<article class="menu-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">Крепкий алкоголь <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">Spirits</p>
<h2>Крепкий алкоголь</h2>
</div>
<p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
</div>
<div class="menu-grid">
<article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1527281400683-1aae777175f8?auto=format&fit=crop&w=900&q=80" alt="Крепкий алкоголь в бокале" />
<p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
</article>
<article class="menu-column">
<p class="section-title">Категории</p>
<a href="#">Виски</a><a href="#">Коньяк</a><a href="#">Арманьяк</a><a href="#">Ром</a><a href="#">Джин</a><a href="#">Водка</a><a href="#">Текила</a><a href="#">Ликеры</a>
</article>
<article class="menu-column">
<p class="section-title">По стилю</p>
<a href="#">Односолодовый</a><a href="#">Купажированный</a><a href="#">Выдержанный</a><a href="#">Пряный</a><a href="#">Дижестив</a><a href="#">Для коктейлей</a>
</article>
<article class="menu-column">
<p class="section-title">Популярное</p>
<div class="popular-list"><a href="#">Single Malt</a><a href="#">Cognac VSOP</a><a href="#">Premium Gin</a><a href="#">Bar Selection</a></div>
</article>
</div>
</section>
</div>
<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">Производители</p>
<h2>Дома, хозяйства и бренды</h2>
</div>
<p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</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>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
</article>
<article class="menu-column">
<p class="section-title">По странам</p>
<a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Португалия</a><a href="#">Чили</a><a href="#">Аргентина</a>
</article>
<article class="menu-column">
<p class="section-title">Избранные</p>
<a href="#">Chateau Laroque</a><a href="#">Marchesi Antinori</a><a href="#">Torres</a><a href="#">Dr. Loosen</a><a href="#">Catena Zapata</a><a href="#">Penfolds</a>
</article>
<article class="menu-column">
<p class="section-title">Форматы</p>
<div class="popular-list"><a href="#">Семейные хозяйства</a><a href="#">Grand Cru</a><a href="#">Органика</a><a href="#">Эксклюзив DP Trade</a></div>
</article>
</div>
</section>
</div>
<a href="#">Поставки</a>
<a href="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</a>
<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">
<div class="mega-intro">
<div>
<p class="eyebrow">Design system</p>
<h2>UI-kit и демо-страницы</h2>
</div>
<p>Быстрый доступ к живым страницам, компонентам, паттернам и токенам для разработки.</p>
</div>
<div class="menu-grid">
<article class="menu-column visual-column">
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Демонстрация винного каталога" />
<p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
</article>
<article class="menu-column">
<p class="section-title">Demo pages</p>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
</article>
<article class="menu-column">
<p class="section-title">UI-kit sections</p>
<a href="ui-kit.html#foundations">Foundations</a><a href="ui-kit.html#components">Components</a><a href="ui-kit.html#patterns">Patterns</a><a href="ui-kit.html#templates">Templates</a><a href="ui-kit.html#screens">Screens</a>
</article>
<article class="menu-column">
<p class="section-title">Dev handoff</p>
<div class="popular-list"><a href="ui-kit.html#tokens">Tokens</a><a href="ui-kit.html#components">States</a><a href="ui-kit.html#patterns">Layouts</a><a href="ui-kit.html">Full UI-kit</a></div>
</article>
</div>
</section>
</div>
</nav>
</header>
<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/00073820_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>
<footer class="site-footer">
<div class="container footer-container">
<section class="footer-main">
<div class="footer-left">
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="contacts.html">Связаться с менеджером</a></article>
</div>
<section class="footer-nav" aria-label="Навигация по разделам">
<article class="nav-group"><h2>Каталог</h2><ul><li><a href="catalog.html">Вина по регионам</a></li><li><a href="#">Франция</a></li><li><a href="#">Италия</a></li><li><a href="#">Испания</a></li><li><a href="#">Новинки</a></li></ul></article>
<article class="nav-group"><h2>Клиентам</h2><ul><li><a href="#">Доставка</a></li><li><a href="#">Оплата</a></li><li><a href="#">Как купить</a></li><li><a href="#">Скачать каталог</a></li></ul></article>
<article class="nav-group"><h2>Компания</h2><ul><li><a href="about.html">О компании</a></li><li><a href="contacts.html">Контакты</a></li><li><a href="#">Склады</a></li><li><a href="#">Реквизиты</a></li></ul></article>
<section class="footer-legal" aria-label="Правовая информация"><p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. Дистанционная продажа алкогольной продукции не осуществляется. <a href="#">Подробнее о правовой информации</a></p><p>© 2026 DP-Trade</p></section>
</section>
</section>
</div>
</footer>
</div>
</body>
</html>