350 lines
13 KiB
HTML
350 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1080, height=1920" />
|
||
<title>ROI24 — Лиды утекают</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html, body {
|
||
margin: 0;
|
||
width: 1080px;
|
||
height: 1920px;
|
||
overflow: hidden;
|
||
background: #050508;
|
||
}
|
||
body {
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
#root {
|
||
position: relative;
|
||
width: 1080px;
|
||
height: 1920px;
|
||
overflow: hidden;
|
||
background: #050508;
|
||
}
|
||
|
||
/* === Typography === */
|
||
.hero {
|
||
font-size: 96px;
|
||
font-weight: 900;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.headline {
|
||
font-size: 64px;
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.body-text {
|
||
font-size: 42px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
color: rgba(255,255,255,0.75);
|
||
}
|
||
.cta-text {
|
||
font-size: 56px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.mono {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 48px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* === Animation base states === */
|
||
.fade-up {
|
||
opacity: 0;
|
||
transform: translateY(60px);
|
||
}
|
||
.fade-in {
|
||
opacity: 0;
|
||
}
|
||
.scale-up {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
}
|
||
|
||
/* === Scene container === */
|
||
.scene {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 280px 80px 380px;
|
||
}
|
||
|
||
/* === Decorative elements === */
|
||
.accent-line {
|
||
width: 80px;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #0F62FE, #00B8D4);
|
||
border-radius: 2px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.warning-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 30%, rgba(227,72,80,0.12) 0%, transparent 60%);
|
||
opacity: 0;
|
||
}
|
||
|
||
.success-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 40%, rgba(15,98,254,0.15) 0%, transparent 55%);
|
||
opacity: 0;
|
||
}
|
||
|
||
.brand-badge {
|
||
display: inline-block;
|
||
padding: 12px 32px;
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
border-radius: 100px;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: rgba(255,255,255,0.6);
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* === CTA Button === */
|
||
.cta-button {
|
||
display: inline-block;
|
||
padding: 28px 60px;
|
||
background: linear-gradient(135deg, #0F62FE 0%, #00B8D4 100%);
|
||
border-radius: 20px;
|
||
font-size: 44px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.04em;
|
||
color: #fff;
|
||
opacity: 0;
|
||
transform: scale(0.85);
|
||
}
|
||
|
||
/* === Metric display === */
|
||
.metric {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
}
|
||
.metric-value {
|
||
font-size: 120px;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
.metric-label {
|
||
font-size: 36px;
|
||
font-weight: 500;
|
||
color: rgba(255,255,255,0.6);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="root"
|
||
data-composition-id="main"
|
||
data-start="0"
|
||
data-duration="15"
|
||
data-width="1080"
|
||
data-height="1920"
|
||
>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 1: HOOK — "Сколько лидов..." -->
|
||
<!-- Time: 0–3s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div class="scene clip" data-start="0" data-duration="3" data-track-index="1">
|
||
<div class="warning-bg"></div>
|
||
<div class="fade-up" id="hook-emoji"
|
||
style="font-size: 80px; margin-bottom: 20px;">📉</div>
|
||
<div class="fade-up" id="hook-text" style="margin-bottom: 24px;">
|
||
<span class="hero" style="color: #E34850;">Сколько лидов</span><br/>
|
||
<span class="hero" style="color: rgba(255,255,255,0.9);">утекает?</span>
|
||
</div>
|
||
<div class="fade-up" id="hook-sub" style="margin-top: 16px;">
|
||
<span class="body-text">Пока вы спите.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 2: PAIN — Проблема -->
|
||
<!-- Time: 3–8s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div class="scene clip" data-start="3" data-duration="5" data-track-index="2">
|
||
<div class="warning-bg" id="pain-bg"></div>
|
||
<div class="brand-badge fade-up" id="pain-badge">Почему так?</div>
|
||
<div class="fade-up" id="pain-stats" style="margin-top: 48px;">
|
||
<div class="metric">
|
||
<span class="metric-value" style="color: #E34850;">73%</span>
|
||
<span class="metric-label">лидов не обработаны<br/>в первые 30 мин</span>
|
||
</div>
|
||
</div>
|
||
<div class="fade-up" id="pain-result" style="margin-top: 56px;">
|
||
<span class="body-text">Каждый необработанный лид —<br/>это <strong style="color: #E34850;">потерянные деньги</strong></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 3: SOLUTION — ROI24 -->
|
||
<!-- Time: 8–12s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div class="scene clip" data-start="8" data-duration="4" data-track-index="3">
|
||
<div class="success-bg" id="solution-bg"></div>
|
||
<div class="fade-up" id="solution-brand" style="margin-bottom: 16px;">
|
||
<span class="brand-badge" style="border-color: rgba(15,98,254,0.4); color: #0F62FE;">ROI24</span>
|
||
</div>
|
||
<div class="fade-up" id="solution-headline">
|
||
<span class="headline" style="color: #fff;">AI-автоматизация<br/>маркетинга</span>
|
||
</div>
|
||
<div class="fade-up" id="solution-features" style="margin-top: 40px; text-align: left;">
|
||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||
<span style="font-size: 36px;">🤖</span>
|
||
<span class="body-text" style="color: rgba(255,255,255,0.9);">Лиды обрабатываются за 0 сек</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||
<span style="font-size: 36px;">📱</span>
|
||
<span class="body-text" style="color: rgba(255,255,255,0.9);">7 площадок, один инструмент</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 20px;">
|
||
<span style="font-size: 36px;">📊</span>
|
||
<span class="body-text" style="color: rgba(255,255,255,0.9);">Сквозная аналитика</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- SCENE 4: CTA — Призыв к действию -->
|
||
<!-- Time: 12–15s -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div class="scene clip" data-start="12" data-duration="3" data-track-index="4">
|
||
<div class="success-bg" id="cta-bg"></div>
|
||
<div class="fade-up" id="cta-pre" style="margin-bottom: 20px;">
|
||
<span class="body-text">Хватит терять клиентов</span>
|
||
</div>
|
||
<div class="scale-up" id="cta-button">
|
||
<span style="color: #fff;">Попробуй бесплатно →</span>
|
||
</div>
|
||
<div class="fade-in" id="cta-note" style="margin-top: 24px;">
|
||
<span class="mono" style="color: rgba(255,255,255,0.4);">ROI24 — Автоматизация без рутины</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.__timelines = window.__timelines || {};
|
||
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// ═══════════ SCENE 1: HOOK (0–3s) ═══════════
|
||
tl.to("#hook-emoji", {
|
||
opacity: 1, y: 0, duration: 0.6, ease: "power3.out"
|
||
}, 0.3);
|
||
tl.to("#hook-text", {
|
||
opacity: 1, y: 0, duration: 0.7, ease: "power3.out"
|
||
}, 0.4);
|
||
tl.to("#hook-sub", {
|
||
opacity: 1, y: 0, duration: 0.5, ease: "power2.out"
|
||
}, 1.0);
|
||
// Exit
|
||
tl.to("#hook-emoji, #hook-text, #hook-sub", {
|
||
opacity: 0, y: -50, duration: 0.25, ease: "power2.in"
|
||
}, 2.5);
|
||
tl.set("#hook-emoji, #hook-text, #hook-sub", { opacity: 0, y: -50 }, 3.0);
|
||
|
||
// ═══════════ SCENE 2: PAIN (3–8s) ═══════════
|
||
tl.to("#pain-bg", {
|
||
opacity: 1, duration: 0.5, ease: "power1.out"
|
||
}, 3.0);
|
||
tl.from("#pain-badge", {
|
||
opacity: 0, y: 40, duration: 0.5, ease: "power3.out"
|
||
}, 3.2);
|
||
tl.from("#pain-stats", {
|
||
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||
}, 3.6);
|
||
tl.from("#pain-result", {
|
||
opacity: 0, y: 40, duration: 0.5, ease: "power2.out"
|
||
}, 4.8);
|
||
// Exit
|
||
tl.to("#pain-bg", {
|
||
opacity: 0, duration: 0.2, ease: "power2.in"
|
||
}, 7.5);
|
||
tl.to("#pain-badge, #pain-stats, #pain-result", {
|
||
opacity: 0, y: -40, duration: 0.25, ease: "power2.in"
|
||
}, 7.5);
|
||
tl.set("#pain-badge, #pain-stats, #pain-result, #pain-bg", { opacity: 0 }, 8.0);
|
||
|
||
// ═══════════ SCENE 3: SOLUTION (8–12s) ═══════════
|
||
tl.to("#solution-bg", {
|
||
opacity: 1, duration: 0.6, ease: "power1.out"
|
||
}, 8.0);
|
||
tl.from("#solution-brand", {
|
||
opacity: 0, scale: 0.8, duration: 0.5, ease: "back.out(1.7)"
|
||
}, 8.2);
|
||
tl.from("#solution-headline", {
|
||
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||
}, 8.4);
|
||
tl.from("#solution-features > div:nth-child(1)", {
|
||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||
}, 9.0);
|
||
tl.from("#solution-features > div:nth-child(2)", {
|
||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||
}, 9.3);
|
||
tl.from("#solution-features > div:nth-child(3)", {
|
||
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||
}, 9.6);
|
||
// Exit
|
||
tl.to("#solution-bg", {
|
||
opacity: 0, duration: 0.2, ease: "power2.in"
|
||
}, 11.7);
|
||
tl.to("#solution-brand, #solution-headline, #solution-features > div", {
|
||
opacity: 0, y: -30, duration: 0.2, ease: "power2.in"
|
||
}, 11.7);
|
||
tl.set("#solution-brand, #solution-headline, #solution-features, #solution-bg", { opacity: 0 }, 12.0);
|
||
|
||
// ═══════════ SCENE 4: CTA (12–15s) ═══════════
|
||
tl.to("#cta-bg", {
|
||
opacity: 1, duration: 0.5, ease: "power1.out"
|
||
}, 12.0);
|
||
tl.from("#cta-pre", {
|
||
opacity: 0, y: 30, duration: 0.5, ease: "power3.out"
|
||
}, 12.2);
|
||
tl.from("#cta-button", {
|
||
opacity: 0, scale: 0.85, duration: 0.6, ease: "back.out(1.7)"
|
||
}, 12.6);
|
||
tl.from("#cta-note", {
|
||
opacity: 0, duration: 0.4, ease: "power2.out"
|
||
}, 13.2);
|
||
// Subtle pulse on CTA button
|
||
tl.to("#cta-button", {
|
||
scale: 1.04, duration: 0.7, ease: "sine.inOut", yoyo: true, repeat: 1
|
||
}, 13.4);
|
||
// Final hold
|
||
tl.to("#cta-bg, #cta-pre, #cta-button, #cta-note", {
|
||
opacity: 1, duration: 0.1
|
||
}, 14.8);
|
||
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body>
|
||
</html>
|