202 lines
12 KiB
HTML
202 lines
12 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="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚴</text></svg>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-hero { background: var(--kt-ai-bg-soft); }
|
||
.price-row { display: flex; justify-content: space-between; padding: var(--kt-ai-space-2) 0; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.price-row:last-child { border-bottom: none; }
|
||
.price-value { font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-primary); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>🚴 ВелоМастер</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#services">Услуги</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#reviews">Отзывы</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#booking">Записаться</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Профессиональный ремонт велосипедов в Астане</h1>
|
||
<p class="kt-ai-hero-sub">Быстро, качественно, с гарантией. Запишись онлайн и получи скидку 10% на первый визит!</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#booking">Записаться онлайн</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#services">Посмотреть цены</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="services" 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" data-span="2">
|
||
<h3>🔧 Диагностика</h3>
|
||
<p>Полная проверка всех узлов велосипеда, выявление неисправностей, рекомендации по ремонту</p>
|
||
<div class="price-row"><span>Базовая</span><span class="price-value">Бесплатно</span></div>
|
||
<div class="price-row"><span>Полная</span><span class="price-value">2 000 ₸</span></div>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>⚙️ Настройка переключателей</h3>
|
||
<p>Регулировка переднего и заднего переключателя скоростей</p>
|
||
<div class="price-row"><span>Один переключатель</span><span class="price-value">3 000 ₸</span></div>
|
||
<div class="price-row"><span>Комплекс</span><span class="price-value">5 000 ₸</span></div>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>🛑 Тормозная система</h3>
|
||
<p>Настройка, замена колодок, прокачка гидравлики</p>
|
||
<div class="price-row"><span>Настройка</span><span class="price-value">2 500 ₸</span></div>
|
||
<div class="price-row"><span>Прокачка</span><span class="price-value">4 000 ₸</span></div>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>🔗 Цепь и звёзды</h3>
|
||
<p>Замена цепи, кассеты, системы. Установка и настройка</p>
|
||
<div class="price-row"><span>Замена цепи</span><span class="price-value">1 500 ₸</span></div>
|
||
<div class="price-row"><span>Кассета</span><span class="price-value">2 500 ₸</span></div>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>🎯 Колёса</h3>
|
||
<p>Устранение восьмёрки, замена спиц, камер, покрышек</p>
|
||
<div class="price-row"><span>Устранение восьмёрки</span><span class="price-value">3 000 ₸</span></div>
|
||
<div class="price-row"><span>Замена камеры</span><span class="price-value">1 000 ₸</span></div>
|
||
</article>
|
||
<article class="kt-ai-tile" data-span="2">
|
||
<h3>🚲 Капитальное ТО</h3>
|
||
<p>Полная разборка, очистка, смазка всех узлов, сборка и настройка</p>
|
||
<div class="price-row"><span>Велосипед</span><span class="price-value">15 000 ₸</span></div>
|
||
<div class="price-row"><span>Электровелосипед</span><span class="price-value">25 000 ₸</span></div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="booking" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Онлайн-запись</h2>
|
||
<p>Оставьте заявку — мы перезвоним в течение 15 минут для подтверждения</p>
|
||
</div>
|
||
<form action="https://formsubmit.co/samruk.4@example.com" method="POST" style="max-width:480px">
|
||
<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>
|
||
<select class="kt-ai-select" name="service">
|
||
<option value="diagnostics">Диагностика</option>
|
||
<option value="gears">Настройка переключателей</option>
|
||
<option value="brakes">Тормозная система</option>
|
||
<option value="chain">Цепь и звёзды</option>
|
||
<option value="wheels">Колёса</option>
|
||
<option value="full">Капитальное ТО</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Комментарий (марка велосипеда, проблема)</label>
|
||
<textarea class="kt-ai-textarea" name="comment" rows="3" placeholder="Опишите проблему..."></textarea>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit">Записаться</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="reviews" 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 style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:var(--kt-ai-radius-full);background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:24px">👨</div>
|
||
<div>
|
||
<strong>Алексей К.</strong>
|
||
<div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Постоянный клиент</div>
|
||
</div>
|
||
</div>
|
||
<p>«Отличная мастерская! Делал здесь капитальное ТО после зимы. Всё сделали за день, велосипед как новый. Цены адекватные, ребята знают своё дело.»</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:var(--kt-ai-radius-full);background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:24px">👩</div>
|
||
<div>
|
||
<strong>Мария С.</strong>
|
||
<div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Новичок</div>
|
||
</div>
|
||
</div>
|
||
<p>«Привезла детский велосипед после падения. Быстро нашли проблему, заменили деталь. Ребёнок снова катается! Спасибо за оперативность.»</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);margin-bottom:var(--kt-ai-space-3)">
|
||
<div style="width:48px;height:48px;border-radius:var(--kt-ai-radius-full);background:var(--kt-ai-bg-soft);display:flex;align-items:center;justify-content:center;font-size:24px">🧔</div>
|
||
<div>
|
||
<strong>Ержан Т.</strong>
|
||
<div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Спортсмен</div>
|
||
</div>
|
||
</div>
|
||
<p>«Профессиональный подход к шоссейному велосипеду. Настроили переключатели идеально, теперь скорости переключаются чётко. Рекомендую!»</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Контакты</h2>
|
||
<p style="margin-bottom:var(--kt-ai-space-6)">
|
||
📍 Астана, ул. Велосипедная, 42<br>
|
||
🕒 Пн–Вс: 09:00–20:00<br>
|
||
📞 +7 (777) 123-45-67
|
||
</p>
|
||
<div style="display:flex;gap:var(--kt-ai-space-3);flex-wrap:wrap;justify-content:center;margin-bottom:var(--kt-ai-space-6)">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77771234567?text=Здравствуйте! Хочу записаться на ремонт">Написать в WhatsApp</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="tel:+77771234567">Позвонить</a>
|
||
</div>
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2507.876!2d71.4!3d51.17!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTHCsDEwJzEyLjAiTiA3McKwMjQnMDAuMCJF!5e0!3m2!1sru!2skz!4v1234567890" width="100%" height="320" style="border:0;border-radius:var(--kt-ai-radius-3xl);max-width:800px" loading="lazy"></iframe>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 ВелоМастер Астана</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>🚴 ВелоМастер</span>
|
||
</footer>
|
||
|
||
<style>
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
<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>
|