feat: добавить страницы и фрагменты для улучшения структуры шаблонов

- Добавлены страницы "Услуги", "Доставка", "Гарантия", "Контакты" с view и URL
- Вынесены hero, advantages, и о нас в отдельные фрагменты
- Обновлены header и footer для активных ссылок и адаптивности
- Добавлен normalize.css для унификации стилей

templates/home/_fragments/about.html

@@ -0,0 +1,57 @@
+{% load static %}
+
+<section class="about-section">
+    <div class="container">
+        <h2 class="about-title">О нас</h2>
+        <div class="about-left">
+            <div class="about-left-block">
+                <p class="about-left-subtitle">С 2000 года мы — не просто магазин сантехники, а надёжный партнёр для
+                    тех, кто ценит комфорт,
+                    качество и
+                    спокойствие.</p>
+                <h3 class="about-left-suggestion">Мы предлагаем:</h3>
+                <div class="about-left-list">
+                    <div class="about-left-list-item">
+                        <div class="about-left-list-item-number">1</div>
+                        <div class="about-left-list-item-content">
+                            <span class="about-left-list-item-content-title">Сантехническое оборудование</span>
+                            <span class="about-left-list-item-content-desc">Смесители, унитазы, мойки, душевые, умывальники, система фильтрации воды</span>
+                        </div>
+                    </div>
+                    <div class="about-left-list-item">
+                        <div class="about-left-list-item-number">2</div>
+                        <div class="about-left-list-item-content">
+                            <span class="about-left-list-item-content-title">Предметы декора</span>
+                            <div class="about-left-list-item-content-desc">Зеркала, ролл-маты, дозаторы, корзины,
+                                разделочные доски, система
+                                разделения мусора
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-right about-right">
+            <div class="about-right-block">
+                <p class="about-right-text">
+                    Мы работаем только с проверенными поставщиками — европейскими и российскими
+                    брендами, чья продукция прошла испытание временем, реальными квартирами и сотнями довольных
+                    клиентов.</p>
+                <div class="about-right-stats">
+                    <div class="about-right-stats-item">
+                        <p class="about-right-stats-item-num">20+</p>
+                        <p class="about-right-stats-item-label">лет работы</p>
+                    </div>
+                    <div class="about-right-stats-item">
+                        <span class="about-right-stats-item-num">45 000+</span>
+                        <span class="about-right-stats-item-label">довольных покупателей</span>
+                    </div>
+                    <div class="about-right-stats-item">
+                        <span class="about-right-stats-item-num">5600+</span>
+                        <span class="about-right-stats-item-label">товаров</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

templates/home/_fragments/advantages.html

@@ -0,0 +1,42 @@
+<!-- ADVANTAGES -->
+<section class="advantages">
+    <div class="container">
+        <div class="advantages-list">
+            <h2 class="advantages-title">ПОЧЕМУ ВЫБИРАЮТ НАС?</h2>
+            <div class="advantages-item">
+                <div class="advantages-item-number">1</div>
+                <h3 class="advantages-item-title">КАЧЕСТВЕННЫЙ ТОВАР</h3>
+                <p class="advantages-item-subtitle">Работаем с проверенными поставщиками</p>
+            </div>
+            <div class="advantages-item">
+                <div class="advantages-item-number">2</div>
+                <h3 class="advantages-item-title">ЧЕСТНАЯ ГАРАНТИЯ</h3>
+                <p class="advantages-item-subtitle">Работаем с проверенными поставщиками</p>
+            </div>
+            <div class="advantages-item">
+                <div class="advantages-item-number">3</div>
+                <h3 class="advantages-item-title">БЫСТРАЯ ДОСТАВКА</h3>
+                <p class="advantages-item-subtitle">Огромный выбор сантехники в наличии и доставка со склада</p>
+            </div>
+        </div>
+
+        <div class="advantages-cards">
+            <div class="advantages-card advantages-card-left">
+                <div class="advantages-card-content">
+                    <div class="flex-right">
+                        <div class="advantages-card-splash">Новинки в каталоге</div>
+                        <h2 class="advantages-card-title text-align-right">Сантехническое оборудование</h2>
+                        <a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
+                    </div>
+                </div>
+            </div>
+            <div class="advantages-card advantages-card-right">
+                <div class="advantages-card-content">
+                    <div class="advantages-card-splash">Большая распродажа</div>
+                    <h2 class="advantages-card-title">Предметы декора</h2>
+                    <a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

