sozday-mne-sayt-kotoryy-bude/index.html

247 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Йога 50+ — здоровье и гармония</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; }
.hero-bg {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,240,245,0.95) 100%), url('https://loremflickr.com/1920/1080/yoga,woman') center/cover no-repeat;
min-height: 90vh;
display: flex;
align-items: center;
}
.testimonial {
font-style: italic;
border-left: 3px solid var(--kt-ai-primary);
padding-left: var(--kt-ai-space-4);
}
.highlight {
color: #e91e8c;
}
</style>
</head>
<body>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>🧘 Йога 50+</strong>
<span class="kt-ai-spacer"></span>
<a class="kt-ai-btn" data-variant="ghost" href="#benefits">Преимущества</a>
<a class="kt-ai-btn" data-variant="ghost" href="#programs">Программы</a>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Записаться</a>
</div>
</header>
<section class="kt-ai-hero hero-bg" data-align="center">
<div class="kt-ai-wrap">
<h1>Йога для людей <span class="highlight">50+</span></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="#contacts">Первое занятие бесплатно</a>
<a class="kt-ai-btn" data-size="lg" href="#benefits">Узнать больше</a>
</div>
</div>
</section>
<section id="benefits" 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">💪</div>
<h3>Укрепление мышц</h3>
<p>Мягкая нагрузка укрепит мышцы спины, ног и кора без вреда для суставов</p>
</article>
<article class="kt-ai-tile">
<div class="kt-ai-tile-icon">🤸</div>
<h3>Гибкость тела</h3>
<p>Постепенно вернёте подвижность суставам и лёгкость движений</p>
</article>
<article class="kt-ai-tile">
<div class="kt-ai-tile-icon">❤️</div>
<h3>Здоровье сердца</h3>
<p>Дыхательные практики нормализуют давление и улучшат работу сердечно-сосудистой системы</p>
</article>
<article class="kt-ai-tile">
<div class="kt-ai-tile-icon">🧠</div>
<h3>Ясный ум</h3>
<p>Медитация и пранаяма снизят стресс и улучшат память</p>
</article>
<article class="kt-ai-tile">
<div class="kt-ai-tile-icon">😴</div>
<h3>Крепкий сон</h3>
<p>Вечерние практики помогут быстрее засыпать и лучше высыпаться</p>
</article>
<article class="kt-ai-tile">
<div class="kt-ai-tile-icon">👥</div>
<h3>Общение</h3>
<p>Занятия в группе — это новые друзья и приятное времяпрепровождение</p>
</article>
</div>
</div>
</section>
<section id="programs" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-section-head">
<h2>Наши программы</h2>
<p>Три формата занятий под разный уровень подготовки</p>
</div>
<div class="kt-ai-card" style="margin-bottom:var(--kt-ai-space-6)">
<h3 style="margin-bottom:var(--kt-ai-space-2)">🌱 Начальный уровень</h3>
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Для тех, кто никогда не занимался йогой или имел длительный перерыв</p>
<ul style="margin-bottom:var(--kt-ai-space-4)">
<li>Простые доступные асаны</li>
<li>Много работы с дыханием</li>
<li>Использование Props (валики, блоки, ремни)</li>
<li>2 раза в неделю по 45 минут</li>
</ul>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Попробовать бесплатно</a>
</div>
<div class="kt-ai-card" style="margin-bottom:var(--kt-ai-space-6)">
<h3 style="margin-bottom:var(--kt-ai-space-2)">🌸 Средний уровень</h3>
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Для тех, кто уже знаком с основами и хочет прогрессировать</p>
<ul style="margin-bottom:var(--kt-ai-space-4)">
<li>Более сложные последовательности</li>
<li>Укрепление баланса и координации</li>
<li>Элементы медитации</li>
<li>2-3 раза в неделю по 60 минут</li>
</ul>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Записаться в группу</a>
</div>
<div class="kt-ai-card" style="margin-bottom:var(--kt-ai-space-6">
<h3 style="margin-bottom:var(--kt-ai-space-2)">🌺 Индивидуальные занятия</h3>
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Персональная программа с учётом особенностей здоровья</p>
<ul style="margin-bottom:var(--kt-ai-space-4)">
<li>Работа с ограничениями по здоровью</li>
<li>Гибкий график</li>
<li>Полное внимание инструктора</li>
<li>В удобное для вас время</li>
</ul>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Обсудить детали</a>
</div>
</div>
</section>
<section class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-section-head">
<h2>Отзывы наших учеников</h2>
<p>Истории тех, кто уже начал заниматься</p>
</div>
<div class="kt-ai-card" style="margin-bottom:var(--kt-ai-space-4)">
<p class="testimonial" style="margin-bottom:var(--kt-ai-space-3)">«После 55 лет я думала, что мое тело уже не сможет быть гибким. Но через 3 месяца занятий йогой я с удивлением обнаружила, что могу наклониться и завязать шнурки без усилий! Спасибо за терпение и профессионализм.»</p>
<strong>— Елена Викторовна, 58 лет</strong>
</div>
<div class="kt-ai-card" style="margin-bottom:var(--kt-ai-space-4)">
<p class="testimonial" style="margin-bottom:var(--kt-ai-space-3)">«Йога помогла мне справиться с болями в спине, которые мучили годами. Инструктор подбирает упражнения с учётом моего остеохондроза. Занимаюсь полгода — спина больше не беспокоит.»</p>
<strong>— Александр Петрович, 62 года</strong>
</div>
<div class="kt-ai-card">
<p class="testimonial" style="margin-bottom:var(--kt-ai-space-3)">«Пришла на йогу за физическим здоровьем, а получила ещё и душевное равновесие. После занятий ухожу спокойной и умиротворённой. Группа замечательная, все поддерживают друг друга.»</p>
<strong>— Ирина Николаевна, 54 года</strong>
</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="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile">
<h3>🩺 Консультация с врачом</h3>
<p>Перед началом занятий рекомендуем проконсультироваться с врачом при наличии хронических заболеваний</p>
</article>
<article class="kt-ai-tile">
<h3>👕 Удобная одежда</h3>
<p>Носите комфортную одежду, не стесняющую движений. Занятия босиком или в носках</p>
</article>
<article class="kt-ai-tile">
<h3>💧 Питьевой режим</h3>
<p>Берите с собой бутылку воды. Пейте небольшими глотками во время занятия</p>
</article>
<article class="kt-ai-tile">
<h3>🕐 Комфортный темп</h3>
<p>Никто не будет вас торопить. Делайте упражнения в своём темпе, слушайте своё тело</p>
</article>
</div>
</div>
</section>
<section id="contacts" class="kt-ai-cta">
<div class="kt-ai-wrap" data-width="narrow">
<h2>Запишитесь на бесплатное пробное занятие</h2>
<p style="margin-bottom:var(--kt-ai-space-6)">Оставьте заявку — мы свяжемся с вами в течение дня и подберём удобную группу</p>
<form action="https://formsubmit.co/yoga50plus@example.com" method="POST" style="max-width:420px;margin:0 auto var(--kt-ai-space-6)">
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label>Ваше имя</label>
<input class="kt-ai-input" name="name" placeholder="Иван Петрович" required>
</div>
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label>Телефон</label>
<input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label>Комментарий (необязательно)</label>
<textarea class="kt-ai-textarea" name="message" rows="3" placeholder="Есть ли ограничения по здоровью?"></textarea>
</div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить заявку</button>
</form>
<div style="text-align:center;margin-top:var(--kt-ai-space-6)">
<p style="color:var(--kt-ai-fg-muted);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="primary" href="https://wa.me/77771234567?text=Здравствуйте!%20Хочу%20записаться%20на%20йогу">WhatsApp</a>
<a class="kt-ai-btn" href="tel:+77771234567">Позвонить</a>
</div>
</div>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 Йога 50+</span>
<span class="kt-ai-spacer"></span>
<span>📍 г. Алматы, ул. Примерная, 123</span>
</footer>
<script>
// Плавное появление элементов при скролле
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) e.target.classList.add('in');
});
}, {threshold: 0.15});
document.querySelectorAll('.kt-ai-tile, .kt-ai-card').forEach(function(el) {
el.classList.add('reveal');
io.observe(el);
});
</script>
<style>
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
</style>
</body>
</html>