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, изображения)
This commit is contained in:
2026-03-23 19:00:17 +01:00
parent 7c7060b56d
commit 1eff7c6227
31 changed files with 1188 additions and 3 deletions

0
home/__init__.py Normal file
View File

3
home/admin.py Normal file
View File

@@ -0,0 +1,3 @@
from django.contrib import admin
# Register your models here.

5
home/apps.py Normal file
View File

@@ -0,0 +1,5 @@
from django.apps import AppConfig
class HomeConfig(AppConfig):
name = 'home'

View File

3
home/models.py Normal file
View File

@@ -0,0 +1,3 @@
from django.db import models
# Create your models here.

3
home/tests.py Normal file
View File

@@ -0,0 +1,3 @@
from django.test import TestCase
# Create your tests here.

7
home/urls.py Normal file
View File

@@ -0,0 +1,7 @@
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='home'),
]

8
home/views.py Normal file
View File

@@ -0,0 +1,8 @@
from django.shortcuts import render
def index(request):
"""
Main index page view for the SantehRay e-commerce site
"""
return render(request=request, template_name='home/index.html', context={})

3
items/urls.py Normal file
View File

@@ -0,0 +1,3 @@
urlpatterns = []

3
orders/urls.py Normal file
View File

@@ -0,0 +1,3 @@
urlpatterns = []

View File