templates/home/_fragments/banner.html

@@ -0,0 +1,8 @@
+<section class="kitchen-banner container">
+    <div class="kitchen-content">
+        <p>Успей заказать с большой выгодой и получите доставку в подарок!</p>
+        <h2>ГОТОВОЕ РЕШЕНИЕ ДЛЯ КУХНИ</h2>
+        <a href="#" class="active-page">Перейти</a>
+    </div>
+    {#    <img src="{% static 'img/kitchen-banner.jpg' %}" alt="">#}
+</section>

templates/home/_fragments/faq.html

@@ -0,0 +1,51 @@
+<section class="faq-section container">
+    <h2>ОТВЕТЫ НА ВОПРОСЫ</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="#">
+            <div>?</div>
+            ЗАДАТЬ ВОПРОС
+        </a>
+    </div>
+</section>

templates/home/_fragments/hero.html

@@ -0,0 +1,25 @@
+{% load static %}
+<!-- HERO -->
+<section class="hero">
+    <div class="container">
+        <div class="flex-right">
+            <div class="hero-content">
+                <h1 class="hero-title">ДОБАВЬТЕ ЭСТЕТИЧНОСТИ<br>В СВОЙ ИНТЕРЬЕР</h1>
+                <div class="hero-subtitle-container">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor"
+                         class="bi bi-check-circle hero-checkmark" viewBox="0 0 16 16">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
+                        <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path>
+                    </svg>
+                    <p class="hero-subtitle">Подбор сантехнического оборудования на заказ.
+                        <br>А также огромный выбор инсталляций и декора
+                        <br>в наличии на складах города с быстрой доставкой
+                    </p>
+                </div>
+                <div class="hero-button-container">
+                    <a href="/catalog/" class="hero-button">ПЕРЕЙТИ В КАТАЛОГ</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

templates/home/_fragments/popular-products.html

@@ -0,0 +1,194 @@
+{% load static %}
+
+<section class="products-section container">
+    <h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
+    <div class="products-grid">
+        <article class="product product-1">
+            <div class="product-actions">
+                <button title="В избранное">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                         class="bi bi-heart" viewBox="0 0 16 16">
+                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"></path>
+                    </svg>
+                </button>
+                <button title="В корзину">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                         class="bi bi-cart2" viewBox="0 0 16 16">
+                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
+                    </svg>
+                </button>
+            </div>
+        </article>
+
+        <article class="product product-2">
+
+        </article>
+
+        <article class="product product-3">
+
+        </article>
+
+        <article class="product product-4">
+
+        </article>
+
+        <article class="product product-5">
+
+        </article>
+
+        <article class="product product-6">
+
+        </article>
+    </div>
+    {% comment %}
+        <!-- Card 1 — tall -->
+        <div class="product-card tall">
+            <img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">
+
+            <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>{% endcomment %}
+
+    <div class="products-footer">
+        <a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
+    </div>
+</section>

templates/home/contacts.html

@@ -0,0 +1,16 @@
+{% extends "_layouts/base.html" %}
+{% load static %}
+
+{% block title %}Главная{% endblock %}
+
+{% block add_css %}
+
+{% endblock %}
+
+{% block content %}
+    {% include "_fragments/header.html" %}
+
+    {#    TODO   #}
+    В разработке
+    {% include "_fragments/footer.html" %}
+{% endblock %}

templates/home/index.html

@@ -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 %}

templates/home/shipping.html

@@ -0,0 +1,16 @@
+{% extends "_layouts/base.html" %}
+{% load static %}
+
+{% block title %}Главная{% endblock %}
+
+{% block add_css %}
+
+{% endblock %}
+
+{% block content %}
+    {% include "_fragments/header.html" %}
+
+    {#    TODO   #}
+    В разработке
+    {% include "_fragments/footer.html" %}
+{% endblock %}

templates/home/warranty.html

@@ -0,0 +1,16 @@
+{% extends "_layouts/base.html" %}
+{% load static %}
+
+{% block title %}Главная{% endblock %}
+
+{% block add_css %}
+
+{% endblock %}
+
+{% block content %}
+    {% include "_fragments/header.html" %}
+
+    {#    TODO   #}
+    В разработке
+    {% include "_fragments/footer.html" %}
+{% endblock %}