feat: добавить страницы и фрагменты для улучшения структуры шаблонов
- Добавлены страницы "Услуги", "Доставка", "Гарантия", "Контакты" с view и URL - Вынесены hero, advantages, и о нас в отдельные фрагменты - Обновлены header и footer для активных ссылок и адаптивности - Добавлен normalize.css для унификации стилей
This commit is contained in:
@@ -3,309 +3,25 @@
|
||||
|
||||
{% block title %}Главная{% endblock %}
|
||||
|
||||
{% block add_css %}
|
||||
<link rel="stylesheet" href="{% static "css/index.css" %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- HEADER -->
|
||||
{% include "_fragments/header.html" %}
|
||||
<!-- HEADER -->
|
||||
{% include "_fragments/header.html" with active="home" %}
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg-circle"></div>
|
||||
<img class="hero-img" src="{% static 'img/santeh-equipment.jpg' %}" alt="Сантехника">
|
||||
<div class="hero-content">
|
||||
<h1>ДОБАВЬТЕ ЭСТЕТИЧНОСТИ<br>В СВОЙ ИНТЕРЬЕР</h1>
|
||||
<div class="hero-check">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#36213e" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="9 12 11 14 15 10"/>
|
||||
</svg>
|
||||
<p>Подбор сантехнического оборудования на заказ.<br>А также огромный выбор инсталляций и декора<br>в наличии на складах города с быстрой доставкой</p>
|
||||
</div>
|
||||
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
|
||||
</div>
|
||||
</section>
|
||||
{% include "home/_fragments/hero.html" %}
|
||||
|
||||
<!-- WHY US -->
|
||||
<section class="why-us">
|
||||
<h2 class="why-us-title">ПОЧЕМУ ВЫБИРАЮТ НАС?</h2>
|
||||
<div class="why-item">
|
||||
<div class="why-num">1</div>
|
||||
<h3>КАЧЕСТВЕННЫЙ ТОВАР</h3>
|
||||
<p>Работаем с проверенными поставщиками</p>
|
||||
</div>
|
||||
<div class="why-item">
|
||||
<div class="why-num">2</div>
|
||||
<h3>ЧЕСТНАЯ ГАРАНТИЯ</h3>
|
||||
<p>Работаем с проверенными поставщиками</p>
|
||||
</div>
|
||||
<div class="why-item">
|
||||
<div class="why-num alt">3</div>
|
||||
<h3>БЫСТРАЯ ДОСТАВКА</h3>
|
||||
<p>Огромный выбор сантехники в наличии и доставка со склада</p>
|
||||
</div>
|
||||
</section>
|
||||
{% include 'home/_fragments/advantages.html' %}
|
||||
|
||||
<!-- PROMO BANNERS -->
|
||||
<section class="promo-section">
|
||||
<div class="promo-card">
|
||||
<img src="{% static 'img/sanitary-equipment-promo.jpg' %}" alt="">
|
||||
<div class="promo-card-content">
|
||||
<div class="promo-tag">Новинки в каталоге</div>
|
||||
<h2>Сантехническое оборудование</h2>
|
||||
<a href="#" class="promo-link">Смотреть</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="promo-card">
|
||||
<img src="{% static 'img/decor-promo.jpg' %}" alt="">
|
||||
<div class="promo-card-content">
|
||||
<div class="promo-tag">Большая распродажа</div>
|
||||
<h2>Предметы декора</h2>
|
||||
<a href="#" class="promo-link">Смотреть</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include 'home/_fragments/about.html' %}
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about-section">
|
||||
<div class="about-left">
|
||||
<h2>О нас</h2>
|
||||
<p>С 2000 года мы — не просто магазин сантехники, а надёжный партнёр для тех, кто ценит комфорт, качество и спокойствие.</p>
|
||||
<h3>Мы предлагаем:</h3>
|
||||
<ul class="about-list">
|
||||
<li>
|
||||
<div class="num">1</div>
|
||||
<div class="li-content">
|
||||
<span class="li-title">Сантехническое оборудование</span>
|
||||
<span class="li-desc">Смесители, унитазы, мойки, душевые, умывальники, система фильтрации воды</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="num">2</div>
|
||||
<div class="li-content">
|
||||
<span class="li-title">Предметы декора</span>
|
||||
<div class="li-desc">Зеркала, ролл-маты, дозаторы, корзины, разделочные доски, система разделения мусора</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-right">
|
||||
<img src="{% static 'img/about-image.jpg' %}" alt="О нас">
|
||||
<p>Мы работаем только с проверенными поставщиками — европейскими и российскими брендами, чья продукция прошла испытание временем, реальными квартирами и сотнями довольных клиентов.</p>
|
||||
<div class="stats-row">
|
||||
<div class="stat">
|
||||
<span class="stat-num">20+</span>
|
||||
<span class="stat-label">лет работы</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-num">45 000+</span>
|
||||
<span class="stat-label">довольных покупателей</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-num">5600+</span>
|
||||
<span class="stat-label">товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{% static 'img/stats-image.jpg' %}" alt="">
|
||||
</div>
|
||||
</section>
|
||||
{% include 'home/_fragments/banner.html' %}
|
||||
|
||||
<!-- KITCHEN BANNER -->
|
||||
<div class="kitchen-banner">
|
||||
<div class="kitchen-content">
|
||||
<p>Успей заказать с большой выгодой и получите доставку в подарок!</p>
|
||||
<h2>ГОТОВОЕ РЕШЕНИЕ ДЛЯ КУХНИ</h2>
|
||||
<a href="#" class="btn-outline-light">Перейти</a>
|
||||
</div>
|
||||
<img src="{% static 'img/kitchen-banner.jpg' %}" alt="">
|
||||
</div>
|
||||
{% include 'home/_fragments/popular-products.html' %}
|
||||
|
||||
<!-- POPULAR PRODUCTS -->
|
||||
<section class="products-section">
|
||||
<h2 class="section-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
|
||||
<div class="products-grid">
|
||||
{% include 'home/_fragments/faq.html' %}
|
||||
|
||||
<!-- Card 1 — tall -->
|
||||
<div class="product-card tall">
|
||||
<img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Кухонная мойка</div>
|
||||
<div class="p-sub">Искусственный камень, врезная на столешницу</div>
|
||||
<div class="p-price">1600 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="product-card">
|
||||
<img class="product-card-img" src="{% static 'img/chopping-board.jpg' %}" alt="Разделочная доска" style="aspect-ratio:4/3;">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Разделочная доска</div>
|
||||
<div class="p-sub">Нержавеющая сталь</div>
|
||||
<div class="p-price">50 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 — tall -->
|
||||
<div class="product-card tall">
|
||||
<img class="product-card-img" src="{% static 'img/terra-mirror.jpg' %}" alt="Зеркало Terra">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Зеркало Terra</div>
|
||||
<div class="p-sub">Холодная подсветка, фронтальная</div>
|
||||
<div class="p-price">200 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="product-card">
|
||||
<img class="product-card-img" src="{% static 'img/toilet.jpg' %}" alt="Унитаз" style="aspect-ratio:4/3;">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Унитаз</div>
|
||||
<div class="p-sub">Напольный с бачком, безободковый</div>
|
||||
<div class="p-price">1600 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 (коврик) -->
|
||||
<div class="product-card">
|
||||
<img class="product-card-img" src="{% static 'img/rubber-mat.jpg' %}" alt="Коврик" style="aspect-ratio:4/3;">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Коврик для посуды</div>
|
||||
<div class="p-sub">Мгновенно впитывает воду</div>
|
||||
<div class="p-price">20 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 (смеситель) -->
|
||||
<div class="product-card">
|
||||
<img class="product-card-img" src="{% static 'img/mixer.jpg' %}" alt="Смеситель" style="aspect-ratio:4/3;">
|
||||
<div class="product-actions">
|
||||
<button title="В избранное">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="В корзину">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="p-name">Смеситель</div>
|
||||
<div class="p-sub">Однорычажный смеситель</div>
|
||||
<div class="p-price">340 руб</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="products-footer">
|
||||
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="faq-section">
|
||||
<h2 class="section-title">ОТВЕТЫ НА ВОПРОСЫ</h2>
|
||||
<div class="faq-grid">
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-icon">?</div>
|
||||
<div class="faq-body">
|
||||
<h4>Могу ли я отказаться от заказа при доставке?</h4>
|
||||
<p>Да, вы можете отказаться приобретать модель. В таком случае, просим уведомить специалиста магазина о отказе, не нарушать заводскую упаковку товара, чтобы он не утратил товарный вид. Но вы должны будете оплатить доставку товара, даже в случае отказа.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-icon">?</div>
|
||||
<div class="faq-body">
|
||||
<h4>Куда обращаться по гарантии?</h4>
|
||||
<p>В случае обнаружения недостатка товара при получении либо при его использовании в течении гарантийного срока, необходимо обратиться с письменной претензией на почту info@santehray.by или в наш магазин. Далее с вами свяжутся для уточнения подробностей.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-icon">?</div>
|
||||
<div class="faq-body">
|
||||
<h4>Можно ли покупать товары в рассрочку?</h4>
|
||||
<p>Да. У нас есть система кредитования, где вы можете приобрести модель в рассрочку полностью или частично. Для этого нужно обратиться в наш магазин и узнать подробности.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-icon">?</div>
|
||||
<div class="faq-body">
|
||||
<h4>Можно ли где-то лично посмотреть товары?</h4>
|
||||
<p>У нас есть физический магазин, который находится по адресу: Беларусь, г. Минск, ул. Тимирязева, д. 123, к.1, пав. 59, там вы сможете ознакомится со всем ассортиментом.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="faq-cta">
|
||||
<a href="#" class="btn-primary">ЗАДАТЬ ВОПРОС</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
{% include "_fragments/footer.html" %}
|
||||
{% include "_fragments/footer.html" %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user