344 lines
16 KiB
HTML
344 lines
16 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">Тёплые, уютные и легко собираются за 5 минут. Экологичные материалы, машинная стирка. Сделано с любовью для тех, кто любит вас больше всего.</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://images.unsplash.com/photo-1591946614720-884a486878d3?w=800&h=600&fit=crop" 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>Мягкие, тёплые, собираются за 5 минут без инструментов</p>
|
||
</div>
|
||
<div class="catalog-grid">
|
||
<article class="product-card reveal">
|
||
<img src="https://images.unsplash.com/photo-1591946614720-884a486878d3?w=400&h=300&fit=crop" alt="Домик Уют" class="product-image">
|
||
<h3>Домик «Уют»</h3>
|
||
<p>Для мелких пород (до 8 кг). Мягкие стенки, съёмный матрасик. 40×40×35 см.</p>
|
||
<div class="product-price">12 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://images.unsplash.com/photo-1535930749574-1399327ce78f?w=400&h=300&fit=crop" alt="Домик Комфорт" class="product-image">
|
||
<h3>Домик «Комфорт»</h3>
|
||
<p>Для средних пород (до 20 кг). Уплотнённые стенки, окно-вентиляция. 60×50×45 см.</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://images.unsplash.com/photo-1541599540903-216a46ca1dc0?w=400&h=300&fit=crop" alt="Домик Простор" class="product-image">
|
||
<h3>Домик «Простор»</h3>
|
||
<p>Для крупных пород (до 40 кг). Двойное дно, съёмный чехол. 80×65×55 см.</p>
|
||
<div class="product-price">26 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://images.unsplash.com/photo-1623387641168-d9803ddd3f35?w=400&h=300&fit=crop" alt="Домик Мяу" class="product-image">
|
||
<h3>Домик «Мяу»</h3>
|
||
<p>Компактный куб с мягкой подушкой. Для одной кошки. 35×35×30 см.</p>
|
||
<div class="product-price">8 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://images.unsplash.com/photo-1545249390-6bdfa286032f?w=400&h=300&fit=crop" alt="Домик Пушок" class="product-image">
|
||
<h3>Домик «Пушок»</h3>
|
||
<p>Двухуровневый с когтеточкой и гамаком. Для 1-2 кошек. 50×40×60 см.</p>
|
||
<div class="product-price">14 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://images.unsplash.com/photo-1513245543132-31f507417b26?w=400&h=300&fit=crop" alt="Домик Барсик" class="product-image">
|
||
<h3>Домик «Барсик»</h3>
|
||
<p>Трёхуровневый комплекс с тоннелем и игрушкой. Для 2-3 кошек. 70×50×80 см.</p>
|
||
<div class="product-price">21 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 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="#sparkles"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Быстрая сборка</h3>
|
||
<p>Собирается за 5 минут без инструментов — просто достаньте из коробки</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>Все чехлы снимаются и стираются при 30°C без потери формы</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://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face" 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://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face" 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>
|