307 lines
13 KiB
HTML
307 lines
13 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; }
|
||
.schedule-table { width: 100%; border-collapse: collapse; margin-top: var(--kt-ai-space-6); }
|
||
.schedule-table th, .schedule-table td { padding: var(--kt-ai-space-3); text-align: left; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.schedule-table th { color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); }
|
||
.price-card { text-align: center; padding: var(--kt-ai-space-6); }
|
||
.price-amount { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); margin: var(--kt-ai-space-4) 0; }
|
||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .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">
|
||
<strong>🧘 Прана</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О студии</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#schedule">Расписание</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#prices">Цены</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="#contacts">Записаться на пробное</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#schedule">Расписание</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>
|
||
<p style="color:var(--kt-ai-primary); font-weight:var(--kt-ai-weight-medium)">Первое занятие — бесплатно!</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon">🌿</div>
|
||
<h3>Атмосфера</h3>
|
||
<p>Уютные залы с естественным светом, приглушённой подсветкой и приятной музыкой</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon">👨🏫</div>
|
||
<h3>Преподаватели</h3>
|
||
<p>Опытные инструкторы с международными сертификатами и стажем от 5 лет</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon">🧘</div>
|
||
<h3>Направления</h3>
|
||
<p>Хатха, Виньяса, Инь-йога, Аэройога, Медитация и пранаяма</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon">🚿</div>
|
||
<h3>Комфорт</h3>
|
||
<p>Просторные раздевалки, душевые, полотенца, чайная зона и бесплатная парковка</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="schedule" 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 class="kt-ai-card reveal" style="margin-top:var(--kt-ai-space-6); overflow-x: auto;">
|
||
<table class="schedule-table">
|
||
<thead>
|
||
<tr>
|
||
<th>День</th>
|
||
<th>Время</th>
|
||
<th>Направление</th>
|
||
<th>Инструктор</th>
|
||
<th>Уровень</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Понедельник</td>
|
||
<td>08:00</td>
|
||
<td>Хатха-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Начинающий</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Понедельник</td>
|
||
<td>10:00</td>
|
||
<td>Виньяса-флоу</td>
|
||
<td>Елена Смирнова</td>
|
||
<td>Средний</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Понедельник</td>
|
||
<td>18:00</td>
|
||
<td>Аэройога</td>
|
||
<td>Мария Иванова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Понедельник</td>
|
||
<td>20:00</td>
|
||
<td>Инь-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Среда</td>
|
||
<td>08:00</td>
|
||
<td>Хатха-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Начинающий</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Среда</td>
|
||
<td>10:00</td>
|
||
<td>Виньяса-флоу</td>
|
||
<td>Елена Смирнова</td>
|
||
<td>Средний</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Среда</td>
|
||
<td>18:00</td>
|
||
<td>Аэройога</td>
|
||
<td>Мария Иванова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Среда</td>
|
||
<td>20:00</td>
|
||
<td>Медитация</td>
|
||
<td>Дмитрий Волков</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Пятница</td>
|
||
<td>08:00</td>
|
||
<td>Хатха-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Начинающий</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Пятница</td>
|
||
<td>10:00</td>
|
||
<td>Виньяса-флоу</td>
|
||
<td>Елена Смирнова</td>
|
||
<td>Средний</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Пятница</td>
|
||
<td>18:00</td>
|
||
<td>Аэройога</td>
|
||
<td>Мария Иванова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Пятница</td>
|
||
<td>20:00</td>
|
||
<td>Инь-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Суббота</td>
|
||
<td>10:00</td>
|
||
<td>Хатха-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Начинающий</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Суббота</td>
|
||
<td>12:00</td>
|
||
<td>Виньяса-флоу</td>
|
||
<td>Елена Смирнова</td>
|
||
<td>Средний</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Суббота</td>
|
||
<td>15:00</td>
|
||
<td>Аэройога</td>
|
||
<td>Мария Иванова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Воскресенье</td>
|
||
<td>10:00</td>
|
||
<td>Инь-йога</td>
|
||
<td>Анна Петрова</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Воскресенье</td>
|
||
<td>12:00</td>
|
||
<td>Медитация</td>
|
||
<td>Дмитрий Волков</td>
|
||
<td>Любой</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="prices" 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 price-card reveal">
|
||
<h3>Пробное</h3>
|
||
<div class="price-amount">500 ₸</div>
|
||
<p>Одно занятие</p>
|
||
<p style="color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm)">Знакомство со студией</p>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts" style="margin-top:var(--kt-ai-space-4)">Записаться</a>
|
||
</article>
|
||
<article class="kt-ai-tile price-card reveal">
|
||
<h3>Старт</h3>
|
||
<div class="price-amount">25 000 ₸</div>
|
||
<p>8 занятий</p>
|
||
<p style="color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm)">Действует 1 месяц</p>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts" style="margin-top:var(--kt-ai-space-4)">Записаться</a>
|
||
</article>
|
||
<article class="kt-ai-tile price-card reveal">
|
||
<h3>Безлимит</h3>
|
||
<div class="price-amount">40 000 ₸</div>
|
||
<p>Безлимит на месяц</p>
|
||
<p style="color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm)">Все группы включены</p>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts" style="margin-top:var(--kt-ai-space-4)">Записаться</a>
|
||
</article>
|
||
<article class="kt-ai-tile price-card reveal">
|
||
<h3>Индивидуальное</h3>
|
||
<div class="price-amount">15 000 ₸</div>
|
||
<p>Одно занятие</p>
|
||
<p style="color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm)">Персональная работа с инструктором</p>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts" style="margin-top:var(--kt-ai-space-4)">Записаться</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Запишитесь на пробное занятие</h2>
|
||
<p>Оставьте заявку — мы свяжемся с вами в течение 15 минут</p>
|
||
<form action="https://formsubmit.co/prana.yoga@example.com" method="POST" style="max-width:420px; margin:var(--kt-ai-space-6) auto;">
|
||
<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="margin-top:var(--kt-ai-space-8); text-align:center;">
|
||
<p style="color:var(--kt-ai-fg-muted); margin-bottom:var(--kt-ai-space-2)">Или свяжитесь с нами напрямую:</p>
|
||
<div style="display:flex; gap:var(--kt-ai-space-4); justify-content:center; flex-wrap:wrap;">
|
||
<a class="kt-ai-btn" data-variant="ghost" href="tel:+77771234567">📞 +7 (777) 123-45-67</a>
|
||
<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="https://t.me/prana_yoga">✈️ Telegram</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Студия йоги «Прана»</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>📍 г. Алматы, ул. Примерная, 10</span>
|
||
<span>⏰ Ежедневно 08:00 — 22:00</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('.reveal').forEach(function(el) { io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|