322 lines
17 KiB
HTML
322 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Balapan Shop - детские товары</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.category-filter { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); }
|
||
.age-section { margin-bottom: var(--kt-ai-space-10); }
|
||
.age-title { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-6); }
|
||
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kt-ai-space-5); }
|
||
.product-card { border-radius: var(--kt-ai-radius-2xl); overflow: hidden; transition: transform 0.2s; }
|
||
.product-card:hover { transform: translateY(-4px); }
|
||
.product-img { width: 100%; height: 240px; object-fit: cover; background: var(--kt-ai-bg-soft); }
|
||
.product-info { padding: var(--kt-ai-space-4); }
|
||
.product-price { font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-primary); font-size: var(--kt-ai-text-lg); }
|
||
.gender-badge { display: inline-block; padding: var(--kt-ai-space-1) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); margin-bottom: var(--kt-ai-space-2); }
|
||
.gender-boy { background: var(--kt-ai-bg-soft); color: var(--kt-ai-primary); }
|
||
.gender-girl { background: var(--kt-ai-bg-soft); color: var(--kt-ai-danger); }
|
||
.gender-unisex { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg-muted); }
|
||
.contact-form { max-width: 520px; margin: 0 auto; }
|
||
.form-group { margin-bottom: var(--kt-ai-space-4); }
|
||
.hidden { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-2)">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="logo" height="24">
|
||
<strong>Balapan Shop</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#catalog">Каталог</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Контакты</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Детские товары для каждого возраста</h1>
|
||
<p class="kt-ai-hero-sub">Одежда, обувь, игрушки и питание для детей от 0 до 10 лет. Всё лучшее для ваших малышей!</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Перейти в каталог</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#contacts">Связаться с нами</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Почему выбирают нас</h2>
|
||
<p>Мы заботимся о качестве и безопасности детских товаров</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#check-circle"></use></svg></div>
|
||
<h3>Сертифицированное качество</h3>
|
||
<p>Все товары имеют сертификаты соответствия и безопасны для детей</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#package"></use></svg></div>
|
||
<h3>Быстрая доставка</h3>
|
||
<p>Доставляем по городу в день заказа, по стране — 2-3 дня</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#refresh"></use></svg></div>
|
||
<h3>Лёгкий возврат</h3>
|
||
<p>Можно вернуть или обменять товар в течение 14 дней</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Каталог товаров</h2>
|
||
<p>Выбирайте товары по возрасту и категории</p>
|
||
</div>
|
||
|
||
<div style="margin-top:var(--kt-ai-space-6);margin-bottom:var(--kt-ai-space-6)">
|
||
<div class="category-filter">
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="filterCategory('all')">Все товары</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('обувь')">Обувь</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('верхняя одежда')">Одежда</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('головные уборы')">Головные уборы</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('питание')">Питание</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="filterCategory('игрушки')">Игрушки</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-0-3" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>0-3 года</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/baby,food" alt="Детское питание" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Детское питание Hipp</h4>
|
||
<p class="product-price">2 500 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/baby,shoes" alt="Пинетки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пинетки вязаные</h4>
|
||
<p class="product-price">3 200 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/baby,toy" alt="Развивающая игрушка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Развивающий коврик</h4>
|
||
<p class="product-price">12 900 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/baby,hat" alt="Шапочка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Шапочка трикотажная</h4>
|
||
<p class="product-price">1 800 ₸</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-4-6" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>4-6 лет</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/kids,sneakers" alt="Кроссовки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Кроссовки детские</h4>
|
||
<p class="product-price">8 900 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||
<img src="https://loremflickr.com/400/300/kids,jacket" alt="Куртка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Куртка осенняя</h4>
|
||
<p class="product-price">15 500 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/toy,doll" alt="Кукла" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Кукла с аксессуарами</h4>
|
||
<p class="product-price">6 700 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/kids,cap" alt="Кепка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Кепка с козырьком</h4>
|
||
<p class="product-price">2 100 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/juice,kids" alt="Сок" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Сок детский (упаковка)</h4>
|
||
<p class="product-price">1 200 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/toy,car" alt="Машинка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Конструктор Lego</h4>
|
||
<p class="product-price">9 500 ₸</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="age-7-10" class="age-section">
|
||
<h3 class="age-title"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-2)"><use href="#users"></use></svg>7-10 лет</h3>
|
||
<div class="products-grid">
|
||
<article class="kt-ai-card product-card" data-category="обувь">
|
||
<img src="https://loremflickr.com/400/300/sneakers,teen" alt="Ботинки" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Ботинки школьные</h4>
|
||
<p class="product-price">11 200 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="верхняя одежда">
|
||
<img src="https://loremflickr.com/400/300/coat,kids" alt="Пальто" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пальто демисезонное</h4>
|
||
<p class="product-price">18 900 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/board,game" alt="Настольная игра" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Настольная игра</h4>
|
||
<p class="product-price">5 400 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="головные уборы">
|
||
<img src="https://loremflickr.com/400/300/beanie,kids" alt="Шапка" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Шапка зимняя</h4>
|
||
<p class="product-price">3 500 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="питание">
|
||
<img src="https://loremflickr.com/400/300/cereal,kids" alt="Каша" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-unisex">Универсальный</span>
|
||
<h4>Каша овсяная с фруктами</h4>
|
||
<p class="product-price">1 800 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/puzzle,kids" alt="Пазл" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-girl">Для девочек</span>
|
||
<h4>Пазл 500 элементов</h4>
|
||
<p class="product-price">3 900 ₸</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-category="игрушки">
|
||
<img src="https://loremflickr.com/400/300/robot,toy" alt="Робот" class="product-img">
|
||
<div class="product-info">
|
||
<span class="gender-badge gender-boy">Для мальчиков</span>
|
||
<h4>Робот на радиоуправлении</h4>
|
||
<p class="product-price">14 500 ₸</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Свяжитесь с нами</h2>
|
||
<p>Есть вопросы? Напишите нам — ответим в течение часа!</p>
|
||
|
||
<form class="contact-form" action="https://formsubmit.co/example@email.com" method="POST" style="margin-top:var(--kt-ai-space-6)">
|
||
<div class="form-group kt-ai-field">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Телефон или email</label>
|
||
<input class="kt-ai-input" name="contact" placeholder="+7 ___ ___ __ __" required>
|
||
</div>
|
||
<div class="form-group kt-ai-field">
|
||
<label>Сообщение</label>
|
||
<textarea class="kt-ai-textarea" name="message" rows="4" placeholder="Ваш вопрос или пожелание" required></textarea>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить</button>
|
||
</form>
|
||
|
||
<div style="margin-top:var(--kt-ai-space-8);text-align:center">
|
||
<p style="margin-bottom:var(--kt-ai-space-3)">Или напишите нам напрямую:</p>
|
||
<div style="display:flex;gap:var(--kt-ai-space-3);justify-content:center;flex-wrap:wrap">
|
||
<a class="kt-ai-btn" data-variant="ghost" href="tel:+77771234567"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#megaphone"></use></svg>+7 (777) 123-45-67</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="https://wa.me/77771234567"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#chat"></use></svg>WhatsApp</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="mailto:info@balapanshop.kz"><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#mail"></use></svg>info@balapanshop.kz</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Balapan Shop</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>г. Алматы, ул. Абая 150</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
function filterCategory(category) {
|
||
var cards = document.querySelectorAll('.product-card');
|
||
cards.forEach(function(card) {
|
||
if (category === 'all' || card.getAttribute('data-category') === category) {
|
||
card.classList.remove('hidden');
|
||
} else {
|
||
card.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
var buttons = document.querySelectorAll('.category-filter .kt-ai-btn');
|
||
buttons.forEach(function(btn) {
|
||
if (btn.textContent.toLowerCase().includes(category) || (category === 'all' && btn.textContent === 'Все товары')) {
|
||
btn.setAttribute('data-variant', 'primary');
|
||
} else {
|
||
btn.setAttribute('data-variant', 'ghost');
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|