@@ -54,7 +54,9 @@ ROOT_URLCONF = 'santehray.urls'
TEMPLATES = [ TEMPLATES = [
{ {
'BACKEND': 'django.template.backends.django.DjangoTemplates', 'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [], 'DIRS': [
BASE_DIR / 'templates',
],
'APP_DIRS': True, 'APP_DIRS': True,
'OPTIONS': { 'OPTIONS': {
'context_processors': [ 'context_processors': [
@@ -115,6 +117,11 @@ USE_TZ = True
STATIC_URL = 'static/' STATIC_URL = 'static/'
# Additional locations of static files
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field

View File

@@ -15,8 +15,12 @@ Including another URLconf
2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
""" """
from django.contrib import admin from django.contrib import admin
from django.urls import path from django.urls import path, include
urlpatterns = [ urlpatterns = [
path('', include('home.urls')),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('items/', include('items.urls')),
path('orders/', include('orders.urls')),
path('users/', include('users.urls')),
] ]

718
static/css/style.css Normal file
View File

@@ -0,0 +1,718 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--dark: #36213e;
--mid: #554971;
--blue-gray: #63768d;
--light-blue: #b8f3ff;
--white: #ffffff;
--bg: #f9f8fa;
}
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
background: var(--white);
overflow-x: hidden;
}
/* Container to maintain consistent width */
.container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
a { text-decoration: none; color: inherit; }
/* ── HEADER ── */
header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
border-bottom: 1px solid rgba(54,33,62,.08);
box-shadow: 0 2px 20px rgba(54,33,62,.06);
}
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 80px;
gap: 20px;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 32px;
color: var(--dark);
white-space: nowrap;
letter-spacing: .5px;
}
.search-wrap {
display: flex;
align-items: center;
border: 1px solid var(--dark);
flex: 1;
max-width: 420px;
margin: 0 24px;
}
.search-wrap select {
border: none;
border-right: 1px solid var(--dark);
padding: 10px 14px;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--mid);
background: transparent;
outline: none;
cursor: pointer;
}
.search-wrap input {
flex: 1;
border: none;
padding: 10px 14px;
font-size: 12px;
color: var(--mid);
outline: none;
background: transparent;
font-family: 'Inter', sans-serif;
}
.search-wrap input::placeholder { color: var(--mid); opacity: .6; }
.search-wrap button {
border: none;
background: transparent;
padding: 10px 14px;
cursor: pointer;
display: flex;
align-items: center;
}
.search-wrap button svg { width: 20px; height: 20px; }
.header-icons {
display: flex;
align-items: center;
gap: 18px;
}
.header-icons a {
display: flex;
align-items: center;
cursor: pointer;
color: var(--dark);
transition: opacity .2s;
}
.header-icons a:hover { opacity: .6; }
.header-icons svg { width: 28px; height: 28px; }
.nav-bar {
display: flex;
align-items: center;
padding: 10px 80px;
gap: 0;
border-top: 1px solid rgba(54,33,62,.07);
}
.nav-bar .catalog-btn {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--mid);
margin-right: 32px;
cursor: pointer;
font-weight: 400;
transition: color .2s;
}
.nav-bar .catalog-btn:hover { color: var(--dark); }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
flex: 1;
}
.nav-links a {
font-size: 14px;
color: var(--mid);
transition: color .2s;
white-space: nowrap;
}
.nav-links a:hover { color: var(--dark); }
.phone-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--mid);
text-decoration: underline;
white-space: nowrap;
}
/* ── HERO ── */
.hero {
position: relative;
min-height: 520px;
overflow: hidden;
display: flex;
align-items: center;
}
.hero-bg-circle {
position: absolute;
left: -40px;
top: 60px;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(circle at 40% 50%, #8a7a95 0%, #5c4d6e 50%, #36213e 100%);
opacity: .85;
z-index: 0;
}
.hero-img {
position: absolute;
left: 140px;
top: 60px;
width: 340px;
height: 320px;
object-fit: cover;
z-index: 1;
border-radius: 2px;
}
.hero-content {
position: relative;
z-index: 2;
margin-left: 54%;
padding: 80px 80px 80px 0;
max-width: 580px;
}
.hero-content h1 {
font-family: 'Inter', sans-serif;
font-size: 44px;
font-weight: 500;
letter-spacing: 2.5px;
line-height: 1.2;
color: var(--dark);
margin-bottom: 18px;
}
.hero-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 22px;
}
.hero-check svg { width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; }
.hero-check p {
font-size: 15px;
color: var(--dark);
line-height: 1.6;
font-weight: 500;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--blue-gray);
color: var(--white);
font-size: 18px;
font-weight: 500;
padding: 22px 40px;
border: none;
cursor: pointer;
transition: background .25s, transform .15s;
letter-spacing: .5px;
text-transform: uppercase;
}
.btn-primary:hover { background: #516070; transform: translateY(-2px); }
/* ── WHY US ── */
.why-us {
padding: 70px 80px 60px;
display: grid;
grid-template-columns: 340px repeat(3, 1fr);
gap: 32px;
align-items: start;
background: var(--white);
}
.why-us-title {
font-size: 38px;
font-weight: 400;
line-height: 1.15;
color: var(--dark);
}
.why-item {
display: flex;
flex-direction: column;
gap: 10px;
}
.why-num {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--blue-gray);
color: var(--white);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
flex-shrink: 0;
}
.why-num.alt { background: var(--mid); }
.why-item h3 {
font-size: 15px;
font-weight: 600;
color: var(--dark);
text-transform: uppercase;
letter-spacing: .5px;
margin-top: 6px;
}
.why-item p { font-size: 13px; color: var(--dark); line-height: 1.55; }
/* ── PROMO BANNERS ── */
.promo-section {
padding: 20px 80px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.promo-card {
position: relative;
height: 300px;
background: var(--blue-gray);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px 36px;
}
.promo-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .35;
}
.promo-card-content { position: relative; z-index: 1; }
.promo-tag {
font-size: 15px;
color: var(--light-blue);
font-weight: 500;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: .5px;
}
.promo-card h2 {
font-size: 28px;
font-weight: 500;
color: var(--light-blue);
line-height: 1.2;
margin-bottom: 20px;
}
.promo-link {
font-size: 16px;
font-weight: 500;
color: var(--light-blue);
border-bottom: 1px solid var(--light-blue);
display: inline-block;
transition: opacity .2s;
}
.promo-link:hover { opacity: .7; }
/* ── ABOUT ── */
.about-section {
padding: 60px 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.about-left h2 {
font-size: 38px;
font-weight: 400;
color: var(--dark);
margin-bottom: 24px;
}
.about-left p {
font-size: 16px;
line-height: 1.7;
color: var(--dark);
margin-bottom: 28px;
}
.about-left h3 {
font-size: 20px;
font-weight: 600;
color: var(--dark);
margin-bottom: 18px;
}
.about-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.about-list li {
display: flex;
align-items: flex-start;
gap: 16px;
}
.about-list .num {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--blue-gray);
color: var(--white);
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-list .li-content { display: flex; flex-direction: column; gap: 4px; }
.about-list .li-title {
font-size: 17px;
font-weight: 500;
color: var(--dark);
}
.about-list .li-desc { font-size: 13px; color: var(--dark); line-height: 1.5; }
.about-right {
display: flex;
flex-direction: column;
gap: 28px;
}
.about-right img {
width: 100%;
height: 310px;
object-fit: cover;
}
.about-right p {
font-size: 15px;
color: var(--dark);
line-height: 1.7;
}
.stats-row {
display: flex;
gap: 32px;
flex-wrap: wrap;
margin-top: 8px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-size: 30px; font-weight: 400; color: var(--dark); letter-spacing: -1px; }
.stat-label { font-size: 13px; color: var(--dark); }
.about-right-bottom img {
width: 100%;
height: 220px;
object-fit: cover;
margin-top: 12px;
}
/* ── KITCHEN BANNER ── */
.kitchen-banner {
background: var(--blue-gray);
margin: 0 80px;
padding: 60px 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
overflow: hidden;
}
.kitchen-banner img {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
object-fit: cover;
opacity: .55;
}
.kitchen-content { position: relative; z-index: 1; }
.kitchen-content p {
font-size: 18px;
color: rgba(255,255,255,.85);
margin-bottom: 16px;
line-height: 1.5;
}
.kitchen-content h2 {
font-size: 42px;
font-weight: 400;
color: var(--white);
line-height: 1.15;
margin-bottom: 28px;
}
.btn-outline-light {
font-size: 18px;
color: var(--white);
border-bottom: 1px solid var(--white);
padding-bottom: 2px;
display: inline-block;
transition: opacity .2s;
}
.btn-outline-light:hover { opacity: .7; }
/* ── PRODUCTS ── */
.products-section { padding: 70px 80px 60px; }
.section-title {
font-size: 38px;
font-weight: 400;
color: var(--dark);
margin-bottom: 40px;
letter-spacing: .5px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 16px;
}
.product-card {
background: #d9d9d9;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow .2s;
}
.product-card:hover { box-shadow: 0 8px 32px rgba(54,33,62,.13); }
.product-card.tall { grid-row: span 2; }
.product-card-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: #d9d9d9;
}
.product-card.tall .product-card-img { aspect-ratio: 3/4; }
.product-info {
padding: 18px 20px 20px;
background: var(--white);
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.product-info .p-name {
font-size: 20px;
font-weight: 500;
color: var(--dark);
}
.product-info .p-sub {
font-size: 14px;
color: var(--mid);
margin-bottom: 6px;
}
.product-info .p-price {
font-size: 20px;
font-weight: 500;
color: var(--dark);
margin-top: auto;
}
.product-actions {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 8px;
}
.product-actions button {
width: 36px;
height: 36px;
background: rgba(255,255,255,.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s;
backdrop-filter: blur(4px);
}
.product-actions button:hover { background: var(--white); }
.product-actions button svg { width: 18px; height: 18px; color: var(--dark); }
.products-footer {
display: flex;
justify-content: flex-end;
margin-top: 28px;
}
/* ── FAQ ── */
.faq-section { padding: 70px 80px 60px; }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 60px;
margin-top: 40px;
}
.faq-item { display: flex; gap: 16px; align-items: flex-start; }
.faq-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--blue-gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--light-blue);
font-size: 18px;
font-weight: 400;
flex-shrink: 0;
margin-top: 2px;
}
.faq-body h4 {
font-size: 18px;
font-weight: 700;
color: var(--dark);
margin-bottom: 10px;
line-height: 1.3;
}
.faq-body p {
font-size: 15px;
color: #333;
line-height: 1.65;
}
.faq-cta {
margin-top: 48px;
display: flex;
justify-content: center;
}
/* ── FOOTER ── */
footer {
background: var(--blue-gray);
padding: 50px 80px 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px;
margin-top: 60px;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 30px;
color: rgba(184,243,255,.85);
margin-bottom: 8px;
}
.footer-col h4 {
font-size: 16px;
font-weight: 600;
color: rgba(184,243,255,.85);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a, .footer-col ul li {
font-size: 16px;
color: rgba(184,243,255,.8);
transition: opacity .2s;
}
.footer-col ul li a:hover { opacity: .65; }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content, .hero-bg-circle {
animation: fadeUp .7s ease both;
}
.hero-img {
animation: fadeUp .8s .15s ease both;
}
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.hero-img { left: 60px; }
.hero-content { margin-left: 48%; }
}
@media (max-width: 900px) {
header, .header-top, .nav-bar { padding-left: 24px; padding-right: 24px; }
.hero { flex-direction: column; min-height: auto; padding-top: 320px; }
.hero-img { left: 50%; transform: translateX(-50%); top: 20px; }
.hero-content { margin-left: 0; padding: 40px 24px; max-width: 100%; }
.why-us, .about-section { grid-template-columns: 1fr; padding: 40px 24px; }
.promo-section, .faq-grid, .products-grid { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
.kitchen-banner { margin: 0 24px; padding: 40px 24px; grid-template-columns: 1fr; }
footer { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
.products-section, .faq-section { padding: 40px 24px; }
.product-card.tall { grid-row: auto; }
}

BIN
static/img/about-image.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

View File

@@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 495 495" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Ellipse 1" cx="247.5" cy="247.5" r="247.5" fill="var(--fill-0, #63768D)"/>
</svg>

After

Width:  |  Height:  |  Size: 266 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

BIN
static/img/decor-promo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

BIN
static/img/kitchen-sink.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

BIN
static/img/mixer.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/img/rubber-mat.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1014 KiB

BIN
static/img/stats-image.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

BIN
static/img/terra-mirror.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
static/img/toilet.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

View File

@@ -0,0 +1,31 @@
<!-- FOOTER FRAGMENT -->
<footer>
<div class="footer-col">
<div class="footer-logo">SantehRay</div>
</div>
<div class="footer-col">
<h4>ПОКУПАТЕЛЮ</h4>
<ul>
<li><a href="#">Каталог</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Акции</a></li>
<li><a href="#">Новинки</a></li>
</ul>
</div>
<div class="footer-col">
<h4>ПОМОЩЬ</h4>
<ul>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Гарантия и возврат</a></li>
<li>Ответы на вопросы</li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="footer-col">
<h4>КОНТАКТЫ</h4>
<ul>
<li><a href="mailto:info@santehray.by">info@santehray.by</a></li>
<li>+375 (29) 688-18-19</li>
</ul>
</div>
</footer>

View File

@@ -0,0 +1,56 @@
<!-- HEADER FRAGMENT -->
<header>
<div class="header-top">
<div class="logo">SantehRay</div>
<div class="search-wrap">
<select>
<option>Все категории</option>
<option>Сантехника</option>
<option>Декор</option>
</select>
<input type="text" placeholder="Кто ищет, тот найдет...">
<button>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
</button>
</div>
<div class="header-icons">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
<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>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</a>
</div>
</div>
<nav class="nav-bar">
<a href="#" class="catalog-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="18" height="18">
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
</svg>
Каталог
</a>
<div class="nav-links">
<a href="#">Главная</a>
<a href="#">Услуги</a>
<a href="#">Доставка</a>
<a href="#">Гарантия</a>
<a href="#">Контакты</a>
</div>
<a href="tel:+375296881819" class="phone-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" width="18" height="18">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.95.573 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
+375 (29) 688-18-19
</a>
</nav>
</header>

View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
{% load static %}
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santehray - {% block title %}{{ title }}{% endblock %}</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>

311
templates/home/index.html Normal file
View File

@@ -0,0 +1,311 @@
{% 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 %}

3
users/urls.py Normal file
View File

@@ -0,0 +1,3 @@
urlpatterns = []