2854 lines
94 KiB
HTML
2854 lines
94 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<!-- Yandex.Metrika -->
|
||
<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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ═══════════════════════════════════════════
|
||
DESIGN TOKENS
|
||
═══════════════════════════════════════════ */
|
||
:root {
|
||
/* Backgrounds */
|
||
--bg-primary: #0a0a0a;
|
||
--bg-secondary: #0f0f0f;
|
||
--bg-surface: #161616;
|
||
--bg-card: #1a1a1a;
|
||
--bg-elevated: #222222;
|
||
|
||
/* Borders */
|
||
--border: #222222;
|
||
--border-hairline: rgba(255, 255, 255, 0.06);
|
||
--border-hover: #333333;
|
||
|
||
/* Text */
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #a1a1aa;
|
||
--text-muted: #71717a;
|
||
--text-tertiary: #52525b;
|
||
|
||
/* Semantic colors */
|
||
--color-primary: var(--accent);
|
||
--color-secondary: var(--accent-secondary);
|
||
--color-tertiary: var(--accent-tertiary);
|
||
--color-warning: var(--warning);
|
||
--color-error: var(--error);
|
||
--color-success: var(--accent-secondary);
|
||
--color-info: var(--info);
|
||
|
||
/* Accent colors */
|
||
--accent: #ff3d00;
|
||
--accent-hover: #ff6e40;
|
||
--accent-secondary: #22c55e;
|
||
--accent-tertiary: #3b82f6;
|
||
--warning: #f59e0b;
|
||
--error: #ef4444;
|
||
--info: #0ea5e9;
|
||
|
||
/* Border radius */
|
||
--radius-sm: 6px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 14px;
|
||
--radius-xl: 20px;
|
||
--radius-2xl: 28px;
|
||
--radius-full: 100px;
|
||
|
||
/* Spacing scale (8px base) */
|
||
--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;
|
||
|
||
/* Typography scale */
|
||
--text-xs: 0.6875rem;
|
||
--text-sm: 0.75rem;
|
||
--text-base: 0.875rem;
|
||
--text-lg: 1rem;
|
||
--text-xl: 1.125rem;
|
||
--text-2xl: 1.5rem;
|
||
--text-3xl: 2rem;
|
||
--text-4xl: 2.5rem;
|
||
--text-5xl: 3rem;
|
||
--text-6xl: 4rem;
|
||
|
||
/* Z-index scale */
|
||
--z-dropdown: 100;
|
||
--z-sticky: 200;
|
||
--z-overlay: 300;
|
||
--z-modal: 400;
|
||
--z-tooltip: 500;
|
||
|
||
/* Transitions */
|
||
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--transition-fast: 0.15s;
|
||
--transition-base: 0.2s;
|
||
--transition-slow: 0.3s;
|
||
}
|
||
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 16px;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
ACCESSIBILITY
|
||
═══════════════════════════════════════════ */
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -48px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10000;
|
||
padding: 0.75rem 1.5rem;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-radius: var(--radius-md);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: top 0.2s var(--ease-out);
|
||
}
|
||
.skip-link:focus { top: 8px; }
|
||
|
||
:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
ABSTRACT GEOMETRY BACKGROUND (Bauhaus)
|
||
═══════════════════════════════════════════ */
|
||
.geo-bg {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.geo-shape {
|
||
position: absolute;
|
||
opacity: 0.03;
|
||
}
|
||
|
||
.geo-circle {
|
||
width: 600px; height: 600px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--accent);
|
||
}
|
||
|
||
.geo-circle-1 { top: -200px; right: -200px; }
|
||
.geo-circle-2 { width: 400px; height: 400px; top: 40vh; left: -100px; border-color: var(--accent-secondary); }
|
||
.geo-circle-3 { width: 300px; height: 300px; bottom: 10vh; right: 10vw; border-color: var(--accent-tertiary); }
|
||
|
||
.geo-square {
|
||
width: 200px; height: 200px;
|
||
border: 2px solid var(--accent);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.geo-square-1 { top: 20vh; left: 5vw; }
|
||
.geo-square-2 { width: 150px; height: 150px; bottom: 30vh; right: 5vw; border-color: var(--accent-secondary); }
|
||
|
||
.geo-line {
|
||
height: 2px;
|
||
background: var(--accent);
|
||
width: 400px;
|
||
}
|
||
|
||
.geo-line-1 { top: 30vh; right: 10vw; }
|
||
.geo-line-2 { bottom: 20vh; left: 10vw; width: 300px; background: var(--accent-secondary); }
|
||
|
||
.geo-dots {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 8px);
|
||
gap: 20px;
|
||
}
|
||
|
||
.geo-dot {
|
||
width: 4px; height: 4px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
}
|
||
|
||
.geo-dots-1 { top: 60vh; left: 15vw; }
|
||
.geo-dots-2 { bottom: 40vh; right: 20vw; }
|
||
|
||
/* ═══════════════════════════════════════════
|
||
LAYOUT
|
||
═══════════════════════════════════════════ */
|
||
.container {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
section {
|
||
padding: 6rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
HEADER
|
||
═══════════════════════════════════════════ */
|
||
.header {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
z-index: 100;
|
||
background: rgba(10, 10, 10, 0.85);
|
||
backdrop-filter: blur(24px);
|
||
-webkit-backdrop-filter: blur(24px);
|
||
border-bottom: 1px solid var(--border-hairline);
|
||
transition: all 0.3s var(--ease-out);
|
||
}
|
||
|
||
.header.scrolled {
|
||
background: rgba(10, 10, 10, 0.95);
|
||
box-shadow: 0 1px 0 var(--border);
|
||
}
|
||
|
||
.header-inner {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0.875rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
font-weight: 900;
|
||
font-size: 1.375rem;
|
||
letter-spacing: -0.03em;
|
||
text-decoration: none;
|
||
color: var(--text-primary);
|
||
transition: opacity 0.2s var(--ease-out);
|
||
}
|
||
|
||
.logo:hover { opacity: 0.8; }
|
||
|
||
.logo span { color: var(--accent); }
|
||
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.nav a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
padding: 0.5rem 0.875rem;
|
||
border-radius: var(--radius-md);
|
||
transition: all 0.2s var(--ease-out);
|
||
position: relative;
|
||
}
|
||
|
||
.nav a:hover {
|
||
color: var(--text-primary);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.nav-cta {
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.625rem 1.25rem;
|
||
border-radius: var(--radius-md);
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
border: none;
|
||
transition: all 0.15s var(--ease-out);
|
||
font-family: inherit;
|
||
position: relative;
|
||
overflow: hidden;
|
||
-webkit-tap-highlight-color: transparent;
|
||
will-change: transform;
|
||
}
|
||
|
||
.report-tab.active {
|
||
background: var(--accent);
|
||
color: white;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
/* Report Tab Content */
|
||
.report-tab-content {
|
||
display: block;
|
||
}
|
||
|
||
.report-tab-content:not(.active) {
|
||
display: none;
|
||
}
|
||
|
||
/* Details Grid */
|
||
.details-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.detail-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.operator-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.operator-detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.operator-detail-row span:first-child {
|
||
min-width: 120px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.operator-detail-bar {
|
||
flex: 1;
|
||
height: 8px;
|
||
background: var(--border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.operator-detail-fill {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
transition: width 0.8s var(--ease-smooth);
|
||
}
|
||
|
||
.operator-detail-row span:last-child {
|
||
min-width: 50px;
|
||
text-align: right;
|
||
font-weight: 700;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.script-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.script-item {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.script-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.script-item-header strong {
|
||
font-size: 0.9375rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.script-item-badge {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
background: rgba(255, 61, 0, 0.15);
|
||
color: var(--accent);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Recommendations */
|
||
.recommendations-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.recommendation-item {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.recommendation-priority {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
white-space: nowrap;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.recommendation-priority.high {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: var(--error);
|
||
}
|
||
|
||
.recommendation-priority.medium {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.recommendation-priority.low {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
color: var(--accent-tertiary);
|
||
}
|
||
|
||
.recommendation-content strong {
|
||
display: block;
|
||
font-size: 0.9375rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.recommendation-summary {
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02));
|
||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: var(--accent-secondary);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--accent-hover);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 24px -4px rgba(255, 61, 0, 0.5);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
transform: scale(0.97);
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 8px -2px rgba(255, 61, 0, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
border-color: var(--border-hover);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.btn-secondary:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-green {
|
||
background: var(--accent-secondary);
|
||
color: #000;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 16px -4px rgba(34, 197, 94, 0.4);
|
||
}
|
||
|
||
.btn-green:hover {
|
||
background: #16a34a;
|
||
}
|
||
|
||
.btn-green:active {
|
||
transform: scale(0.97);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
HERO
|
||
═══════════════════════════════════════════ */
|
||
.hero {
|
||
padding-top: 140px;
|
||
padding-bottom: 4rem;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 300px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 800px;
|
||
height: 400px;
|
||
background: radial-gradient(ellipse at center, rgba(255, 61, 0, 0.08) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.6875rem;
|
||
font-weight: 500;
|
||
color: var(--accent);
|
||
padding: 0.375rem 0.875rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-full);
|
||
background: rgba(255, 61, 0, 0.04);
|
||
margin-bottom: 2rem;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.badge-dot {
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 6px var(--accent);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||
font-weight: 800;
|
||
line-height: 1.08;
|
||
letter-spacing: -0.045em;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.125rem;
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto 2rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.hero-trust {
|
||
display: flex;
|
||
gap: 2rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.hero-trust span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.hero-trust .dot {
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent-secondary);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
NUMBERS STRIP
|
||
═══════════════════════════════════════════ */
|
||
.numbers-strip {
|
||
padding: 4rem 0;
|
||
border-top: 1px solid var(--border-hairline);
|
||
border-bottom: 1px solid var(--border-hairline);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.numbers-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.number-item { padding: 1.5rem 1rem; }
|
||
|
||
.number-value {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
line-height: 1;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.number-value.red { color: var(--error); }
|
||
.number-value.green { color: var(--accent-secondary); }
|
||
.number-value.blue { color: var(--accent-tertiary); }
|
||
.number-value.yellow { color: var(--warning); }
|
||
|
||
.number-label {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
FEATURES
|
||
═══════════════════════════════════════════ */
|
||
.section-header {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto 4rem;
|
||
}
|
||
|
||
.section-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.6875rem;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--accent);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: clamp(1.75rem, 4vw, 2.75rem);
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
line-height: 1.15;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-header p {
|
||
color: var(--text-secondary);
|
||
font-size: 1.0625rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
transition: all 0.3s var(--ease-out);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
border-color: var(--border-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 2.5rem; height: 2.5rem;
|
||
border-radius: var(--radius-md);
|
||
background: rgba(255, 61, 0, 0.08);
|
||
border: 1px solid rgba(255, 61, 0, 0.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1.25rem;
|
||
color: var(--accent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feature-icon svg {
|
||
width: 1.25rem; height: 1.25rem;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 1.0625rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
REPORT PREVIEW
|
||
═══════════════════════════════════════════ */
|
||
.report-section {
|
||
background: var(--bg-secondary);
|
||
border-top: 1px solid var(--border-hairline);
|
||
border-bottom: 1px solid var(--border-hairline);
|
||
}
|
||
|
||
.report-preview {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.report-header {
|
||
padding: 1.5rem 2rem;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.report-header h3 {
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.report-tabs {
|
||
display: flex;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.report-tab {
|
||
padding: 0.375rem 0.875rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
transition: all 0.2s var(--ease-out);
|
||
border: none;
|
||
background: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.report-tab.active {
|
||
background: var(--accent);
|
||
color: white;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
/* Report Tab Content */
|
||
.report-tab-content {
|
||
display: block;
|
||
}
|
||
|
||
.report-tab-content:not(.active) {
|
||
display: none;
|
||
}
|
||
|
||
/* Details Grid */
|
||
.details-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.detail-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.operator-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.operator-detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.operator-detail-row span:first-child {
|
||
min-width: 120px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.operator-detail-bar {
|
||
flex: 1;
|
||
height: 8px;
|
||
background: var(--border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.operator-detail-fill {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
transition: width 0.8s var(--ease-smooth);
|
||
}
|
||
|
||
.operator-detail-row span:last-child {
|
||
min-width: 50px;
|
||
text-align: right;
|
||
font-weight: 700;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.script-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.script-item {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.script-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.script-item-header strong {
|
||
font-size: 0.9375rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.script-item-badge {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
background: rgba(255, 61, 0, 0.15);
|
||
color: var(--accent);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Recommendations */
|
||
.recommendations-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.recommendation-item {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.recommendation-priority {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
white-space: nowrap;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.recommendation-priority.high {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: var(--error);
|
||
}
|
||
|
||
.recommendation-priority.medium {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.recommendation-priority.low {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
color: var(--accent-tertiary);
|
||
}
|
||
|
||
.recommendation-content strong {
|
||
display: block;
|
||
font-size: 0.9375rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.recommendation-summary {
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02));
|
||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: var(--accent-secondary);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 0.25rem;
|
||
}
|
||
.report-body {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.report-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.report-metric {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.report-metric-label {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.report-metric-value {
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.report-metric-change {
|
||
font-size: 0.75rem;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.report-metric-change.positive { color: var(--accent-secondary); }
|
||
.report-metric-change.negative { color: var(--error); }
|
||
|
||
.report-chart {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.chart-bar-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.chart-bar-label {
|
||
width: 120px;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chart-bar-track {
|
||
flex: 1;
|
||
height: 24px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-bar {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
transition: width 1s var(--ease-spring);
|
||
}
|
||
|
||
.chart-bar.red { background: linear-gradient(90deg, var(--error), #f97316); }
|
||
.chart-bar.green { background: linear-gradient(90deg, var(--accent-secondary), #10b981); }
|
||
.chart-bar.blue { background: linear-gradient(90deg, var(--accent-tertiary), #0ea5e9); }
|
||
.chart-bar.yellow { background: linear-gradient(90deg, var(--warning), #fbbf24); }
|
||
|
||
.chart-bar-value {
|
||
width: 40px;
|
||
text-align: right;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.report-call-list {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 1.5rem;
|
||
}
|
||
|
||
.report-call-list h4 {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.report-call {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 0.875rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border);
|
||
margin-bottom: 0.5rem;
|
||
transition: all 0.2s var(--ease-out);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.report-call:hover {
|
||
border-color: var(--border-hover);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.report-call-score {
|
||
width: 40px; height: 40px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.report-call-score.high {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
color: var(--accent-secondary);
|
||
}
|
||
|
||
.report-call-score.medium {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.report-call-score.low {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: var(--error);
|
||
}
|
||
|
||
.report-call-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.report-call-number {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.report-call-meta {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.report-call-tags {
|
||
display: flex;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.report-tag {
|
||
font-size: 0.625rem;
|
||
padding: 0.1875rem 0.5rem;
|
||
border-radius: var(--radius-full);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.report-tag.pass {
|
||
background: rgba(34, 197, 94, 0.1);
|
||
color: var(--accent-secondary);
|
||
}
|
||
|
||
.report-tag.fail {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
color: var(--error);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
EMPLOYEE DASHBOARD
|
||
═══════════════════════════════════════════ */
|
||
.dashboard-section {
|
||
background: var(--bg-secondary);
|
||
border-top: 1px solid var(--border-hairline);
|
||
border-bottom: 1px solid var(--border-hairline);
|
||
}
|
||
|
||
.dashboard-preview {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.dashboard-header {
|
||
padding: 1.5rem 2rem;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.dashboard-title {
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.dashboard-tabs {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.dashboard-tab {
|
||
padding: 0.375rem 0.875rem;
|
||
font-size: 0.75rem;
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-muted);
|
||
background: none;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.dashboard-tab.active {
|
||
background: rgba(255, 61, 0, 0.08);
|
||
border-color: rgba(255, 61, 0, 0.2);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.dashboard-body {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.employee-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.employee-row {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 1rem 1.25rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border);
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.employee-row:hover {
|
||
border-color: var(--border-hover);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.employee-row.header {
|
||
background: transparent;
|
||
border: none;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.employee-row.header span {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.employee-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.employee-avatar {
|
||
width: 32px; height: 32px;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.employee-avatar.av1 { background: rgba(59, 130, 246, 0.15); color: var(--accent-tertiary); }
|
||
.employee-avatar.av2 { background: rgba(34, 197, 94, 0.15); color: var(--accent-secondary); }
|
||
.employee-avatar.av3 { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
|
||
.employee-avatar.av4 { background: rgba(255, 61, 0, 0.15); color: var(--error); }
|
||
.employee-avatar.av5 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
|
||
|
||
.employee-name-text {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.employee-stat {
|
||
font-size: 0.875rem;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.employee-score {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.score-high { color: var(--accent-secondary); }
|
||
.score-medium { color: var(--warning); }
|
||
.score-low { color: var(--error); }
|
||
|
||
/* ═══════════════════════════════════════════
|
||
HOW IT WORKS
|
||
═══════════════════════════════════════════ */
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.step {
|
||
text-align: center;
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
|
||
.step-number {
|
||
width: 3rem; height: 3rem;
|
||
border-radius: 50%;
|
||
background: var(--bg-card);
|
||
border: 2px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
font-weight: 800;
|
||
margin: 0 auto 1.5rem;
|
||
color: var(--accent);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.step h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.step p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
PRICING
|
||
═══════════════════════════════════════════ */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.25rem;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
padding: 2.5rem 2rem;
|
||
text-align: center;
|
||
transition: all 0.3s var(--ease-out);
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-card:hover {
|
||
border-color: var(--border-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.pricing-card.featured {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.pricing-card.featured::before {
|
||
content: "Популярный";
|
||
position: absolute;
|
||
top: -0.625rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 0.25rem 1rem;
|
||
background: var(--accent);
|
||
color: white;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-full);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
|
||
/* Enterprise pricing card */
|
||
.pricing-card.enterprise {
|
||
border-color: var(--accent-secondary);
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-card) 100%);
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-label-custom {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(34, 197, 94, 0.1);
|
||
color: var(--accent-secondary);
|
||
display: inline-block;
|
||
margin-bottom: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.pricing-subprice {
|
||
font-size: 0.75rem;
|
||
color: var(--accent-secondary);
|
||
font-weight: 500;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.pricing-card.enterprise .pricing-price {
|
||
color: var(--accent-secondary);
|
||
}
|
||
|
||
.pricing-card.enterprise .pricing-features li::before {
|
||
content: "✓";
|
||
color: var(--accent-secondary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Report tab content */
|
||
.report-tab-content {
|
||
display: block;
|
||
}
|
||
|
||
.report-tab-content:not(.active) {
|
||
display: none;
|
||
}
|
||
.pricing-name {
|
||
font-weight: 700;
|
||
font-size: 1.125rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.pricing-desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.pricing-price span {
|
||
font-size: 0.875rem;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.pricing-features {
|
||
list-style: none;
|
||
margin: 1.5rem 0 2rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.pricing-features li {
|
||
padding: 0.375rem 0;
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pricing-features li::before {
|
||
content: "✓";
|
||
color: var(--accent-secondary);
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
CTA SECTION
|
||
═══════════════════════════════════════════ */
|
||
.cta-section {
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 8rem 0;
|
||
}
|
||
|
||
.cta-section::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at center, rgba(255, 61, 0, 0.06) 0%, transparent 60%);
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.04em;
|
||
max-width: 600px;
|
||
margin: 0 auto 1.5rem;
|
||
}
|
||
|
||
.cta-subtitle {
|
||
font-size: 1.125rem;
|
||
color: var(--text-secondary);
|
||
max-width: 500px;
|
||
margin: 0 auto 2.5rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
FOOTER
|
||
═══════════════════════════════════════════ */
|
||
.footer {
|
||
padding: 4rem 0 2rem;
|
||
border-top: 1px solid var(--border-hairline);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.5fr repeat(3, 1fr);
|
||
gap: 3rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.footer-brand p {
|
||
color: var(--text-secondary);
|
||
margin-top: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
max-width: 18rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.footer-col h4 {
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.footer-col ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-col li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.footer-col a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.8125rem;
|
||
transition: color 0.2s var(--ease-out);
|
||
}
|
||
|
||
.footer-col a:hover { color: var(--text-primary); }
|
||
|
||
.footer-contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.footer-contact a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
transition: color 0.2s var(--ease-out);
|
||
}
|
||
|
||
.footer-contact a:hover { color: var(--text-primary); }
|
||
|
||
.footer-bottom {
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--border-hairline);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.footer-bottom {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.footer-legal {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.footer-legal a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer-legal a:hover { text-decoration: underline; }
|
||
|
||
/* ═══════════════════════════════════════════
|
||
COOKIE BANNER
|
||
═══════════════════════════════════════════ */
|
||
.cookie-banner {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
background: var(--bg-surface);
|
||
border-top: 1px solid var(--border);
|
||
padding: 1.25rem 1.5rem;
|
||
transform: translateY(100%);
|
||
transition: transform 0.5s var(--ease-spring);
|
||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.cookie-banner.visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.cookie-inner {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.cookie-text {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
.cookie-text a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.cookie-text a:hover { text-decoration: underline; }
|
||
|
||
.cookie-buttons {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
PRIVACY PAGE (modal)
|
||
═══════════════════════════════════════════ */
|
||
.privacy-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9998;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s var(--ease-out);
|
||
}
|
||
|
||
.privacy-overlay.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.privacy-modal {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
max-width: 700px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
padding: 2.5rem;
|
||
margin: 1.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.privacy-close {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font-size: 1.25rem;
|
||
padding: 0.5rem;
|
||
border-radius: var(--radius-md);
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.privacy-close:hover {
|
||
color: var(--text-primary);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.privacy-modal h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 1.5rem;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.privacy-modal h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.privacy-modal p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
RESPONSIVE
|
||
═══════════════════════════════════════════ */
|
||
@media (max-width: 768px) {
|
||
.nav { display: none; }
|
||
.hero { padding-top: 100px; }
|
||
.section { padding: 4rem 0; }
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.numbers-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.steps-grid { grid-template-columns: 1fr; }
|
||
.pricing-grid { grid-template-columns: 1fr; }
|
||
.footer-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.report-metrics { grid-template-columns: repeat(2, 1fr); }
|
||
.employee-row { grid-template-columns: 2fr 1fr; }
|
||
.employee-row > :nth-child(3),
|
||
.employee-row > :nth-child(4),
|
||
.employee-row > :nth-child(5) { display: none; }
|
||
.cookie-inner { flex-direction: column; text-align: center; }
|
||
.dashboard-preview, .report-preview { border-radius: var(--radius-lg); }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.numbers-grid { grid-template-columns: 1fr; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Skip link -->
|
||
<a href="#main" class="skip-link">Перейти к содержимому</a>
|
||
|
||
<!-- Abstract Geometry Background -->
|
||
<div class="geo-bg">
|
||
<div class="geo-shape geo-circle geo-circle-1"></div>
|
||
<div class="geo-shape geo-circle geo-circle-2"></div>
|
||
<div class="geo-shape geo-circle geo-circle-3"></div>
|
||
<div class="geo-shape geo-square geo-square-1"></div>
|
||
<div class="geo-shape geo-square geo-square-2"></div>
|
||
<div class="geo-shape geo-line geo-line-1"></div>
|
||
<div class="geo-shape geo-line geo-line-2"></div>
|
||
<div class="geo-shape geo-dots geo-dots-1">
|
||
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div>
|
||
</div>
|
||
<div class="geo-shape geo-dots geo-dots-2">
|
||
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
|
||
<div class="geo-dot"></div><div class="geo-dot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header class="header" role="banner">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">calls<span>24</span></a>
|
||
<nav class="nav" aria-label="Основная навигация">
|
||
<a href="#features">Возможности</a>
|
||
<a href="#report">Отчёты</a>
|
||
<a href="#dashboard">Дашборд</a>
|
||
<a href="#pricing">Тарифы</a>
|
||
<a href="#contact">Контакты</a>
|
||
</nav>
|
||
<a href="#audit" class="btn btn-primary nav-cta">Начать бесплатно</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<main id="main">
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="badge">
|
||
<span class="badge-dot"></span>
|
||
<span>Автоматический анализ звонков за 24 часа</span>
|
||
</div>
|
||
|
||
<h1>Узнайте, сколько денег теряет<br><em>ваш бизнес каждый месяц</em></h1>
|
||
|
||
<p class="hero-subtitle">
|
||
90% операторов не называют компанию, 85% не обсуждают бюджет.
|
||
Мы покажем где теряете клиентов — за 24 часа.
|
||
</p>
|
||
|
||
<div class="hero-buttons">
|
||
<a href="#audit" class="btn btn-primary">Узнать, сколько теряете →</a>
|
||
<a href="#report" class="btn btn-secondary">Посмотреть пример отчёта</a>
|
||
</div>
|
||
|
||
<div class="hero-trust">
|
||
<span><span class="dot"></span> Бесплатно для первого анализа</span>
|
||
<span>152-ФЗ</span>
|
||
<span>Без карты</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Numbers Strip -->
|
||
<section class="numbers-strip">
|
||
<div class="container">
|
||
<div class="numbers-grid">
|
||
<div class="number-item">
|
||
<div class="number-value red">90%</div>
|
||
<div class="number-label">Операторов не называют<br>компанию</div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value red">85%</div>
|
||
<div class="number-label">Не обсуждают бюджет<br>сделки</div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value red">80%</div>
|
||
<div class="number-label">Не берут контакт<br>клиента</div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value green">40%</div>
|
||
<div class="number-label">Лидов теряется<br>на этапе звонка</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section id="features" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Возможности</div>
|
||
<h2>Всё, что нужно. Ничего лишнего.</h2>
|
||
<p>Простой анализ звонков, который показывает конкретные ошибки и как их исправить. Для любого бизнеса.</p>
|
||
</div>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="9" cy="7" r="4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Анализ по скрипту</h3>
|
||
<p>ИИ проверяет каждый звонок по пунктам вашего скрипта: приветствие, потребности, бюджет, встреч...</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Детальный отчёт</h3>
|
||
<p>HTML-отчёт: что было хорошо, что плохо, конкретные фразы, рекомендации по скрипту.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>За 24 часа</h3>
|
||
<p>Отправьте 5–10 записей звонков — получите отчёт в течение суток. WAV, MP3, M4A.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="11" cy="11" r="8"/>
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Анализ каждого звонка</h3>
|
||
<p>Каждый звонок получает детальный разбор: оценки по критериям, ключевые фразы, рекомендации.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>152-ФЗ</h3>
|
||
<p>Обработка данных строго по закону. Ваши звонки и данные клиентов в безопасности.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Интеграция с CRM</h3>
|
||
<p>Подключаемся к вашей CRM, получаем данные о звонках автоматически, без ручного ввода.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Report Preview -->
|
||
<section id="report" class="report-section section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Пример отчёта</div>
|
||
<h2>Наглядный отчёт, который понимают все</h2>
|
||
<p>Не таблицы Excel. Не распмытые заметки. Красивый HTML-отчёт с метриками, графиками и рекомендациями.</p>
|
||
</div>
|
||
|
||
<div class="report-preview">
|
||
<div class="report-header">
|
||
<h3>📊 Отчёт по звонкам</h3>
|
||
<div class="report-tabs">
|
||
<button class="report-tab active" data-tab="overview">Обзор</button>
|
||
<button class="report-tab" data-tab="details">Детали</button>
|
||
<button class="report-tab" data-tab="recommendations">Рекомендации</button>
|
||
</div>
|
||
</div>
|
||
<div class="report-body">
|
||
<!-- TAB: Обзор -->
|
||
<div class="report-tab-content active" id="tab-overview">
|
||
<div class="report-metrics">
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Всего звонков</div>
|
||
<div class="report-metric-value">99</div>
|
||
<div class="report-metric-change positive">↑ 12% vs прошлый месяц</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Средний балл</div>
|
||
<div class="report-metric-value green">6.2</div>
|
||
<div class="report-metric-change positive">↑ 0.8 vs прошлый месяц</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Операторов</div>
|
||
<div class="report-metric-value blue">12</div>
|
||
<div class="report-metric-change">В работе</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Потенциал сделок</div>
|
||
<div class="report-metric-value green">~45</div>
|
||
<div class="report-metric-change negative">↓ 40% потеряно</div>
|
||
</div>
|
||
</div>
|
||
<div class="report-chart">
|
||
<h3 style="font-size:0.875rem;font-weight:600;margin-bottom:1.25rem;">Ошибки по категориям</h3>
|
||
<div class="chart-bar-container">
|
||
<span class="chart-bar-label">Не представились</span>
|
||
<div class="chart-bar-track">
|
||
<div class="chart-bar red" style="width:90%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">90%</span>
|
||
</div>
|
||
<div class="chart-bar-container">
|
||
<span class="chart-bar-label">Не назвали компанию</span>
|
||
<div class="chart-bar-track">
|
||
<div class="chart-bar red" style="width:90%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">90%</span>
|
||
</div>
|
||
<div class="chart-bar-container">
|
||
<span class="chart-bar-label">Не обсудили бюджет</span>
|
||
<div class="chart-bar-track">
|
||
<div class="chart-bar red" style="width:85%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">85%</span>
|
||
</div>
|
||
<div class="chart-bar-container">
|
||
<span class="chart-bar-label">Не задали вопросы</span>
|
||
<div class="chart-bar-track">
|
||
<div class="chart-bar yellow" style="width:78%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">78%</span>
|
||
</div>
|
||
<div class="chart-bar-container">
|
||
<span class="chart-bar-label">Не спросили имя</span>
|
||
<div class="chart-bar-track">
|
||
<div class="chart-bar yellow" style="width:80%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">80%</span>
|
||
</div>
|
||
</div>
|
||
<div class="report-call-list">
|
||
<h3>Последние звонки</h3>
|
||
<div class="report-call">
|
||
<div class="report-call-score high">8.0</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Муталова Р. — 15:32</div>
|
||
<div class="report-call-meta">Длительность: 4 мин 12 сек · 15.06.2025</div>
|
||
</div>
|
||
<div class="report-call-tags">
|
||
<span class="report-tag pass">Приветствие ✓</span>
|
||
<span class="report-tag pass">Бюджет ✓</span>
|
||
<span class="report-tag fail">Имя ✗</span>
|
||
</div>
|
||
</div>
|
||
<div class="report-call">
|
||
<div class="report-call-score low">1.5</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Иванов С. — 14:15</div>
|
||
<div class="report-call-meta">Длительность: 1 мин 47 сек · 15.06.2025</div>
|
||
</div>
|
||
<div class="report-call-tags">
|
||
<span class="report-tag fail">Приветствие ✗</span>
|
||
<span class="report-tag fail">Бюджет ✗</span>
|
||
<span class="report-tag fail">Контакт ✗</span>
|
||
</div>
|
||
</div>
|
||
<div class="report-call">
|
||
<div class="report-call-score medium">5.0</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Петрова А. — 13:45</div>
|
||
<div class="report-call-meta">Длительность: 3 мин 28 сек · 14.06.2025</div>
|
||
</div>
|
||
<div class="report-call-tags">
|
||
<span class="report-tag pass">Приветствие ✓</span>
|
||
<span class="report-tag fail">Бюджет ✗</span>
|
||
<span class="report-tag pass">Имя ✓</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: Детали -->
|
||
<div class="report-tab-content" id="tab-details" style="display:none">
|
||
<div class="details-grid">
|
||
<div class="detail-card">
|
||
<div class="detail-label">Агентство</div>
|
||
<div class="detail-value">Недвижимость Плюс</div>
|
||
</div>
|
||
<div class="detail-card">
|
||
<div class="detail-label">Период</div>
|
||
<div class="detail-value">01.06 — 15.06.2025</div>
|
||
</div>
|
||
<div class="detail-card">
|
||
<div class="detail-label">Источник</div>
|
||
<div class="detail-value">IP-телефония</div>
|
||
</div>
|
||
<div class="detail-card">
|
||
<div class="detail-label">Обработано</div>
|
||
<div class="detail-value">99 звонков · 87 329 символов</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Детализация по операторам</h3>
|
||
<div class="operator-detail">
|
||
<div class="operator-detail-row">
|
||
<span>Муталова Р.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:95%;background:var(--accent-secondary)"></div>
|
||
</div>
|
||
<span>8.0/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Сидоров К.В.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:82%;background:var(--accent-secondary)"></div>
|
||
</div>
|
||
<span>6.8/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Петрова А.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:62%;background:var(--warning)"></div>
|
||
</div>
|
||
<span>5.2/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Иванов С.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:18%;background:var(--error)"></div>
|
||
</div>
|
||
<span>1.5/10</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Скрипты клиентов</h3>
|
||
<div class="script-list">
|
||
<div class="script-item">
|
||
<div class="script-item-header">
|
||
<strong>«Подскажите, а вы работаете с ипотекой?»</strong>
|
||
<span class="script-item-badge">Высокий интерес</span>
|
||
</div>
|
||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Встречается в 34% звонков. Клиент готов к обсуждению условий</p>
|
||
</div>
|
||
<div class="script-item">
|
||
<div class="script-item-header">
|
||
<strong>«Нужна квартира в центре, до 15 млн»</strong>
|
||
<span class="script-item-badge" style="background:rgba(34,197,94,0.15);color:var(--accent-secondary)">Горячий лид</span>
|
||
</div>
|
||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Чёткий бюджет и требования — 22% звонков</p>
|
||
</div>
|
||
<div class="script-item">
|
||
<div class="script-item-header">
|
||
<strong>«Просто посмотрю, пока»</strong>
|
||
<span class="script-item-badge" style="background:rgba(239,68,68,0.15);color:var(--error)">Холодный</span>
|
||
</div>
|
||
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Клиент не готов к разговору — 44% звонков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: Рекомендации -->
|
||
<div class="report-tab-content" id="tab-recommendations" style="display:none">
|
||
<div class="recommendations-list">
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority high">Высокий</div>
|
||
<div class="recommendation-content">
|
||
<strong>90% операторов не называют компанию</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Это первая критическая ошибка. Добавьте скрипт приветствия с названием компании. Ожидаемый рост конверсии: +15-20%</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority high">Высокий</div>
|
||
<div class="recommendation-content">
|
||
<strong>85% не обсуждают бюджет</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Операторы боятся спрашивать о бюджете. Внедрите вопрос «Какой диапазон бюджета вы рассматриваете?» после описания проблемы клиента</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority medium">Средний</div>
|
||
<div class="recommendation-content">
|
||
<strong>80% не спрашивают имя клиента</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Персонализация повышает доверие. Добавьте вопрос «Как к вам обращаться?» после первого представления</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority medium">Средний</div>
|
||
<div class="recommendation-content">
|
||
<strong>78% не задают уточняющие вопросы</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Обучите операторов технике «3 вопроса» — задайте минимум 3 уточняющих вопроса перед предложением</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority low">Низкий</div>
|
||
<div class="recommendation-content">
|
||
<strong>Петрова А. — зона внимания</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Средний балл 5.2. Рекомендуется прослушать 10 звонков и провести индивидуальный разбор с менеджером</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-summary">
|
||
<div class="summary-value">~180 000 ₽</div>
|
||
<div class="summary-label">Потенциальный доп. доход при исправлении всех ошибок</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Employee Dashboard -->
|
||
<section id="dashboard" class="dashboard-section section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Дашборд по сотрудникам</div>
|
||
<h2>Видьте кто продаёт, а кто сливает</h2>
|
||
<p>Рейтинг операторов, конкретные ошибки каждого, рекомендации по обучению.</p>
|
||
</div>
|
||
|
||
<div class="dashboard-preview">
|
||
<div class="dashboard-header">
|
||
<div class="dashboard-title">👥 Дашборд сотрудников</div>
|
||
<div class="dashboard-tabs">
|
||
<button class="dashboard-tab active">Рейтинг</button>
|
||
<button class="dashboard-tab">Среднее</button>
|
||
<button class="dashboard-tab">Звонки</button>
|
||
</div>
|
||
</div>
|
||
<div class="dashboard-body">
|
||
<div class="employee-list">
|
||
<div class="employee-row header">
|
||
<span>Сотрудник</span>
|
||
<span>Звонки</span>
|
||
<span>Ср. балл</span>
|
||
<span>Приветствие</span>
|
||
<span>Бюджет</span>
|
||
</div>
|
||
<div class="employee-row">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av2">РМ</div>
|
||
<span class="employee-name-text">Муталова Р.</span>
|
||
</div>
|
||
<span class="employee-stat">47</span>
|
||
<span class="employee-score score-high">7.8</span>
|
||
<span class="employee-score score-high">92%</span>
|
||
<span class="employee-score score-high">88%</span>
|
||
</div>
|
||
<div class="employee-row">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av1">АП</div>
|
||
<span class="employee-name-text">Петрова А.</span>
|
||
</div>
|
||
<span class="employee-stat">38</span>
|
||
<span class="employee-score score-medium">5.4</span>
|
||
<span class="employee-score score-high">85%</span>
|
||
<span class="employee-score score-medium">72%</span>
|
||
</div>
|
||
<div class="employee-row">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av3">ДК</div>
|
||
<span class="employee-name-text">Козлов Д.</span>
|
||
</div>
|
||
<span class="employee-stat">52</span>
|
||
<span class="employee-score score-medium">4.6</span>
|
||
<span class="employee-score score-medium">68%</span>
|
||
<span class="employee-score score-low">55%</span>
|
||
</div>
|
||
<div class="employee-row">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av4">СИ</div>
|
||
<span class="employee-name-text">Иванов С.</span>
|
||
</div>
|
||
<span class="employee-stat">29</span>
|
||
<span class="employee-score score-low">2.1</span>
|
||
<span class="employee-score score-low">33%</span>
|
||
<span class="employee-score score-low">24%</span>
|
||
</div>
|
||
<div class="employee-row">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av5">ЕС</div>
|
||
<span class="employee-name-text">Сидорова Е.</span>
|
||
</div>
|
||
<span class="employee-stat">33</span>
|
||
<span class="employee-score score-medium">5.8</span>
|
||
<span class="employee-score score-medium">78%</span>
|
||
<span class="employee-score score-high">81%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How it works -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Как это работает</div>
|
||
<h2>Три простых шага</h2>
|
||
</div>
|
||
|
||
<div class="steps-grid">
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<h3>Загружаете звонки</h3>
|
||
<p>Отправьте 5–10 записей звонков в любом формате: WAV, MP3, M4A</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<h3>Локальная ИИ анализирует</h3>
|
||
<p>Наш ИИ проверяет по чек-листу: скрипт, тон, ключевые фразы, ошибки</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<h3>Получаете отчёт</h3>
|
||
<p>Детальный HTML-отчёт с метриками, графиками и рекомендациями</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section id="pricing" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Тарифы</div>
|
||
<h2>Простые и прозрачные цены</h2>
|
||
</div>
|
||
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card">
|
||
<div class="pricing-name">Бесплатный аудит</div>
|
||
<div class="pricing-desc">Попробуйте без обязательств</div>
|
||
<div class="pricing-price">0 ₽</div>
|
||
<ul class="pricing-features">
|
||
<li>До 20 звонков</li>
|
||
<li>Базовый отчёт</li>
|
||
<li>Общий балл по звонкам</li>
|
||
</ul>
|
||
<a href="#" class="btn btn-secondary" style="width:100%;justify-content:center;">Загрузить звонки</a>
|
||
</div>
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-label-popular">Популярный</div>
|
||
<div class="pricing-name">Про</div>
|
||
<div class="pricing-desc">Для растущих команд</div>
|
||
<div class="pricing-price">4 999 ₽ <span>/мес</span></div>
|
||
<ul class="pricing-features">
|
||
<li>Неограниченные звонки</li>
|
||
<li>Полный отчёт + рекомендации</li>
|
||
<li>Дашборд сотрудников</li>
|
||
<li>История за 12 месяцев</li>
|
||
<li>Email-поддержка</li>
|
||
</ul>
|
||
<a href="#audit" class="btn btn-primary" style="width:100%;justify-content:center;">Начать бесплатно</a>
|
||
</div>
|
||
<div class="pricing-card enterprise">
|
||
<div class="pricing-label-custom">Индивидуально</div>
|
||
<div class="pricing-name">Бизнес</div>
|
||
<div class="pricing-desc">Для компаний с высокими требованиями</div>
|
||
<div class="pricing-price">от 30 000 ₽</div>
|
||
<div class="pricing-subprice">первый месяц — бесплатно</div>
|
||
<ul class="pricing-features">
|
||
<li>Всё из тарифа «Про»</li>
|
||
<li>Интеграция с вашей CRM (Bitrix24, amoCRM, etc.)</li>
|
||
<li>Доработка под задачи вашего бизнеса</li>
|
||
<li>Кастомные метрики и KPI</li>
|
||
<li>Выделенный менеджер</li>
|
||
<li>Обучение команды</li>
|
||
<li>API-доступ</li>
|
||
</ul>
|
||
<a href="https://t.me/n1kt4r" target="_blank" class="btn btn-green" style="width:100%;justify-content:center;">Обсудить проект</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>Каждый день без анализа звонков =<br>потерянные деньги клиентов</h2>
|
||
<p class="cta-subtitle">
|
||
90% операторов не называют компанию. 85% не обсуждают бюджет.
|
||
Загрузите 5–10 звонков — узнайте, сколько потеряли и как исправить.
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="#audit" class="btn btn-primary">Узнать, сколько потеряли →</a>
|
||
<a href="https://t.me/n1kt4r" class="btn btn-secondary" target="_blank" rel="noopener">Написать в Telegram</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer" role="contentinfo" id="contact">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a href="#" class="logo" style="font-size:1.25rem;">calls<span>24</span></a>
|
||
<p>Анализ звонков для любого бизнеса. Узнайте, где теряете клиентов — за 24 часа.</p>
|
||
<div style="margin-top:1.5rem;">
|
||
<a href="https://t.me/n1kt4r" class="btn btn-primary" target="_blank" rel="noopener" style="font-size:0.8125rem;">Написать в Telegram</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h5>Продукт</h5>
|
||
<ul>
|
||
<li><a href="#features">Возможности</a></li>
|
||
<li><a href="#pricing">Тарифы</a></li>
|
||
<li><a href="#report">Пример отчёта</a></li>
|
||
<li><a href="#dashboard">Дашборд</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h5>Компания</h5>
|
||
<ul>
|
||
<li><a href="#">О нас</a></li>
|
||
<li><a href="#">Блог</a></li>
|
||
<li><a href="#">Контакты</a></li>
|
||
<li><a href="#" id="privacy-link">Политика конфиденциальности</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h5>Контакты</h5>
|
||
<div class="footer-contact">
|
||
<a href="https://t.me/n1kt4r" target="_blank" rel="noopener">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3l-4.61-1.47c-1-.316-.966-1 .19-1.5l15.97-6.16c.73-.33 1.43.18 1.15 1.5l-2.72 12.81c-.19.91-.74 1.12-1.5.7l-4.16-3.07-3.88 3.74c-.42.42-.78.78-1.6.78l.21-4.43z"/></svg>
|
||
Telegram: @n1kt4r
|
||
</a>
|
||
<a href="tel:+79177776086">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||
+7 (917) 777-60-86
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div class="footer-legal">
|
||
<strong>ИП Тарасов И.А.</strong> · ИНН 164409454858 · ОГРНИП 325046600060241<br>
|
||
450000, Республика Башкортостан, г. Уфа<br>
|
||
<a href="#" id="privacy-link-footer">Политика конфиденциальности</a>
|
||
</div>
|
||
<span>© 2026 calls24 · ИП Тарасов И.А. Все права защищены.</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Cookie Banner -->
|
||
<div class="cookie-banner" id="cookie-banner" role="dialog" aria-label="Cookie consent">
|
||
<div class="cookie-inner">
|
||
<p class="cookie-text">
|
||
Мы используем файлы cookie для персонализации сервисов и повышения удобства работы с сайтом.
|
||
Если вы не согласны на их обработку, <a href="#" id="privacy-cookie-link">измените настройки браузера</a>.
|
||
</p>
|
||
<div class="cookie-buttons">
|
||
<button class="btn btn-secondary" id="cookie-decline" style="padding:0.5rem 1rem;font-size:0.8125rem;">Отклонить</button>
|
||
<button class="btn btn-primary" id="cookie-accept" style="padding:0.5rem 1rem;font-size:0.8125rem;">Принять</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Privacy Policy Modal -->
|
||
<div class="privacy-overlay" id="privacy-overlay">
|
||
<div class="privacy-modal">
|
||
<button class="privacy-close" id="privacy-close">×</button>
|
||
<h2>Политика конфиденциальности</h2>
|
||
|
||
<h3>1. Общие положения</h3>
|
||
<p>Настоящая Политика конфиденциальности действует в отношении персональных данных пользователя, которые ИП Тарасов И.А. (далее — «Оператор») может получить от пользователя во время использования сайта calls24.</p>
|
||
|
||
<h3>2. Персональные данные</h3>
|
||
<p>Оператор собирает и хранит следующие персональные данные пользователя: имя, адрес электронной почты, номер телефона, записи телефонных разговоров. Все данные обрабатываются в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
|
||
|
||
<h3>3. Цели обработки</h3>
|
||
<p>Персональные данные используются исключительно для предоставления услуг по анализу звонков, связи с клиентом, улучшения качества сервиса. Оператор не передаёт персональные данные третьим лицам, кроме случаев, предусмотренных законодательством РФ.</p>
|
||
|
||
<h3>4. Файлы cookie</h3>
|
||
<p>Сайт использует файлы cookie для обеспечения корректной работы, аналитики и персонализации контента. Пользователь может отключить использование cookie в настройках своего браузера.</p>
|
||
|
||
<h3>5. Защита данных</h3>
|
||
<p>Оператор принимает необходимые организационные и технические меры для защиты персональных данных пользователя от неправомерного доступа, изменения, раскрытия или уничтожения.</p>
|
||
|
||
<h3>6. Контактные данные</h3>
|
||
<p>ИП Тарасов И.А.<br>
|
||
ИНН 164409454858<br>
|
||
ОГРНИП 325046600060241<br>
|
||
Telegram: <a href="https://t.me/n1kt4r" style="color:var(--accent);">@n1kt4r</a><br>
|
||
Телефон: <a href="tel:+79177776086" style="color:var(--accent);">+7 (917) 777-60-86</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GSAP -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||
|
||
<script>
|
||
// ═══════════════════════════════════════════
|
||
// HEADER SCROLL EFFECT
|
||
// ═══════════════════════════════════════════
|
||
const header = document.querySelector('.header');
|
||
window.addEventListener('scroll', () => {
|
||
header.classList.toggle('scrolled', window.scrollY > 50);
|
||
});
|
||
|
||
// ═══════════════════════════════════════════
|
||
// COOKIE BANNER
|
||
// ═══════════════════════════════════════════
|
||
const cookieBanner = document.getElementById('cookie-banner');
|
||
const cookieAccept = document.getElementById('cookie-accept');
|
||
const cookieDecline = document.getElementById('cookie-decline');
|
||
|
||
if (!localStorage.getItem('cookie-consent')) {
|
||
setTimeout(() => cookieBanner.classList.add('visible'), 1000);
|
||
}
|
||
|
||
cookieAccept.addEventListener('click', () => {
|
||
localStorage.setItem('cookie-consent', 'accepted');
|
||
cookieBanner.classList.remove('visible');
|
||
});
|
||
|
||
cookieDecline.addEventListener('click', () => {
|
||
localStorage.setItem('cookie-consent', 'declined');
|
||
cookieBanner.classList.remove('visible');
|
||
});
|
||
|
||
// ═══════════════════════════════════════════
|
||
// PRIVACY MODAL
|
||
// ═══════════════════════════════════════════
|
||
const privacyOverlay = document.getElementById('privacy-overlay');
|
||
const privacyClose = document.getElementById('privacy-close');
|
||
|
||
function openPrivacy() {
|
||
privacyOverlay.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closePrivacy() {
|
||
privacyOverlay.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.getElementById('privacy-link').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
|
||
document.getElementById('privacy-link-footer').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
|
||
document.getElementById('privacy-cookie-link').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
|
||
privacyClose.addEventListener('click', closePrivacy);
|
||
privacyOverlay.addEventListener('click', e => { if (e.target === privacyOverlay) closePrivacy(); });
|
||
|
||
// ═══════════════════════════════════════════
|
||
// GSAP ANIMATIONS
|
||
// ═══════════════════════════════════════════
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// Header entrance
|
||
gsap.from('.header-inner', {
|
||
y: -30,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: 'power3.out'
|
||
});
|
||
|
||
// Hero content
|
||
gsap.from('.badge', {
|
||
opacity: 0,
|
||
y: 20,
|
||
duration: 0.6,
|
||
delay: 0.2,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
gsap.from('.hero h1', {
|
||
opacity: 0,
|
||
y: 40,
|
||
duration: 0.8,
|
||
delay: 0.3,
|
||
ease: 'power3.out'
|
||
});
|
||
|
||
gsap.from('.hero-subtitle', {
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.6,
|
||
delay: 0.5,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
gsap.from('.hero-buttons', {
|
||
opacity: 0,
|
||
y: 20,
|
||
duration: 0.5,
|
||
delay: 0.7,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
gsap.from('.hero-trust', {
|
||
opacity: 0,
|
||
y: 20,
|
||
duration: 0.5,
|
||
delay: 0.85,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
// Numbers strip
|
||
gsap.from('.numbers-strip', {
|
||
scrollTrigger: {
|
||
trigger: '.numbers-strip',
|
||
start: 'top 80%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.6,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
gsap.utils.toArray('.number-item').forEach((item, i) => {
|
||
gsap.from(item, {
|
||
scrollTrigger: {
|
||
trigger: item,
|
||
start: 'top 85%',
|
||
},
|
||
opacity: 0,
|
||
y: 20,
|
||
duration: 0.5,
|
||
delay: i * 0.1,
|
||
ease: 'power2.out'
|
||
});
|
||
});
|
||
|
||
// Features
|
||
gsap.from('.section-header', {
|
||
scrollTrigger: {
|
||
trigger: '.section-header',
|
||
start: 'top 80%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.6,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
gsap.utils.toArray('.feature-card').forEach((card, i) => {
|
||
gsap.from(card, {
|
||
scrollTrigger: {
|
||
trigger: card,
|
||
start: 'top 85%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.5,
|
||
delay: i * 0.08,
|
||
ease: 'power2.out'
|
||
});
|
||
});
|
||
|
||
// Report section
|
||
gsap.from('.report-preview', {
|
||
scrollTrigger: {
|
||
trigger: '.report-section',
|
||
start: 'top 75%',
|
||
},
|
||
opacity: 0,
|
||
y: 40,
|
||
duration: 0.8,
|
||
ease: 'power3.out'
|
||
});
|
||
|
||
// Chart bars animation
|
||
gsap.utils.toArray('.chart-bar').forEach(bar => {
|
||
const width = bar.style.width;
|
||
bar.style.width = '0%';
|
||
gsap.to(bar, {
|
||
scrollTrigger: {
|
||
trigger: bar,
|
||
start: 'top 90%',
|
||
},
|
||
width: width,
|
||
duration: 1,
|
||
ease: 'power3.out',
|
||
delay: 0.3
|
||
});
|
||
});
|
||
|
||
// Dashboard
|
||
gsap.from('.dashboard-preview', {
|
||
scrollTrigger: {
|
||
trigger: '.dashboard-section',
|
||
start: 'top 75%',
|
||
},
|
||
opacity: 0,
|
||
y: 40,
|
||
duration: 0.8,
|
||
ease: 'power3.out'
|
||
});
|
||
|
||
gsap.utils.toArray('.employee-row:not(.header)').forEach((row, i) => {
|
||
gsap.from(row, {
|
||
scrollTrigger: {
|
||
trigger: row,
|
||
start: 'top 85%',
|
||
},
|
||
opacity: 0,
|
||
x: -20,
|
||
duration: 0.4,
|
||
delay: i * 0.06,
|
||
ease: 'power2.out'
|
||
});
|
||
});
|
||
|
||
// Steps
|
||
gsap.utils.toArray('.step').forEach((step, i) => {
|
||
gsap.from(step, {
|
||
scrollTrigger: {
|
||
trigger: step,
|
||
start: 'top 85%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.5,
|
||
delay: i * 0.15,
|
||
ease: 'power2.out'
|
||
});
|
||
});
|
||
|
||
// Pricing
|
||
gsap.from('.pricing-card', {
|
||
scrollTrigger: {
|
||
trigger: '.pricing-grid',
|
||
start: 'top 80%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.5,
|
||
stagger: 0.1,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
// CTA
|
||
gsap.from('.cta-section', {
|
||
scrollTrigger: {
|
||
trigger: '.cta-section',
|
||
start: 'top 75%',
|
||
},
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.6,
|
||
ease: 'power2.out'
|
||
});
|
||
|
||
// ═══════════════════════════════════════════
|
||
// PHYSICS-BASED INTERACTIONS
|
||
// ═══════════════════════════════════════════
|
||
|
||
// Button press effect
|
||
document.querySelectorAll('.btn').forEach(btn => {
|
||
btn.addEventListener('mousedown', () => {
|
||
gsap.to(btn, {
|
||
scale: 0.97,
|
||
duration: 0.08,
|
||
ease: 'power2.in',
|
||
onComplete: () => {
|
||
gsap.to(btn, {
|
||
scale: 1,
|
||
duration: 0.25,
|
||
ease: 'elastic.out(1, 0.4)',
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||
link.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(link.getAttribute('href'));
|
||
if (target) {
|
||
gsap.to(window, {
|
||
scrollTo: { y: target, offsetY: 80 },
|
||
duration: 0.8,
|
||
ease: 'power3.inOut'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- GSAP ScrollTo plugin (inline minimal) -->
|
||
<script>
|
||
// Minimal ScrollTo for anchor links
|
||
window.gsapScrollTo = function(target, offsetY) {
|
||
const el = typeof target === 'string' ? document.querySelector(target) : target;
|
||
if (!el) return;
|
||
const top = el.getBoundingClientRect().top + window.pageYOffset - (offsetY || 80);
|
||
window.scrollTo({ top: top, behavior: 'smooth' });
|
||
};
|
||
|
||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||
link.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(link.getAttribute('href'));
|
||
if (target) {
|
||
const top = target.getBoundingClientRect().top + window.pageYOffset - 80;
|
||
window.scrollTo({ top: top, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Report Tab Switching -->
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const tabs = document.querySelectorAll(".report-tab");
|
||
tabs.forEach(function(tab) {
|
||
tab.addEventListener("click", function() {
|
||
const targetTab = this.getAttribute("data-tab");
|
||
|
||
// Remove active from all tabs
|
||
tabs.forEach(function(t) { t.classList.remove("active"); });
|
||
this.classList.add("active");
|
||
|
||
// Hide all content (including inline styles)
|
||
var contents = document.querySelectorAll(".report-tab-content");
|
||
contents.forEach(function(c) {
|
||
c.classList.remove("active");
|
||
c.style.display = "none";
|
||
});
|
||
|
||
// Show target
|
||
var target = document.getElementById("tab-" + targetTab);
|
||
if (target) {
|
||
target.classList.add("active");
|
||
target.style.display = "block";
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|