321 lines
14 KiB
HTML
321 lines
14 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>Котопес — домики для кошек и собак</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; }
|
||
.hero-image {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
height: 400px;
|
||
object-fit: cover;
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
margin: var(--kt-ai-space-9) auto 0;
|
||
display: block;
|
||
}
|
||
.catalog-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: var(--kt-ai-space-6);
|
||
margin-top: var(--kt-ai-space-9);
|
||
}
|
||
.product-card {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
padding: var(--kt-ai-space-6);
|
||
transition: transform 0.2s;
|
||
}
|
||
.product-card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
.product-image {
|
||
width: 100%;
|
||
height: 220px;
|
||
object-fit: cover;
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
}
|
||
.product-price {
|
||
font-size: var(--kt-ai-text-xl);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
color: var(--kt-ai-primary);
|
||
margin-top: var(--kt-ai-space-2);
|
||
}
|
||
.features-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--kt-ai-space-5);
|
||
margin-top: var(--kt-ai-space-8);
|
||
}
|
||
.feature-item {
|
||
display: flex;
|
||
gap: var(--kt-ai-space-3);
|
||
align-items: flex-start;
|
||
}
|
||
.feature-icon {
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--kt-ai-bg-soft);
|
||
border-radius: var(--kt-ai-radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.testimonial-card {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
padding: var(--kt-ai-space-6);
|
||
margin-top: var(--kt-ai-space-6);
|
||
}
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-3);
|
||
margin-top: var(--kt-ai-space-4);
|
||
}
|
||
.author-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--kt-ai-radius-full);
|
||
object-fit: cover;
|
||
}
|
||
.contact-form {
|
||
max-width: 480px;
|
||
margin: var(--kt-ai-space-8) auto 0;
|
||
}
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.reveal.in {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<a class="kt-ai-brand" href="#">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="Котопес" height="22">
|
||
<span>Котопес</span>
|
||
</a>
|
||
<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="#features">Преимущества</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">Премиальные домики, комплексы и лежаки для ваших питомцев. Экологичные материалы, ручная работа. Сделано с любовью для тех, кто любит вас больше всего.</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="#features">Узнать больше</a>
|
||
</div>
|
||
<img src="https://loremflickr.com/800/600/dog,house" alt="Собака в домике" class="hero-image">
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" 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="catalog-grid">
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/dog,bed" alt="Домик Комфорт" class="product-image">
|
||
<h3>Домик «Комфорт»</h3>
|
||
<p>Уютный домик для собак мелких пород. Мягкие стенки, съёмная подушка.</p>
|
||
<div class="product-price">15 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/dog,kennel" alt="Домик Премиум" class="product-image">
|
||
<h3>Домик «Премиум»</h3>
|
||
<p>Просторный домик для средних пород. Водоотталкивающее покрытие, окно.</p>
|
||
<div class="product-price">24 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/dog,house" alt="Домик Делюкс" class="product-image">
|
||
<h3>Домик «Делюкс»</h3>
|
||
<p>Двухэтажный коттедж для крупных собак. Термоизоляция, крыльцо.</p>
|
||
<div class="product-price">42 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section 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="catalog-grid">
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/cat,tree" alt="Комплекс Кот Баюн" class="product-image">
|
||
<h3>Комплекс «Кот Баюн»</h3>
|
||
<p>Трёхуровневый комплекс с когтеточкой, гамаком и домиком. Для 1-2 кошек.</p>
|
||
<div class="product-price">18 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/cat,bed" alt="Лежанка Облако" class="product-image">
|
||
<h3>Лежанка «Облако»</h3>
|
||
<p>Мягкая лежанка с высокими бортиками. Машинная стирка, антикоготь.</p>
|
||
<div class="product-price">9 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
<article class="product-card reveal">
|
||
<img src="https://loremflickr.com/400/300/cat,window" alt="Гамак на окно" class="product-image">
|
||
<h3>Гамак на окно</h3>
|
||
<p>Крепление на стеклопакет. Наблюдайте за улицой с комфортом. До 10 кг.</p>
|
||
<div class="product-price">7 990 ₸</div>
|
||
<a class="kt-ai-btn" data-variant="primary" style="width:100%;margin-top:var(--kt-ai-space-4)" href="#contacts">Заказать</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Почему выбирают нас</h2>
|
||
<p>Заботимся о комфорте кошек и собак с 2018 года</p>
|
||
</div>
|
||
<div class="features-list">
|
||
<div class="feature-item reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#check-circle"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Экологичные материалы</h3>
|
||
<p>Только безопасные ткани и наполнители, сертифицированные по стандартам ЕС</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#tool"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Ручная работа</h3>
|
||
<p>Каждый домик собирается вручную с вниманием к деталям</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#refresh"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Лёгкая чистка</h3>
|
||
<p>Все чехлы снимаются и стираются в машинке без потери формы</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#package"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Доставка по городу</h3>
|
||
<p>Бесплатная доставка при заказе от 30 000 ₸</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section 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="catalog-grid">
|
||
<div class="testimonial-card reveal">
|
||
<p>«Заказывала домик для своего корги — в восторге! Качество отличное, собака сразу облюбовала новое место. Доставка быстрая.»</p>
|
||
<div class="testimonial-author">
|
||
<img src="https://loremflickr.com/100/100/woman" alt="Анна К." class="author-avatar">
|
||
<div>
|
||
<strong>Анна К.</strong>
|
||
<div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">владелец корги</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card reveal">
|
||
<p>«Купили комплекс для двух кошек. Собирали вечером — к утру кошки уже оккупировали все уровни! Качество супер.»</p>
|
||
<div class="testimonial-author">
|
||
<img src="https://loremflickr.com/100/100/man" alt="Ержан Т." class="author-avatar">
|
||
<div>
|
||
<strong>Ержан Т.</strong>
|
||
<div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">владелец двух кошек</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Оставьте заявку</h2>
|
||
<p>Заполните форму — мы свяжемся с вами в течение часа и поможем подобрать идеальный домик</p>
|
||
<form class="contact-form" action="https://formsubmit.co/kotopes@example.com" method="POST">
|
||
<div class="kt-ai-field">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Телефон</label>
|
||
<input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Питомец (вид, порода, размер)</label>
|
||
<input class="kt-ai-input" name="pet" placeholder="Например: кошка, британская / собака, корги">
|
||
</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="color:var(--kt-ai-fg-muted)">Или напишите нам напрямую:</p>
|
||
<div style="display:flex;gap:var(--kt-ai-space-3);justify-content:center;margin-top:var(--kt-ai-space-3)">
|
||
<a class="kt-ai-btn" data-variant="ghost" href="https://wa.me/77771234567?text=Здравствуйте!">WhatsApp</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="tel:+77771234567">Позвонить</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Котопес</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Ежедневно 9:00–21:00</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|