Files
calls24-landing/index-v2.html
T

968 lines
48 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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calls24 — Речевая аналитика для агентств</title>
<meta name="description" content="Анализ звонков операторов за 24 часа. Узнайте, где теряете деньги.">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════
DESIGN TOKENS v2.2 — Complete System
═══════════════════════════════════════════ */
:root {
--color-bg: #050505;
--color-surface: #0a0a0a;
--color-surface-elevated: #111111;
--color-surface-hover: #141414;
--color-border: rgba(255,255,255,0.06);
--color-border-hover: rgba(255,255,255,0.12);
--color-border-strong: rgba(255,255,255,0.18);
--color-text-primary: #f0f0f0;
--color-text-secondary: #a0a0a0;
--color-text-muted: #555555;
--color-accent: #6366f1;
--color-accent-hover: #818cf8;
--color-accent-soft: rgba(99,102,241,0.12);
--color-success: #10b981;
--color-success-soft: rgba(16,185,129,0.12);
--color-warning: #f59e0b;
--color-danger: #ef4444;
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
--gradient-text: linear-gradient(135deg, #818cf8, #a78bfa, #c084fc, #f472b6);
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--space-32: 128px;
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
--text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem;
--text-5xl: 3.5rem; --text-6xl: 4.5rem; --text-7xl: 5.5rem;
--leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms;
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px;
--radius-2xl: 32px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-main); background: var(--color-bg); color: var(--color-text-primary); line-height: var(--leading-normal); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* ═══════════════════════════════════════════
NOISE TEXTURE
═══════════════════════════════════════════ */
.noise-overlay {
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
opacity: 0.025; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 128px 128px;
}
/* ═══════════════════════════════════════════
CONTAINER
═══════════════════════════════════════════ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
/* ═══════════════════════════════════════════
ANIMATED GRADIENT BG (Pattern #3)
═══════════════════════════════════════════ */
.gradient-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); }
.orb-1 {
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
top: -25%; left: -15%; animation: orb-float 25s ease-in-out infinite;
}
.orb-2 {
width: 550px; height: 550px;
background: radial-gradient(circle, rgba(236,72,153,0.12), transparent 70%);
bottom: -25%; right: -10%; animation: orb-float 25s ease-in-out infinite -8s;
}
.orb-3 {
width: 450px; height: 450px;
background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%);
top: 40%; left: 50%; transform: translate(-50%, -50%);
animation: orb-float 25s ease-in-out infinite -16s;
}
@keyframes orb-float {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(50px,-40px) scale(1.1); }
66% { transform: translate(-40px,60px) scale(0.92); }
}
/* ═══════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: var(--space-5) 0;
background: rgba(5,5,5,0.7);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border);
transition: all var(--duration-normal) var(--ease-out);
}
.nav.scrolled { padding: var(--space-3) 0; background: rgba(5,5,5,0.92); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.nav-logo { font-size: var(--text-xl); font-weight: 900; letter-spacing: -0.03em; }
.nav-logo span {
background: var(--gradient-text);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links { display: flex; gap: var(--space-8); align-items: center; }
.nav-links a { font-size: var(--text-sm); color: var(--color-text-secondary); transition: color var(--duration-normal) var(--ease-out); }
.nav-links a:hover { color: var(--color-text-primary); }
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
font-weight: 600; font-size: var(--text-sm);
transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
will-change: transform;
}
.btn-primary {
background: var(--gradient-primary); color: white;
box-shadow: 0 4px 24px rgba(99,102,241,0.25);
}
.btn-primary:hover {
box-shadow: 0 8px 40px rgba(99,102,241,0.4);
transform: translateY(-2px);
}
.btn-secondary {
border: 1px solid var(--color-border); color: var(--color-text-secondary);
background: transparent;
}
.btn-secondary:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); background: var(--color-surface); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { padding: var(--space-5) var(--space-10); font-size: var(--text-lg); border-radius: var(--radius-xl); }
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero {
position: relative; min-height: 100vh; display: flex; align-items: center;
padding: var(--space-40) 0 var(--space-32); overflow: hidden;
}
.hero-content { text-align: center; position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-5);
background: var(--color-accent-soft);
border: 1px solid rgba(99,102,241,0.2);
border-radius: var(--radius-full);
font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-hover);
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: var(--space-8);
}
.hero-title {
font-size: clamp(2.5rem, 7vw, var(--text-7xl));
font-weight: 900; line-height: var(--leading-tight);
letter-spacing: -0.035em; margin-bottom: var(--space-8);
}
.gradient-text {
background: var(--gradient-text);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: clamp(1.05rem, 2vw, var(--text-lg));
color: var(--color-text-secondary);
max-width: 640px; margin: 0 auto var(--space-12);
line-height: var(--leading-normal);
}
.hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hero-proof {
margin-top: var(--space-12);
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
font-size: var(--text-sm); color: var(--color-text-muted);
}
.hero-avatars { display: flex; }
.hero-avatar {
width: 32px; height: 32px; border-radius: 50%;
border: 2px solid var(--color-bg);
margin-left: -8px;
background: var(--gradient-primary);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: white;
}
.hero-avatar:first-child { margin-left: 0; }
/* ═══════════════════════════════════════════
STATS BAR
═══════════════════════════════════════════ */
.stats-bar {
border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
padding: var(--space-16) 0; background: var(--color-surface);
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
text-align: center;
}
.stat-item { padding: var(--space-4) 0; }
.stat-number {
display: block;
font-size: clamp(2.5rem, 4vw, var(--text-5xl));
font-weight: 900;
line-height: 1;
margin-bottom: var(--space-3);
}
.stat-number.accent { color: var(--color-accent); }
.stat-number.danger { color: var(--color-danger); }
.stat-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
/* ═══════════════════════════════════════════
SECTIONS
═══════════════════════════════════════════ */
.section { padding: var(--space-32) 0; }
.section-header { text-align: center; margin-bottom: var(--space-20); }
.section-eyebrow {
display: inline-block;
font-size: var(--text-xs); color: var(--color-accent);
text-transform: uppercase; letter-spacing: 0.12em;
font-weight: 700; margin-bottom: var(--space-4);
}
.section-title {
font-size: clamp(1.8rem, 3.5vw, var(--text-5xl));
font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-4);
}
.section-subtitle {
font-size: var(--text-lg); color: var(--color-text-secondary);
max-width: 560px; margin: 0 auto; line-height: var(--leading-normal);
}
/* ═══════════════════════════════════════════
BENTO GRID (Pattern #1)
═══════════════════════════════════════════ */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto;
gap: var(--space-6);
}
.bento-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
padding: var(--space-12);
transition: all var(--duration-normal) var(--ease-out);
display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.bento-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
opacity: 0; transition: opacity var(--duration-normal) var(--ease-out);
}
.bento-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.bento-card:hover::before { opacity: 1; }
.bento-card.large { grid-column: span 8; padding: var(--space-16); }
.bento-card.medium { grid-column: span 6; }
.bento-card.small { grid-column: span 4; padding: var(--space-10); }
.bento-card .card-number {
font-size: clamp(3rem, 5vw, var(--text-6xl));
font-weight: 900; line-height: 1; margin-bottom: var(--space-6);
background: var(--gradient-text);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.bento-card.large .card-number { font-size: var(--text-7xl); }
.bento-card h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); }
.bento-card p { color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-normal); }
/* ═══════════════════════════════════════════
SOLUTION / FEATURE LIST (Pattern #7)
═══════════════════════════════════════════ */
.solution-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; }
.solution-text h2 { font-size: var(--text-4xl); font-weight: 800; margin-bottom: var(--space-6); letter-spacing: -0.03em; }
.solution-text > p { color: var(--color-text-secondary); font-size: var(--text-lg); margin-bottom: var(--space-12); line-height: var(--leading-normal); }
.feature-list { display: flex; flex-direction: column; gap: 0; }
.feature-item {
display: flex; gap: var(--space-5); padding: var(--space-6) 0;
border-bottom: 1px solid var(--color-border);
transition: all var(--duration-normal) var(--ease-out);
align-items: flex-start;
}
.feature-item:first-child { padding-top: 0; }
.feature-item:last-child { border-bottom: none; }
.feature-item:hover { transform: translateX(8px); }
.feature-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 36px; height: 36px; border-radius: 50%;
font-size: 16px; margin-top: 2px;
background: var(--color-success-soft); color: var(--color-success);
border: 1px solid rgba(16,185,129,0.2);
}
.feature-content h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.feature-content p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
/* ═══════════════════════════════════════════
SOLUTION VISUAL MOCKUP
═══════════════════════════════════════════ */
.solution-visual {
border-radius: var(--radius-2xl);
background: var(--color-bg);
border: 1px solid var(--color-border);
padding: var(--space-8);
aspect-ratio: 4/3;
display: flex; flex-direction: column; gap: var(--space-6);
}
.mockup-bar {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-md);
font-size: var(--text-xs); color: var(--color-text-muted);
}
.mockup-dots { display: flex; gap: 6px; margin-right: var(--space-4); }
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dot.r { background: #ff5f57; }
.mockup-dot.y { background: #ffbd2e; }
.mockup-dot.g { background: #28ca42; }
.mockup-list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.mockup-row {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
transition: all var(--duration-normal) var(--ease-out);
}
.mockup-row:hover { border-color: var(--color-border-hover); }
.mockup-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--color-accent-soft);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--color-accent); flex-shrink: 0;
}
.mockup-info { flex: 1; }
.mockup-info-line {
height: 8px; border-radius: 4px; background: var(--color-border);
margin-bottom: var(--space-2);
}
.mockup-info-line:last-child { width: 60%; margin-bottom: 0; }
.mockup-score {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-xs); font-weight: 700;
flex-shrink: 0;
}
.mockup-score.good { background: var(--color-success-soft); color: var(--color-success); }
.mockup-score.bad { background: rgba(239,68,68,0.12); color: var(--color-danger); }
.mockup-score.mid { background: rgba(245,158,11,0.12); color: var(--color-warning); }
/* ═══════════════════════════════════════════
STEPS
═══════════════════════════════════════════ */
.steps-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; margin-top: var(--space-16); }
.steps-visual {
border-radius: var(--radius-2xl);
background: var(--color-surface);
border: 1px solid var(--color-border);
aspect-ratio: 4/3;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: var(--space-4);
}
.steps-icon { font-size: 64px; }
.steps-list { display: flex; flex-direction: column; gap: var(--space-6); }
.step-item {
display: flex; gap: var(--space-6); padding: var(--space-8);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
background: var(--color-surface);
transition: all var(--duration-normal) var(--ease-out);
}
.step-item:hover { border-color: var(--color-accent); background: var(--color-surface-hover); transform: translateY(-2px); }
.step-number {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 48px; height: 48px; border-radius: 50%;
background: var(--color-accent-soft); color: var(--color-accent);
font-weight: 800; font-size: var(--text-xl);
}
.step-item h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-2); }
.step-item p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.6; }
/* ═══════════════════════════════════════════
TESTIMONIALS (Pattern #6)
═══════════════════════════════════════════ */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
.testimonial-card {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); padding: var(--space-8);
transition: all var(--duration-normal) var(--ease-out);
display: flex; flex-direction: column;
}
.testimonial-card:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }
.testimonial-stars { display: flex; gap: 2px; color: var(--color-warning); font-size: 16px; margin-bottom: var(--space-4); }
.testimonial-card blockquote {
font-size: var(--text-sm); color: var(--color-text-secondary);
line-height: var(--leading-normal); margin-bottom: var(--space-6);
font-style: italic; flex: 1;
}
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.testimonial-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--gradient-primary);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--text-sm); color: white; flex-shrink: 0;
}
.testimonial-name { font-weight: 600; font-size: var(--text-sm); }
.testimonial-role { font-size: var(--text-xs); color: var(--color-text-muted); }
/* ═══════════════════════════════════════════
PRICING (Pattern #8)
═══════════════════════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); align-items: start; }
.pricing-card {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); padding: var(--space-10);
display: flex; flex-direction: column;
transition: all var(--duration-normal) var(--ease-out);
}
.pricing-card:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }
.pricing-card.featured {
border-color: var(--color-accent);
background: linear-gradient(180deg, rgba(99,102,241,0.06), var(--color-surface) 40%);
box-shadow: 0 8px 48px rgba(99,102,241,0.15);
transform: scale(1.03);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }
.pricing-name { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.pricing-price { font-size: var(--text-5xl); font-weight: 900; margin-bottom: var(--space-2); line-height: 1; }
.pricing-price span { font-size: var(--text-base); font-weight: 400; color: var(--color-text-muted); }
.pricing-desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-8); }
.pricing-features { list-style: none; margin-bottom: var(--space-8); flex: 1; }
.pricing-features li {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-secondary);
}
.pricing-features .check-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 20px; height: 20px; border-radius: 50%;
background: var(--color-success-soft); color: var(--color-success);
font-size: 11px; font-weight: 700;
}
.pricing-features .cross-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(100,100,100,0.08); color: var(--color-text-muted);
font-size: 11px; font-weight: 700;
}
.pricing-features li.disabled { opacity: 0.4; }
.pricing-features .btn { width: 100%; justify-content: center; }
/* ═══════════════════════════════════════════
CTA
═══════════════════════════════════════════ */
.cta-section { padding: var(--space-40) 0; text-align: center; position: relative; overflow: hidden; }
.cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-title { font-size: clamp(2rem, 4.5vw, var(--text-5xl)); font-weight: 900; margin-bottom: var(--space-6); letter-spacing: -0.03em; }
.cta-subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-12); }
.cta-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer { border-top: 1px solid var(--color-border); padding: var(--space-16) 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.footer-copy { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-links { display: flex; gap: var(--space-6); }
.footer-links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--duration-normal) var(--ease-out); }
.footer-links a:hover { color: var(--color-text-primary); }
/* ═══════════════════════════════════════════
STAGGERED REVEAL (Pattern #1)
═══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.bento-card.large, .bento-card.medium, .bento-card.small { grid-column: span 6; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.bento-card.large, .bento-card.medium, .bento-card.small { grid-column: span 12; }
.solution-grid, .steps-container { grid-template-columns: 1fr; }
.solution-visual, .steps-visual { order: -1; aspect-ratio: 16/9; }
.testimonial-grid, .pricing-grid { grid-template-columns: 1fr; }
.pricing-card.featured { transform: none; }
.pricing-card.featured:hover { transform: translateY(-4px); }
.hero-title { font-size: clamp(2rem, 8vw, 3rem); }
.hero { padding: var(--space-32) 0 var(--space-16); }
}
/* ═══════════════════════════════════════════
ACCESSIBILITY
═══════════════════════════════════════════ */
.skip-link {
position: absolute; top: -100%; left: var(--space-4); z-index: 200;
padding: var(--space-3) var(--space-4); background: var(--color-accent);
color: white; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
</style>
</head>
<body>
<a href="#main" class="skip-link">Перейти к содержимому</a>
<div class="noise-overlay" aria-hidden="true"></div>
<nav class="nav" role="navigation" aria-label="Главная навигация">
<div class="nav-inner">
<a href="#" class="nav-logo" aria-label="calls24"><span>calls</span>24</a>
<div class="nav-links">
<a href="#problems">Проблема</a>
<a href="#solution">Решение</a>
<a href="#steps">Как работает</a>
<a href="#pricing">Цены</a>
<a href="#contact" class="btn btn-primary magnetic-btn">Начать бесплатно</a>
</div>
</div>
</nav>
<main id="main">
<!-- ═══ HERO ═══ -->
<section class="hero" aria-labelledby="hero-title">
<div class="gradient-orbs" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="container">
<div class="hero-content">
<div class="hero-eyebrow reveal">Речевая аналитика для агентств</div>
<h1 class="hero-title reveal reveal-delay-1">Узнайте, где операторы <span class="gradient-text">теряют сделки</span></h1>
<p class="hero-subtitle reveal reveal-delay-2">Загрузите запись звонка — через 2 минуты получите детальный анализ по 10 пунктам скрипта, рейтинг оператора и рекомендации по росту конверсии.</p>
<div class="hero-actions reveal reveal-delay-3">
<a href="#contact" class="btn btn-primary btn-xl magnetic-btn">Получить аудит бесплатно →</a>
<a href="#solution" class="btn btn-secondary btn-lg">Как это работает</a>
</div>
<div class="hero-proof reveal reveal-delay-4">
<div class="hero-avatars">
<div class="hero-avatar">МК</div>
<div class="hero-avatar">АП</div>
<div class="hero-avatar">ДВ</div>
</div>
<span>Уже используют 500+ агентств</span>
</div>
</div>
</div>
</section>
<!-- ═══ STATS BAR ═══ -->
<section class="stats-bar" aria-label="Ключевые цифры">
<div class="container">
<div class="stats-grid">
<div class="stat-item reveal">
<span class="stat-number accent">99</span>
<span class="stat-label">звонков проанализировано</span>
</div>
<div class="stat-item reveal reveal-delay-1">
<span class="stat-number danger">90%</span>
<span class="stat-label">не по скрипту</span>
</div>
<div class="stat-item reveal reveal-delay-2">
<span class="stat-number">40%</span>
<span class="stat-label">рост конверсии после</span>
</div>
<div class="stat-item reveal reveal-delay-3">
<span class="stat-number accent">500+</span>
<span class="stat-label">агентств России</span>
</div>
</div>
</div>
</section>
<!-- ═══ PROBLEM (Bento) ═══ -->
<section id="problems" class="section" aria-labelledby="problem-title">
<div class="container">
<div class="section-header">
<div class="section-eyebrow reveal">Проблема</div>
<h2 id="problem-title" class="section-title reveal reveal-delay-1">Агентство теряет деньги каждый день</h2>
<p class="section-subtitle reveal reveal-delay-2">Мы проанализировали 99 звонков реального агентства недвижимости и нашли критические потери</p>
</div>
<div class="bento-grid">
<div class="bento-card large reveal">
<div class="card-number">90%</div>
<h3>Операторы не соблюдают скрипт</h3>
<p>Подавляющее большинство звонков проходит без соблюдения базовых этапов: приветствие, определение потребности, обсуждение бюджета, закрепление контакта.</p>
</div>
<div class="bento-card medium reveal reveal-delay-1">
<div class="card-number">85%</div>
<h3>Не обсуждают бюджет</h3>
<p>Операторы не спрашивают бюджет — теряют квалифицированных клиентов на первом контакте.</p>
</div>
<div class="bento-card medium reveal reveal-delay-2">
<div class="card-number">50%</div>
<h3>Конверсия в контакт</h3>
<p>Только половина звонков завершается получением контакта — 50% потерян даром.</p>
</div>
<div class="bento-card small reveal reveal-delay-3">
<div class="card-number">23</div>
<h3>Реальных звонка</h3>
<p>Из 99 звонков только 23 — разговоры с покупателями. Остальные — страховка, коллеги, тишина.</p>
</div>
<div class="bento-card small reveal reveal-delay-4">
<div class="card-number">3.1</div>
<h3>Средний балл</h3>
<p>Операторы «Автолинии» получают 2.3–3.1 из 10. Лучший оператор — 8 из 10.</p>
</div>
<div class="bento-card small reveal reveal-delay-5">
<div class="card-number">0₽</div>
<h3>Аналитики</h3>
<p>Большинство агентств вообще не анализируют звонки. Не знают, что теряют.</p>
</div>
</div>
</div>
</section>
<!-- ═══ SOLUTION ═══ -->
<section id="solution" class="section solution-section" aria-labelledby="solution-title">
<div class="container">
<div class="solution-grid">
<div class="solution-text">
<div class="section-eyebrow reveal">Решение</div>
<h2 id="solution-title" class="reveal reveal-delay-1">Аналитика, которая растит конверсию</h2>
<p class="reveal reveal-delay-2">Мы анализируем каждый звонок по 10 пунктам и даём конкретные рекомендации, а не просто цифры.</p>
<div class="feature-list">
<div class="feature-item reveal">
<div class="feature-icon">✓</div>
<div class="feature-content">
<h3>Транскрибация за секунды</h3>
<p>Загрузите MP3/WAV — через 2 минуты получите текст звонка с временными метками.</p>
</div>
</div>
<div class="feature-item reveal reveal-delay-1">
<div class="feature-icon">✓</div>
<div class="feature-content">
<h3>AI-оценка по чек-листу</h3>
<p>Нейросеть проверяет 10 пунктов скрипта и ставит оценку от 1 до 10.</p>
</div>
</div>
<div class="feature-item reveal reveal-delay-2">
<div class="feature-icon">✓</div>
<div class="feature-content">
<h3>Рейтинг операторов</h3>
<p>Автоматический рейтинг от лучшего к худшему — без субъективности.</p>
</div>
</div>
<div class="feature-item reveal reveal-delay-3">
<div class="feature-icon">✓</div>
<div class="feature-content">
<h3>Рекомендации по росту</h3>
<p>Не просто «плохо», а «замените фразу X на Y для роста конверсии на 15%».</p>
</div>
</div>
</div>
</div>
<div class="solution-visual reveal" aria-hidden="true">
<div class="mockup-bar">
<div class="mockup-dots"><div class="mockup-dot r"></div><div class="mockup-dot y"></div><div class="mockup-dot g"></div></div>
<span>calls24 — Рейтинг операторов</span>
</div>
<div class="mockup-list">
<div class="mockup-row">
<div class="mockup-avatar">РМ</div>
<div class="mockup-info"><div class="mockup-info-line" style="width:80%"></div><div class="mockup-info-line"></div></div>
<div class="mockup-score good">8.5</div>
</div>
<div class="mockup-row">
<div class="mockup-avatar">АГ</div>
<div class="mockup-info"><div class="mockup-info-line" style="width:60%"></div><div class="mockup-info-line"></div></div>
<div class="mockup-score good">7.2</div>
</div>
<div class="mockup-row">
<div class="mockup-avatar">КА</div>
<div class="mockup-info"><div class="mockup-info-line" style="width:40%"></div><div class="mockup-info-line"></div></div>
<div class="mockup-score mid">3.8</div>
</div>
<div class="mockup-row">
<div class="mockup-avatar">АЛ</div>
<div class="mockup-info"><div class="mockup-info-line" style="width:30%"></div><div class="mockup-info-line"></div></div>
<div class="mockup-score bad">2.8</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ STEPS ═══ -->
<section id="steps" class="section" aria-labelledby="steps-title">
<div class="container">
<div class="section-header">
<div class="section-eyebrow reveal">Как это работает</div>
<h2 id="steps-title" class="section-title reveal reveal-delay-1">Три шага до роста конверсии</h2>
</div>
<div class="steps-container">
<div class="steps-visual reveal" aria-hidden="true">
<div class="steps-icon">📊</div>
<div style="font-size:20px;font-weight:700;margin-bottom:4px;">Аналитика в реальном времени</div>
<div style="color:var(--color-text-secondary);font-size:14px;">Загрузите файл — получите отчёт за 2 минуты</div>
</div>
<div class="steps-list">
<div class="step-item reveal">
<div class="step-number">1</div>
<div>
<h3>Загрузите аудио</h3>
<p>Перетащите запись звонка из CRM. Поддерживаем MP3, WAV, M4A — до 100 МБ.</p>
</div>
</div>
<div class="step-item reveal reveal-delay-1">
<div class="step-number">2</div>
<div>
<h3>AI анализирует 10 параметров</h3>
<p>Нейросеть проверяет: приветствие, компанию, имя, тип клиента, комнаты, район, бюджет, был просмотр, встречу, контакт.</p>
</div>
</div>
<div class="step-item reveal reveal-delay-2">
<div class="step-number">3</div>
<div>
<h3>Получите отчёт</h3>
<p>PDF-отчёт с оценками, рейтингом операторов и рекомендациями по росту конверсии.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ TESTIMONIALS ═══ -->
<section class="section" aria-labelledby="testimonials-title">
<div class="container">
<div class="section-header">
<div class="section-eyebrow reveal">Отзывы</div>
<h2 id="testimonials-title" class="section-title reveal reveal-delay-1">Что говорят клиенты</h2>
</div>
<div class="testimonial-grid">
<div class="testimonial-card reveal">
<div class="testimonial-stars">★★★★★</div>
<blockquote>"calls24 помог увеличить конверсию звонков на 40%. Мы знали о проблемах, но не видели их."</blockquote>
<div class="testimonial-author">
<div class="testimonial-avatar">МК</div>
<div>
<div class="testimonial-name">Мария К.</div>
<div class="testimonial-role">Рук. отдела продаж, Agency X</div>
</div>
</div>
</div>
<div class="testimonial-card reveal reveal-delay-1">
<div class="testimonial-stars">★★★★★</div>
<blockquote>"Протестировали 3 инструмента. calls24 — единственный, кто дал реальные инсайты, а не просто цифры."</blockquote>
<div class="testimonial-author">
<div class="testimonial-avatar">АП</div>
<div>
<div class="testimonial-name">Алексей П.</div>
<div class="testimonial-role">CEO, RealEstate Pro</div>
</div>
</div>
</div>
<div class="testimonial-card reveal reveal-delay-2">
<div class="testimonial-stars">★★★★★</div>
<blockquote>"Еженедельный отчёт — наш главный инструмент развития команды. Каждый знает, над чем работать."</blockquote>
<div class="testimonial-author">
<div class="testimonial-avatar">ДВ</div>
<div>
<div class="testimonial-name">Дмитрий В.</div>
<div class="testimonial-role">Директор, Broker Plus</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ PRICING ═══ -->
<section id="pricing" class="section" aria-labelledby="pricing-title">
<div class="container">
<div class="section-header">
<div class="section-eyebrow reveal">Тарифы</div>
<h2 id="pricing-title" class="section-title reveal reveal-delay-1">Прозрачное ценообразование</h2>
<p class="section-subtitle reveal reveal-delay-2">Начните бесплатно. Платите за результат.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card reveal">
<div class="pricing-name">Аудит</div>
<div class="pricing-price">0₽</div>
<div class="pricing-desc">Попробуйте бесплатно</div>
<ul class="pricing-features">
<li><span class="check-icon">✓</span> 1 звонок</li>
<li><span class="check-icon">✓</span> Базовый отчёт</li>
<li><span class="check-icon">✓</span> 10 параметров</li>
<li class="disabled"><span class="cross-icon">×</span> Рейтинг операторов</li>
<li class="disabled"><span class="cross-icon">×</span> Рекомендации</li>
</ul>
<a href="#contact" class="btn btn-secondary">Попробовать</a>
</div>
<div class="pricing-card featured reveal reveal-delay-1">
<div class="pricing-name">Стандарт</div>
<div class="pricing-price">5 000₽</div>
<div class="pricing-desc">За 10 звонков</div>
<ul class="pricing-features">
<li><span class="check-icon">✓</span> 10 звонков</li>
<li><span class="check-icon">✓</span> Детальный отчёт</li>
<li><span class="check-icon">✓</span> Рейтинг операторов</li>
<li><span class="check-icon">✓</span> Рекомендации</li>
<li><span class="check-icon">✓</span> PDF экспорт</li>
</ul>
<a href="#contact" class="btn btn-primary magnetic-btn">Заказать</a>
</div>
<div class="pricing-card reveal reveal-delay-2">
<div class="pricing-name">Премиум</div>
<div class="pricing-price">15 000₽<span>/мес</span></div>
<div class="pricing-desc">Безлимитный доступ</div>
<ul class="pricing-features">
<li><span class="check-icon">✓</span> Безлимит звонков</li>
<li><span class="check-icon">✓</span> Ежедневные отчёты</li>
<li><span class="check-icon">✓</span> Динамика улучшений</li>
<li><span class="check-icon">✓</span> Интеграция с CRM</li>
<li><span class="check-icon">✓</span> Персональный менеджер</li>
</ul>
<a href="#contact" class="btn btn-secondary">Связаться</a>
</div>
</div>
</div>
</section>
<!-- ═══ CTA ═══ -->
<section id="contact" class="cta-section" aria-labelledby="cta-title">
<div class="gradient-orbs" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-3"></div>
</div>
<div class="container">
<div class="cta-content">
<h2 id="cta-title" class="cta-title reveal">Начните <span class="gradient-text">бесплатный аудит</span></h2>
<p class="cta-subtitle reveal reveal-delay-1">Загрузите одну запись звонка и получите полную аналитику бесплатно. Никаких обязательств.</p>
<div class="cta-actions reveal reveal-delay-2">
<a href="#" class="btn btn-primary btn-xl magnetic-btn">Загрузить звонок →</a>
</div>
</div>
</div>
</section>
</main>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer-inner">
<div class="footer-copy">© 2026 calls24. Все права защищены.</div>
<div class="footer-links">
<a href="#">Конфиденциальность</a>
<a href="#">Оферта</a>
<a href="mailto:hello@calls24.ru">hello@calls24.ru</a>
</div>
</div>
</div>
</footer>
<script>
// ═══════════════════════════════════════════
// MAGNETIC BUTTONS (Pattern #2)
// ═══════════════════════════════════════════
class MagneticButton {
constructor(el, opts = {}) {
this.el = el;
this.radius = opts.radius || 100;
this.strength = opts.strength || 0.4;
this.spring = opts.spring || 0.1;
this.rect = this.el.getBoundingClientRect();
this.x = this.rect.left + this.rect.width / 2;
this.y = this.rect.top + this.rect.height / 2;
this.currentX = 0; this.currentY = 0;
this.isHovering = false;
this.init();
}
init() {
this.el.addEventListener('mouseenter', () => this.isHovering = true);
this.el.addEventListener('mouseleave', () => { this.isHovering = false; this.animate(); });
this.el.addEventListener('mousemove', (e) => {
if (!this.isHovering) return;
this.targetX = (e.clientX - this.x) * this.strength;
this.targetY = (e.clientY - this.y) * this.strength;
});
this.animate();
}
animate() {
if (this.isHovering && this.targetX !== undefined) {
this.currentX += (this.targetX - this.currentX) * 0.3;
this.currentY += (this.targetY - this.currentY) * 0.3;
} else {
this.currentX *= (1 - this.spring);
this.currentY *= (1 - this.spring);
}
this.el.style.transform = `translate(${this.currentX}px, ${this.currentY}px)`;
requestAnimationFrame(() => this.animate());
}
}
// ═══════════════════════════════════════════
// STAGGERED REVEAL (Pattern #1)
// ═══════════════════════════════════════════
function initReveal() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
}
// ═══════════════════════════════════════════
// NAV SCROLL
// ═══════════════════════════════════════════
function initNav() {
const nav = document.querySelector('.nav');
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
if (window.scrollY > 50) nav.classList.add('scrolled');
else nav.classList.remove('scrolled');
ticking = false;
});
ticking = true;
}
}, { passive: true });
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.magnetic-btn').forEach(el => new MagneticButton(el, { radius: 120, strength: 0.4 }));
initReveal();
initNav();
});
</script>
</body>
</html>