3408 lines
132 KiB
HTML
3408 lines
132 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
|
||
═══════════════════════════════════════════ */
|
||
|
||
: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
|
||
═══════════════════════════════════════════ */
|
||
.logo {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
text-decoration: none;
|
||
transition: opacity 0.2s var(--ease-out);
|
||
}
|
||
.logo:hover { opacity: 0.8; }
|
||
|
||
.logo svg {
|
||
height: 32px;
|
||
width: auto;
|
||
}
|
||
|
||
.logo-footer svg {
|
||
height: 26px;
|
||
width: auto;
|
||
}
|
||
|
||
.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 removed - table view only on desktop, cards on mobile */
|
||
|
||
.dashboard-body {
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* ═══════ TABLE VIEW ═══════ */
|
||
.employee-table-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.employee-row {
|
||
display: grid;
|
||
grid-template-columns: 2fr 0.7fr 1.1fr 1.1fr 0.9fr 0.9fr 0.8fr;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
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.rank-1 { border-left: 3px solid var(--accent-secondary); }
|
||
.employee-row.rank-5 { border-left: 3px solid var(--error); }
|
||
|
||
.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-role {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
margin-top: 0.125rem;
|
||
}
|
||
|
||
.employee-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
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-score-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
|
||
.employee-score {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
font-family: "JetBrains Mono", monospace;
|
||
}
|
||
|
||
.score-bar {
|
||
width: 100%;
|
||
height: 4px;
|
||
background: var(--border);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.score-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
transition: width 0.8s var(--ease-smooth);
|
||
}
|
||
|
||
.score-high { color: var(--accent-secondary); }
|
||
.score-medium { color: var(--warning); }
|
||
.score-low { color: var(--error); }
|
||
|
||
.trend-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
font-family: "JetBrains Mono", monospace;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.trend-up { color: var(--accent-secondary); background: rgba(34, 197, 94, 0.1); }
|
||
.trend-down { color: var(--error); background: rgba(239, 68, 68, 0.1); }
|
||
|
||
.employee-stat {
|
||
font-size: 0.875rem;
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ═══════ CARD VIEW ═══════ */
|
||
.employee-card-view {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.employee-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
transition: all 0.3s var(--ease-out);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.employee-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 3px;
|
||
height: 100%;
|
||
}
|
||
|
||
.employee-card.rank-1::before { background: var(--accent-secondary); }
|
||
.employee-card.rank-2::before { background: var(--accent-secondary); }
|
||
.employee-card.rank-3::before { background: var(--warning); }
|
||
.employee-card.rank-4::before { background: var(--warning); }
|
||
.employee-card.rank-5::before { background: var(--error); }
|
||
|
||
.employee-card:hover {
|
||
border-color: var(--border-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.card-rank-badge {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: var(--text-muted);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.card-trend {
|
||
margin-left: auto;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
font-family: "JetBrains Mono", monospace;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.card-trend-up { color: var(--accent-secondary); background: rgba(34, 197, 94, 0.1); }
|
||
.card-trend-down { color: var(--error); background: rgba(239, 68, 68, 0.1); }
|
||
|
||
.card-score-ring {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin: 0 auto 1.25rem;
|
||
position: relative;
|
||
}
|
||
|
||
.card-score-ring svg { width: 100%; height: 100%; }
|
||
|
||
.card-score-value {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
font-family: "JetBrains Mono", monospace;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.card-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.card-metric {
|
||
text-align: center;
|
||
padding: 0.75rem 0.5rem;
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.card-metric-value {
|
||
display: block;
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.card-metric-label {
|
||
font-size: 0.6875rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.card-weakness {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.75rem;
|
||
background: rgba(245, 158, 11, 0.05);
|
||
border: 1px solid rgba(245, 158, 11, 0.15);
|
||
border-radius: var(--radius-md);
|
||
font-size: 0.75rem;
|
||
color: var(--warning);
|
||
}
|
||
|
||
/* ═══════ Toggle visibility ═══════ */
|
||
.employee-table-view.hidden { display: none; }
|
||
.employee-card-view.hidden { display: none; }
|
||
|
||
.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(3, 1fr);
|
||
gap: 1.25rem;
|
||
max-width: 1000px;
|
||
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 enterprise styles */
|
||
.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-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
|
||
═══════════════════════════════════════════ */
|
||
/* Report: standalone income block */
|
||
.report-income-block {
|
||
margin-top: 2rem;
|
||
}
|
||
.report-income-card {
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.02));
|
||
border: 1px solid rgba(34, 197, 94, 0.25);
|
||
border-radius: var(--radius-xl);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
}
|
||
.report-income-label {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.report-income-value {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
color: var(--accent-secondary);
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.report-income-note {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.report-income-card { padding: 1.5rem; }
|
||
.report-income-value { font-size: 2rem; }
|
||
}
|
||
@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-table-view { display: none; }
|
||
.employee-card-view { display: flex; }
|
||
.employee-card { padding: 1.25rem; }
|
||
.card-score-ring { width: 100px; height: 100px; }
|
||
.card-score-value { font-size: 1.5rem; }
|
||
.card-metric { padding: 0.5rem 0.25rem; }
|
||
.card-metric-value { font-size: 1rem; }
|
||
.cookie-inner { flex-direction: column; text-align: center; }
|
||
.dashboard-preview, .report-preview { border-radius: var(--radius-lg); }
|
||
/* Report mobile */
|
||
.report-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
|
||
.report-tabs { flex-wrap: wrap; }
|
||
.report-call { flex-direction: column; align-items: flex-start; }
|
||
.report-call-tags { flex-direction: column; width: 100%; margin-top: 0.5rem; }
|
||
.report-tag { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; }
|
||
/* Details mobile */
|
||
.details-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
|
||
.detail-card { padding: 0.875rem 1rem; }
|
||
.detail-label { font-size: 0.625rem; }
|
||
.detail-value { font-size: 0.8125rem; word-break: break-word; }
|
||
/* Mobile nav-cta compact */
|
||
.nav-cta { margin-left: 0; }
|
||
.nav-cta .btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: var(--radius-sm); }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.numbers-grid { grid-template-columns: 1fr; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
.details-grid { grid-template-columns: 1fr !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Skip link -->
|
||
|
||
<!-- 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">
|
||
<svg viewBox="0 0 340 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#22c55e"/>
|
||
<stop offset="100%" stop-color="#15803d"/>
|
||
</linearGradient>
|
||
<style>
|
||
.wb{animation:wave 2.4s ease-in-out infinite}
|
||
.w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
|
||
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
|
||
.b24{animation:bp 2.4s ease-in-out infinite}
|
||
@keyframes bp{0%,100%{fill:#22c55e}50%{fill:#86efac}}
|
||
</style>
|
||
</defs>
|
||
<g transform="translate(3,2)">
|
||
<rect class="w1 wb" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||
<rect class="w2 wb" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||
<rect class="w3 wb" x="20" y="8" width="6" height="50" rx="3" fill="url(#lg)"/>
|
||
<rect class="w4 wb" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||
<rect class="w5 wb" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||
</g>
|
||
<text x="56" y="44" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan class="b24" font-weight="700">24</tspan></text>
|
||
</svg>
|
||
</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="tel:+79177776086" class="btn btn-green 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-green">Узнать, сколько теряете →</a>
|
||
<a href="#report" class="btn btn-secondary">Посмотреть пример отчёта</a>
|
||
</div>
|
||
|
||
<div class="hero-trust">
|
||
<span><span class="dot"></span> Бесплатно для первого анализа</span>
|
||
<span>152-ФЗ</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>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:0.5rem;flex-shrink:0"><rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" opacity="0.3"/><rect x="10" y="7" width="4" height="14" rx="1" fill="currentColor" opacity="0.5"/><rect x="17" y="3" width="4" height="18" rx="1" fill="currentColor" opacity="0.7"/></svg>
|
||
Отчёт по звонкам*
|
||
</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">87</div>
|
||
<div class="report-metric-change positive">↑ 8% vs прошлый месяц</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Средний балл</div>
|
||
<div class="report-metric-value green">6.3</div>
|
||
<div class="report-metric-change positive">↑ 1.1 vs прошлый месяц</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Агентов</div>
|
||
<div class="report-metric-value blue">8</div>
|
||
<div class="report-metric-change">В работе</div>
|
||
</div>
|
||
<div class="report-metric">
|
||
<div class="report-metric-label">Сделки в работе</div>
|
||
<div class="report-metric-value green">~32</div>
|
||
<div class="report-metric-change negative">↓ 35% потеряно</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:88%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">88%</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:82%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">82%</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:75%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">75%</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:68%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">68%</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:70%;"></div>
|
||
</div>
|
||
<span class="chart-bar-value">70%</span>
|
||
</div>
|
||
</div>
|
||
<div class="report-call-list">
|
||
<h3>Последние звонки</h3>
|
||
<div class="report-call">
|
||
<div class="report-call-score high">8.2</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Смирнов А.Н. — 14:22</div>
|
||
<div class="report-call-meta">Длительность: 6 мин 45 сек · 18.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 pass">Бюджет ✓</span>
|
||
<span class="report-tag fail">Ипотека ✗</span>
|
||
</div>
|
||
</div>
|
||
<div class="report-call">
|
||
<div class="report-call-score low">2.1</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Орлов Д.С. — 13:08</div>
|
||
<div class="report-call-meta">Длительность: 1 мин 12 сек · 18.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.5</div>
|
||
<div class="report-call-info">
|
||
<div class="report-call-number">Белова Е.А. — 11:33</div>
|
||
<div class="report-call-meta">Длительность: 3 мин 48 сек · 17.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 — 18.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">87 звонков · 76 542 символов</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:92%;background:var(--accent-secondary)"></div>
|
||
</div>
|
||
<span>7.8/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Орлова И.В.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:85%;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:68%;background:var(--warning)"></div>
|
||
</div>
|
||
<span>5.4/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Кузнецов И.А.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:55%;background:var(--warning)"></div>
|
||
</div>
|
||
<span>4.6/10</span>
|
||
</div>
|
||
<div class="operator-detail-row">
|
||
<span>Орлов Д.С.</span>
|
||
<div class="operator-detail-bar">
|
||
<div class="operator-detail-fill" style="width:28%;background:var(--error)"></div>
|
||
</div>
|
||
<span>2.1/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;">Встречается в 42% звонков. Клиент готов к обсуждению условий финансирования</p>
|
||
</div>
|
||
<div class="script-item">
|
||
<div class="script-item-header">
|
||
<strong>«Нужна двухкомнатная в новостройке, до 12 млн, рядом метро»</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;">Чёткий бюджет, тип и требования — 28% звонков</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;">Клиент на этапе изучения — 38% звонков</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>88% агентов не называют агентство при звонке</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Критическая ошибка. Внедрите скрипт: «Агентство Простор, [Имя], добрый день». Ожидаемый рост доверия и конверсии: +18-25%</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority high">Высокий</div>
|
||
<div class="recommendation-content">
|
||
<strong>75% не выясняют задачу клиента</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>70% не уточняют бюджет</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Без понимания бюджета агенты тратят время на нерелевантные варианты. Добавьте вопрос «Какой бюджет вы планируете?» на 3-й минуте разговора</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<div class="recommendation-priority medium">Средний</div>
|
||
<div class="recommendation-content">
|
||
<strong>68% не задают уточняющие вопросы</strong>
|
||
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Обучите агентов технике «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.4 и 4.6. Рекомендуется прослушать 10 звонков, отработать скрипты выяснения задачи и бюджета</p>
|
||
</div>
|
||
</div>
|
||
<div class="recommendation-summary">
|
||
<div class="summary-value">~1 800 000 ₽</div>
|
||
<div class="summary-label">Потенциальный доп. доход при исправлении всех ошибок</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Income Block: standalone -->
|
||
<div class="report-income-block">
|
||
<div class="report-income-card">
|
||
<div class="report-income-label">Потенциальный доп. доход</div>
|
||
<div class="report-income-value">~1 800 000 ₽</div>
|
||
<div class="report-income-note">при исправлении всех ошибок</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<p style="text-align:center;font-size:0.75rem;color:var(--text-secondary);margin-top:1.5rem;opacity:0.7;">
|
||
* Отчёт основан на реальном анализе звонков для компании в сфере недвижимости. Название компании и имена изменены.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Employee Dashboard -->
|
||
<section
|
||
id="dashboard"
|
||
class="dashboard-section section"
|
||
style="scroll-margin-top: 100px"
|
||
>
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<div class="section-label">Дашборд по сотрудникам</div>
|
||
<h2>Видьте кто продаёт, а кто сливает</h2>
|
||
<p>
|
||
Рейтинг агентов, конкретные ошибки каждого,
|
||
рекомендации по обучению.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="dashboard-preview">
|
||
|
||
<div class="dashboard-body">
|
||
<!-- TABLE VIEW -->
|
||
<div class="employee-list employee-table-view">
|
||
<div class="employee-row header">
|
||
<span>Агент</span>
|
||
<span>Звонки</span>
|
||
<span>Балл</span>
|
||
<span>Скрипт</span>
|
||
<span>Конверсия</span>
|
||
<span>Ср. время</span>
|
||
<span>Тренд</span>
|
||
</div>
|
||
<!-- Смирнов А.Н. — топ -->
|
||
<div class="employee-row rank-1">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av2">СА</div>
|
||
<div>
|
||
<span class="employee-name-text">Смирнов А.Н.</span>
|
||
<div class="employee-role">Ведущий агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="employee-stat">47</span>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-high">7.8</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:78%;background:var(--accent-secondary)"></div></div>
|
||
</div>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-high">92%</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:92%;background:var(--accent-secondary)"></div></div>
|
||
</div>
|
||
<span class="employee-stat">18.3%</span>
|
||
<span class="employee-stat">4:12</span>
|
||
<span class="trend-indicator trend-up">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
|
||
+0.8
|
||
</span>
|
||
</div>
|
||
<!-- Белова Е.А. -->
|
||
<div class="employee-row rank-2">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av3">БЕ</div>
|
||
<div>
|
||
<span class="employee-name-text">Белова Е.А.</span>
|
||
<div class="employee-role">Агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="employee-stat">38</span>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-medium">5.4</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:54%;background:var(--warning)"></div></div>
|
||
</div>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-high">85%</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:85%;background:var(--accent-secondary)"></div></div>
|
||
</div>
|
||
<span class="employee-stat">12.1%</span>
|
||
<span class="employee-stat">3:28</span>
|
||
<span class="trend-indicator trend-down">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
||
-0.3
|
||
</span>
|
||
</div>
|
||
<!-- Орлов Д.С. -->
|
||
<div class="employee-row rank-3">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av3">ОД</div>
|
||
<div>
|
||
<span class="employee-name-text">Орлов Д.С.</span>
|
||
<div class="employee-role">Агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="employee-stat">52</span>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-medium">4.6</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:46%;background:var(--warning)"></div></div>
|
||
</div>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-medium">68%</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:68%;background:var(--warning)"></div></div>
|
||
</div>
|
||
<span class="employee-stat">8.7%</span>
|
||
<span class="employee-stat">2:45</span>
|
||
<span class="trend-indicator trend-up">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
|
||
+0.4
|
||
</span>
|
||
</div>
|
||
<!-- Орлова И.В. -->
|
||
<div class="employee-row rank-4">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av1">ОИ</div>
|
||
<div>
|
||
<span class="employee-name-text">Орлова И.В.</span>
|
||
<div class="employee-role">Младший оператор</div>
|
||
</div>
|
||
</div>
|
||
<span class="employee-stat">33</span>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-medium">5.8</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:58%;background:var(--warning)"></div></div>
|
||
</div>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-medium">78%</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:78%;background:var(--warning)"></div></div>
|
||
</div>
|
||
<span class="employee-stat">10.5%</span>
|
||
<span class="employee-stat">3:15</span>
|
||
<span class="trend-indicator trend-up">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
|
||
+1.2
|
||
</span>
|
||
</div>
|
||
<!-- Кузнецов И.А. — худший -->
|
||
<div class="employee-row rank-5">
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av5">КИ</div>
|
||
<div>
|
||
<span class="employee-name-text">Кузнецов И.А.</span>
|
||
<div class="employee-role">Младший агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="employee-stat">29</span>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-low">2.1</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:21%;background:var(--error)"></div></div>
|
||
</div>
|
||
<div class="employee-score-cell">
|
||
<span class="employee-score score-low">33%</span>
|
||
<div class="score-bar"><div class="score-fill" style="width:33%;background:var(--error)"></div></div>
|
||
</div>
|
||
<span class="employee-stat">4.2%</span>
|
||
<span class="employee-stat">1:47</span>
|
||
<span class="trend-indicator trend-down">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
||
-0.5
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CARD VIEW (mobile-optimized) -->
|
||
<div class="employee-list employee-card-view">
|
||
<div class="employee-card rank-1">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">1</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av2">СА</div>
|
||
<div>
|
||
<span class="employee-name-text">Смирнов А.Н.</span>
|
||
<div class="employee-role">Ведущий агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-up">+0.8</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--accent-secondary)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="74" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">7.8</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">47</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">92%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">18.3%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Не всегда берёт контакт</span>
|
||
</div>
|
||
</div>
|
||
<div class="employee-card rank-2">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">2</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av1">АП</div>
|
||
<div>
|
||
<span class="employee-name-text">Белова Е.А.</span>
|
||
<div class="employee-role">Агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-down">-0.3</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="150" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">5.4</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">38</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">85%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">12.1%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Редко обсуждает бюджет</span>
|
||
</div>
|
||
</div>
|
||
<div class="employee-card rank-3">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">3</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av3">ДК</div>
|
||
<div>
|
||
<span class="employee-name-text">Орлов Д.С.</span>
|
||
<div class="employee-role">Агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-up">+0.4</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="196" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">4.6</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">52</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">68%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">8.7%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Не задаёт уточняющие вопросы</span>
|
||
</div>
|
||
</div>
|
||
<div class="employee-card rank-4">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">4</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av5">ЕС</div>
|
||
<div>
|
||
<span class="employee-name-text">Орлова И.В.</span>
|
||
<div class="employee-role">Младший оператор</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-up">+1.2</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="138" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">5.8</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">33</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">78%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">10.5%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Долгие паузы в разговоре</span>
|
||
</div>
|
||
</div>
|
||
<div class="employee-card rank-5">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">5</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av5">КИ</div>
|
||
<div>
|
||
<span class="employee-name-text">Кузнецов И.А.</span>
|
||
<div class="employee-role">Младший агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-down">-0.5</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--error)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="259" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">2.1</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">29</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">33%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">4.2%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Долгие паузы в разговоре</span>
|
||
</div>
|
||
</div>
|
||
<div class="employee-card rank-5">
|
||
<div class="card-header">
|
||
<div class="card-rank-badge">5</div>
|
||
<div class="employee-name">
|
||
<div class="employee-avatar av5">ОД</div>
|
||
<div>
|
||
<span class="employee-name-text">Орлов Д.С.</span>
|
||
<div class="employee-role">Младший агент</div>
|
||
</div>
|
||
</div>
|
||
<span class="card-trend card-trend-down">-0.5</span>
|
||
</div>
|
||
<div class="card-score-ring">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--error)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="259" stroke-linecap="round" transform="rotate(-90 60 60)"/>
|
||
</svg>
|
||
<span class="card-score-value">2.1</span>
|
||
</div>
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">33</span>
|
||
<span class="card-metric-label">Звонки</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">28%</span>
|
||
<span class="card-metric-label">Скрипт</span>
|
||
</div>
|
||
<div class="card-metric">
|
||
<span class="card-metric-value">4.2%</span>
|
||
<span class="card-metric-label">Конв.</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-weakness">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>Не представляет агентство</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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>История за 1 месяц</li>
|
||
<li>Email-поддержка</li>
|
||
</ul>
|
||
<a href="#audit" class="btn btn-green" 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>
|
||
<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-green">Узнать, сколько потеряли →</a>
|
||
<a href="https://t.me/n1kt4r" class="btn btn-green" 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 logo-footer">
|
||
<svg viewBox="0 0 340 56" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="lg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#22c55e"/>
|
||
<stop offset="100%" stop-color="#15803d"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(3,2)">
|
||
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#lg2)"/>
|
||
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
||
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
||
</g>
|
||
<text x="56" y="44" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
||
</svg>
|
||
</a>
|
||
<p>Анализ звонков для любого бизнеса. Узнайте, где теряете клиентов — за 24 часа.</p>
|
||
<div style="margin-top:1.5rem;">
|
||
<a href="https://t.me/n1kt4r" class="btn btn-green" 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-green" 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), .employee-card').forEach((row, i) => {
|
||
gsap.from(row, {
|
||
scrollTrigger: {
|
||
trigger: row,
|
||
start: 'top 85%',
|
||
},
|
||
opacity: 0,
|
||
x: i % 2 === 0 ? -20 : 20,
|
||
duration: 0.2,
|
||
delay: i * 0.03,
|
||
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 (no animation)
|
||
|
||
// 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>
|