968 lines
48 KiB
HTML
968 lines
48 KiB
HTML
<!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> |