Files
santeh-ray/templates/home/index.html
Azimkin 1eff7c6227 feat: добавить home app и базовую структуру шаблонов
- Создано Django app 'home' с view, urls, models
- Добавлены шаблоны: base layout, header/footer fragments, index page
- Настроены STATICFILES_DIRS и TEMPLATES в settings.py
- Подключены URLS всех apps (home, items, orders, users)
- Добавлены статические файлы (CSS, изображения)
2026-03-23 19:00:17 +01:00

311 lines
15 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.
{% extends "_layouts/base.html" %}
{% load static %}
{% block title %}Главная{% endblock %}
{% block content %}
<!-- HEADER -->
{% include "_fragments/header.html" %}
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- POPULAR PRODUCTS -->
<section class="products-section">
<h2 class="section-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
<div class="products-grid">
<!-- 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" %}
{% endblock %}