232 lines
12 KiB
HTML
232 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>VILORA-5in1 — Комплекс для твоей энергии</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">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-bg {
|
||
background: linear-gradient(135deg, var(--kt-ai-primary) 0%, var(--kt-ai-bg-soft) 100%);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
padding: var(--kt-ai-space-12);
|
||
margin-bottom: var(--kt-ai-space-9);
|
||
}
|
||
.script-card {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
padding: var(--kt-ai-space-6);
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
}
|
||
.frame-number {
|
||
font-family: var(--kt-ai-font-mono);
|
||
font-size: var(--kt-ai-text-xs);
|
||
color: var(--kt-ai-fg-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: var(--kt-ai-space-2);
|
||
}
|
||
.component-badge {
|
||
display: inline-block;
|
||
background: var(--kt-ai-primary);
|
||
color: white;
|
||
padding: var(--kt-ai-space-1) var(--kt-ai-space-3);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
font-size: var(--kt-ai-text-sm);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
margin: var(--kt-ai-space-1);
|
||
}
|
||
.viral-tip {
|
||
border-left: 3px solid var(--kt-ai-primary);
|
||
padding-left: var(--kt-ai-space-4);
|
||
margin: var(--kt-ai-space-4) 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>VILORA-5in1</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#script">Сценарий</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#components">5 компонентов</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<div class="hero-bg">
|
||
<h1>Вирусный ролик для VILORA-5in1</h1>
|
||
<p class="kt-ai-hero-sub">Готовый сценарий для Instagram Reels: полезный + эмоциональный = 100K+ просмотров</p>
|
||
</div>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#script"><svg class="kt-icon" aria-hidden="true"><use href="#play"></use></svg> Сценарий ролика</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#components"><svg class="kt-icon" aria-hidden="true"><use href="#pill"></use></svg> Состав</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="script" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#play"></use></svg> Сценарий вирусного Reels (30 секунд)</h2>
|
||
<p>Формат: быстрая смена кадров + текст на экране + трендовый звук</p>
|
||
</div>
|
||
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile" data-span="full">
|
||
<div class="script-card">
|
||
<div class="frame-number">Кадр 1 (0-3 сек) — КРЮЧЕК</div>
|
||
<h3>«Ты тоже это чувствуешь?»</h3>
|
||
<p><strong>Визуал:</strong> Крупный план уставшего лица, рука трёт виски. Текст на экране: «Усталость к 15:00 — это не норма».</p>
|
||
<p><strong>Звук:</strong> Резкий переход тишины → бит.</p>
|
||
<p class="viral-tip"><svg class="kt-icon" aria-hidden="true"><use href="#lightbulb"></use></svg> <strong>Секрет вирусности:</strong> бьём в боль — каждый узнаёт себя</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="kt-ai-tile" data-span="full">
|
||
<div class="script-card">
|
||
<div class="frame-number">Кадр 2 (3-7 сек) — ПРОБЛЕМА</div>
|
||
<h3>«Твой организм кричит о помощи»</h3>
|
||
<p><strong>Визуал:</strong> Быстрая нарезка: пустая чашка кофе, календарь с крестиками, телефон с 47 уведомлениями.</p>
|
||
<p><strong>Текст на экране:</strong> «Кофе не работает. Сон не помогает. Время действовать».</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="kt-ai-tile" data-span="full">
|
||
<div class="script-card">
|
||
<div class="frame-number">Кадр 3 (7-15 сек) — РЕШЕНИЕ</div>
|
||
<h3>«VILORA-5in1: 5 в одном»</h3>
|
||
<p><strong>Визуал:</strong> Красивая распаковка: банка VILORA, капсула крупно, 5 иконок появляются по очереди.</p>
|
||
<p><strong>Текст на экране (появляется по одному):</strong></p>
|
||
<div>
|
||
<span class="component-badge">Кальций</span>
|
||
<span class="component-badge">Магний</span>
|
||
<span class="component-badge">Марганец</span>
|
||
<span class="component-badge">Цинк</span>
|
||
<span class="component-badge">Витамин D3</span>
|
||
</div>
|
||
<p><strong>Звук:</strong> ASMR-звук открытия банки + satisfying click.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="kt-ai-tile" data-span="full">
|
||
<div class="script-card">
|
||
<div class="frame-number">Кадр 4 (15-23 сек) — РЕЗУЛЬТАТ</div>
|
||
<h3>«Через 7 дней — другая ты»</h3>
|
||
<p><strong>Визуал:</strong> До/После: слева — уставшая (те же кадры из начала), справа — энергичная, улыбается, спорт, работа, встречи.</p>
|
||
<p><strong>Текст на экране:</strong> «Энергия без кофе. Фокус без перерывов. Жизнь без усталости».</p>
|
||
<p class="viral-tip"><svg class="kt-icon" aria-hidden="true"><use href="#lightbulb"></use></svg> <strong>Секрет вирусности:</strong> покажи трансформацию — люди любят «до/после»</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="kt-ai-tile" data-span="full">
|
||
<div class="script-card">
|
||
<div class="frame-number">Кадр 5 (23-30 сек) — ПРИЗЫВ</div>
|
||
<h3>«Попробуй. Твоё тело скажет спасибо»</h3>
|
||
<p><strong>Визуал:</strong> VILORA на столе рядом с телефоном, рука берёт капсулу. Финальный текст: «VILORA-5in1. Заказывай в Direct».</p>
|
||
<p><strong>Звук:</strong> Призывный джингл + CTA шёпотом: «Ссылка в шапке профиля».</p>
|
||
<p class="viral-tip"><svg class="kt-icon" aria-hidden="true"><use href="#lightbulb"></use></svg> <strong>Секрет вирусности:</strong> призыв простой и без давления</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="components" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#sparkles"></use></svg> 5 компонентов твоей энергии</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>Антистресс №1. Расслабляет мышцы, улучшает сон, снижает тревожность.</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>Витамин D3</h3>
|
||
<p>Гормон солнца. Настроение, иммунитет, усвоение кальция. 80% людей в дефиците.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#settings"></use></svg> Технические детали съёмки</h2>
|
||
<p>Чтобы ролик залетел в рекомендации</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9">
|
||
<article class="kt-ai-tile">
|
||
<h3><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg> Звук</h3>
|
||
<p>Используй трендовый аудио из Instagram (топ-10 по охватам). Громкость музыки 30%, голоса 70%.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3><svg class="kt-icon" aria-hidden="true"><use href="#rocket"></use></svg> Темп</h3>
|
||
<p>Смена кадра каждые 2-3 секунды. Динамика = удержание внимания.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3><svg class="kt-icon" aria-hidden="true"><use href="#file"></use></svg> Текст</h3>
|
||
<p>Крупный шрифт, контрастный фон, не больше 5 слов на экране.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3><svg class="kt-icon" aria-hidden="true"><use href="#megaphone"></use></svg> Хэштеги</h3>
|
||
<p>#энергия #витамины #здоровье #усталость #immunity #wellness #vilora5in1 #reels_kz</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Готов снимать?</h2>
|
||
<p>Сохрани этот сценарий и начни с первого кадра. Через 30 минут у тебя будет готовый ролик.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77771234567?text=Хочу%20заказать%20VILORA-5in1"><svg class="kt-icon" aria-hidden="true"><use href="#chat"></use></svg> Заказать VILORA-5in1</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 VILORA-5in1</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Instagram: @vilora_kz</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('.kt-ai-tile, .script-card').forEach(function(el){
|
||
el.classList.add('reveal');
|
||
io.observe(el);
|
||
});
|
||
</script>
|
||
<style>
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
|
||
</body>
|
||
</html>
|