dp-trade-UI-kit/about.html

319 lines
21 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 — О компании</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=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/site.css" />
</head>
<body class="compact-type">
<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>
<a href="contacts-auth.html">Контакты auth</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>
<a href="contacts-auth.html">Контакты auth</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 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>
<footer class="site-footer">
<div class="container footer-container">
<section class="footer-main">
<div class="footer-brand-block">
<a class="footer-brand" 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>
<p class="footer-brand-subtitle">Территория качественного вина</p>
</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="contacts-auth.html">Контакты auth</a></li>
<li><a href="#">Склады</a></li>
<li><a href="#">Реквизиты</a></li>
</ul>
</article>
</section>
<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>
<div class="social-links" aria-label="Социальные сети">
<a href="#" aria-label="Telegram">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
</svg>
</a>
<a href="#" aria-label="VK">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
</svg>
</a>
</div>
</article>
<section class="footer-legal" aria-label="Правовая информация">
<p>
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
Дистанционная продажа алкогольной продукции не осуществляется.
<a href="#">Подробнее о правовой информации</a>
</p>
<p>© 2026 DP-Trade</p>
</section>
</section>
</div>
</footer>
</div>
</body>
</html>