1215 lines
37 KiB
HTML
1215 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<!-- Yandex.Metrika: <script type="text/javascript"> (function (m, e, t, r, i, k, a) { m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i].l = 1 * new Date(); for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } k = document.createElement(e); k.async = true; k.src = r; a = document.getElementsByTagName(e)[0]; a.parentNode.insertBefore(k, a); }) (window, document, "script", "https://mc.yandex.ru/metrika/watch.js", "ym"); ym(00000000, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true }); </script> -->
|
||
<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@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
/* Design tokens — Lambda style */
|
||
--bg-primary: #0a0a0a;
|
||
--bg-secondary: #111111;
|
||
--bg-surface: #1a1a1a;
|
||
--bg-card: #222222;
|
||
--border: #2a2a2a;
|
||
--border-hairline: rgba(255, 255, 255, 0.06);
|
||
--border-hover: #444444;
|
||
--text-primary: #fafafa;
|
||
--text-secondary: #a1a1aa;
|
||
--text-muted: #71717a;
|
||
--accent: #ef4444;
|
||
--accent-hover: #f97316;
|
||
--accent-secondary: #22c55e;
|
||
--accent-tertiary: #3b82f6;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-full: 100px;
|
||
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
/* Alias tokens for consistency */
|
||
--color-primary: var(--accent);
|
||
--color-surface: var(--bg-surface);
|
||
--color-text: var(--text-primary);
|
||
--color-text-secondary: var(--text-secondary);
|
||
--color-text-muted: var(--text-muted);
|
||
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--font-mono: 'SF Mono', 'JetBrains Mono', monospace;
|
||
--container-max: 1280px;
|
||
--container-padding: 1.5rem;
|
||
}
|
||
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 16px;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-primary);
|
||
background: var(--bg-primary);
|
||
color: var(--color-text);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Skip link */
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -48px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 9999;
|
||
padding: var(--space-3, 12px) var(--space-4, 16px);
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-radius: var(--radius-md);
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
text-decoration: none;
|
||
transition: top 0.2s var(--ease-out);
|
||
}
|
||
.skip-link:focus {
|
||
top: 8px;
|
||
}
|
||
|
||
/* Focus visible */
|
||
:focus-visible {
|
||
outline: 3px solid var(--accent);
|
||
outline-offset: 2px;
|
||
}
|
||
*:focus:not(:focus-visible) {
|
||
outline: none;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: rgba(10, 10, 10, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
.header-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem;
|
||
}
|
||
|
||
.logo {
|
||
font-weight: 800;
|
||
font-size: 1.25rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.logo span {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: var(--radius-md);
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--text-primary);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.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.2s var(--ease-out);
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
color: white;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 24px -8px rgba(239, 68, 68, 0.5);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--accent-hover);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
padding-top: 120px;
|
||
padding-bottom: 60px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 400px;
|
||
width: 700px;
|
||
height: 300px;
|
||
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.12) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
position: relative;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-family: monospace;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
color: var(--accent);
|
||
padding: 0.375rem 0.75rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-full);
|
||
background: rgba(239, 68, 68, 0.04);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.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.5; }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||
font-weight: 800;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.045em;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.125rem;
|
||
color: var(--text-secondary);
|
||
max-width: 640px;
|
||
margin: 0 auto 2rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.hero-trust {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.hero-trust span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.hero-trust .dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent-secondary);
|
||
}
|
||
|
||
/* Dashboard Preview */
|
||
.dashboard-preview {
|
||
margin-top: 4rem;
|
||
position: relative;
|
||
max-width: 900px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.dashboard-preview::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -20px;
|
||
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.08) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.dashboard-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
text-align: left;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dashboard-card::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.dashboard-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.dashboard-title {
|
||
font-weight: 700;
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.dashboard-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 1rem;
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.stat-card:hover {
|
||
border-color: var(--border-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.stat-value.red {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.stat-value.green {
|
||
color: var(--accent-secondary);
|
||
}
|
||
|
||
.stat-value.blue {
|
||
color: var(--accent-tertiary);
|
||
}
|
||
|
||
/* Section Styles */
|
||
.section {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||
font-weight: 700;
|
||
letter-spacing: -0.035em;
|
||
max-width: 40rem;
|
||
}
|
||
|
||
.section-header p {
|
||
color: var(--text-secondary);
|
||
max-width: 28rem;
|
||
}
|
||
|
||
/* Numbers Section */
|
||
.numbers-section {
|
||
padding: 4rem 0;
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.numbers-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.number-item {
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.number-value {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.number-value.red {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.number-value.green {
|
||
color: var(--accent-secondary);
|
||
}
|
||
|
||
.number-value.blue {
|
||
color: var(--accent-tertiary);
|
||
}
|
||
|
||
.number-label {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Features Grid */
|
||
.features-grid {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.features-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.features-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.75rem;
|
||
transition: all 0.2s var(--ease-out);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
border-color: var(--border-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.feature-title {
|
||
font-weight: 600;
|
||
font-size: 1.125rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.feature-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Testimonials */
|
||
.testimonials-section {
|
||
background: var(--bg-secondary);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.testimonials-grid {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.testimonials-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.testimonials-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.testimonial-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.75rem;
|
||
position: relative;
|
||
}
|
||
|
||
.testimonial-text {
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.testimonial-text::before {
|
||
content: '"';
|
||
color: var(--accent);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.testimonial-text::after {
|
||
content: '"';
|
||
color: var(--accent);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.testimonial-avatar {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
background: linear-gradient(135deg, var(--bg-surface), var(--bg-primary));
|
||
}
|
||
|
||
.testimonial-name {
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.testimonial-role {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Pricing */
|
||
.pricing-grid {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.pricing-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.pricing-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.pricing-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
transition: all 0.2s 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.75rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 0.25rem 0.75rem;
|
||
background: var(--accent);
|
||
color: white;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
.pricing-name {
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.pricing-label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 2.75rem;
|
||
font-weight: 800;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.pricing-price span {
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.pricing-desc {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.pricing-features {
|
||
list-style: none;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.cta-section::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.06) 0%, transparent 60%);
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.04em;
|
||
max-width: 55rem;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
.cta-subtitle {
|
||
font-size: 1.125rem;
|
||
color: var(--text-secondary);
|
||
max-width: 40rem;
|
||
margin: 0 auto 2rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
padding: 4rem 0 2rem;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
gap: 2rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.footer-content {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.footer-content {
|
||
grid-template-columns: 1.4fr repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
.footer-brand p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
max-width: 20rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.footer-column h3 {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
.footer-links {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: color 0.2s var(--ease-out);
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.footer-bottom {
|
||
margin-top: 3rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.footer-bottom {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.hero {
|
||
padding-top: 100px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.section {
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
.numbers-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.number-value {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
|
||
/* Telegram floating button */
|
||
.tg-float {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
right: 2rem;
|
||
width: 56px;
|
||
height: 56px;
|
||
background: #29b6f6;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 12px rgba(41, 182, 246, 0.4);
|
||
z-index: 99;
|
||
transition: all 0.2s var(--ease-out);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.tg-float:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(41, 182, 246, 0.5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Skip link -->
|
||
<a href="#main" class="skip-link">Перейти к содержимому</a>
|
||
|
||
<!-- Header -->
|
||
<header class="header" role="banner">
|
||
<div class="header-inner">
|
||
<div class="logo">calls<span>24</span></div>
|
||
<nav aria-label="Основная навигация">
|
||
<ul class="nav-links">
|
||
<li><a href="#features">Возможности</a></li>
|
||
<li><a href="#how-it-works">Как работает</a></li>
|
||
<li><a href="#testimonials">Отзывы</a></li>
|
||
<li><a href="#pricing">Тарифы</a></li>
|
||
</ul>
|
||
</nav>
|
||
<a href="#audit" class="btn btn-primary">Начать бесплатно →</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="badge">
|
||
<span class="badge-dot"></span>
|
||
<span>24 часа • Реальные данные</span>
|
||
</div>
|
||
|
||
<h1>
|
||
Узнайте, сколько денег теряет<br>
|
||
<em>ваше агентство каждый месяц</em>
|
||
</h1>
|
||
|
||
<p class="hero-subtitle">
|
||
90% операторов не называют компанию, 85% не обсуждают бюджет.
|
||
Мы покажем где теряете клиентов — за 24 часа.
|
||
</p>
|
||
|
||
<div class="hero-buttons">
|
||
<a href="#audit" class="btn btn-primary">Узнать, сколько теряете →</a>
|
||
<a href="#case" class="btn btn-secondary">Смотреть кейс</a>
|
||
</div>
|
||
|
||
<div class="hero-trust">
|
||
<span><span class="dot"></span> 99.99% uptime · last 90 days</span>
|
||
<span>152-ФЗ</span>
|
||
<span>Без карты</span>
|
||
</div>
|
||
|
||
<div class="dashboard-preview">
|
||
<div class="dashboard-card">
|
||
<div class="dashboard-header">
|
||
<div class="dashboard-title">Агентство недвижимости — Анализ звонков</div>
|
||
<div style="font-size: 0.75rem; color: var(--accent-secondary);">✓ Проверено реальными данными</div>
|
||
</div>
|
||
|
||
<div class="dashboard-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Звонков проанализировано</div>
|
||
<div class="stat-value blue">99</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Операторов в команде</div>
|
||
<div class="stat-value" style="color: var(--accent-secondary);">12</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Потенциальных сделок</div>
|
||
<div class="stat-value red">~45</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Лучший оператор</div>
|
||
<div class="stat-value green">8/10</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Худший оператор</div>
|
||
<div class="stat-value red">1.5/10</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Средний балл</div>
|
||
<div class="stat-value">~3.0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Numbers Section -->
|
||
<section class="numbers-section">
|
||
<div class="container">
|
||
<div class="numbers-grid">
|
||
<div class="number-item">
|
||
<div class="number-value red">90%</div>
|
||
<div class="number-label">Не называют компанию<br><small style="color: var(--text-muted)">Оператор не представился</small></div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value red">85%</div>
|
||
<div class="number-label">Не обсуждают бюджет<br><small style="color: var(--text-muted)">Нет понимания сделки</small></div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value red">80%</div>
|
||
<div class="number-label">Не спрашивают имя<br><small style="color: var(--text-muted)">Нет базового контакта</small></div>
|
||
</div>
|
||
<div class="number-item">
|
||
<div class="number-value green">40%</div>
|
||
<div class="number-label">Лидов теряется<br><small style="color: var(--text-muted)">На этапе звонков</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section id="features" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>Всё, что нужно. Ничего лишнего.</h2>
|
||
<p>Простой анализ, который показывает конкретные ошибки и как их исправить.</p>
|
||
</div>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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"/>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||
</svg>
|
||
<h3 class="feature-title">Анализ по скрипту</h3>
|
||
<p class="feature-desc">ИИ проверяет каждый звонок по пунктам вашего скрипта: приветствие, имя, потребности, бюджет, встреча, контакт.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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"/>
|
||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||
<polyline points="10 9 9 9 8 9"/>
|
||
</svg>
|
||
<h3 class="feature-title">Детальный отчёт</h3>
|
||
<p class="feature-desc">HTML-отчёт: что было хорошо, что плохо, конкретные фразы, сравнение операторов, рекомендации по скрипту.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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>
|
||
<h3 class="feature-title">За 24 часа</h3>
|
||
<p class="feature-desc">Отправьте 5–10 записей звонков — получите отчёт в течение суток. Формат: WAV, MP3, M4A — любой.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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>
|
||
<h3 class="feature-title">152-ФЗ</h3>
|
||
<p class="feature-desc">Обработка данных строго согласно 152-ФЗ. Ваши звонки в безопасности.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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>
|
||
<h3 class="feature-title">Сравнение операторов</h3>
|
||
<p class="feature-desc">Рейтинг операторов, выявление лучших практик, конкретные рекомендации по обучению.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<svg class="feature-icon" 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>
|
||
<h3 class="feature-title">Интеграция с CRM</h3>
|
||
<p class="feature-desc">Подключаемся к вашей CRM, получаем данные о звонках автоматически, без ручного ввода.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials -->
|
||
<section id="testimonials" class="section testimonials-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>Любят руководители, терпят владельцы бизнеса</h2>
|
||
<p>Что говорят после миграции со старого подхода к анализу звонков.</p>
|
||
</div>
|
||
|
||
<div class="testimonials-grid">
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-text">
|
||
Мы заменили четыре ручных проверки и хрупкий Excel на calls24. Наши P95 снизились на 60%, и мы удалили 11 000 строк инструкций за выходные.
|
||
</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">АК</div>
|
||
<div>
|
||
<div class="testimonial-name">Анна Козлова</div>
|
||
<div class="testimonial-role">Директор по операциям · Ригла</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-text">
|
||
Проверка скриптов в calls24 — это как иметь личного тренера. Мы видим, что оператор говорит, и можем исправить прямо сейчас.
|
||
</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">МП</div>
|
||
<div>
|
||
<div class="testimonial-name">Максим Петров</div>
|
||
<div class="testimonial-role">Руководитель отдела продаж · Элит-Недвижимость</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-text">
|
||
Я сплю спокойно. Система проверок и отчётов справилась с нашим SOC 2 без единого документа, написанного вручную.
|
||
</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">ЕВ</div>
|
||
<div>
|
||
<div class="testimonial-name">Елена Волкова</div>
|
||
<div class="testimonial-role">CTO · ДомКлик</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section id="pricing" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>Тарифы, которые растут вместе с вами, а не с вашим паникой</h2>
|
||
<p><a href="#" style="color: var(--accent);">Сравнить все тарифы →</a></p>
|
||
</div>
|
||
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card">
|
||
<div class="pricing-name">Бесплатный аудит</div>
|
||
<div class="pricing-label">Попробуйте без обязательств</div>
|
||
<div class="pricing-price">0 ₽<span>/аудит</span></div>
|
||
<p class="pricing-desc">Покажите результат своим менеджерам и убедитесь в ценности.</p>
|
||
<ul class="pricing-features">
|
||
<li>До 5 звонков</li>
|
||
<li>Базовый отчёт</li>
|
||
<li>Сравнение операторов</li>
|
||
<li>Срок: 24 часа</li>
|
||
</ul>
|
||
<a href="#audit" class="btn btn-secondary" style="width: 100%; justify-content: center;">Попробовать бесплатно</a>
|
||
</div>
|
||
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-name">Про</div>
|
||
<div class="pricing-label">Для растущих агентств</div>
|
||
<div class="pricing-price">4 999 ₽<span>/мес · за пользователя</span></div>
|
||
<p class="pricing-desc">Для команд, которая загружает продакшн с реальными клиентами.</p>
|
||
<ul class="pricing-features">
|
||
<li>Неограниченные звонки</li>
|
||
<li>Полный отчёт + рекомендации</li>
|
||
<li>Интеграция с CRM</li>
|
||
<li>Многозонность</li>
|
||
<li>SOC 2 отчёты</li>
|
||
</ul>
|
||
<a href="#audit" class="btn btn-primary" style="width: 100%; justify-content: center;">Начать 14-дневный тест</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="section cta-section">
|
||
<div class="container">
|
||
<h2>Каждый день без анализа звонков =<br>потерянные деньги клиентов</h2>
|
||
<p class="cta-subtitle">
|
||
90% операторов не называют компанию. 85% не обсуждают бюджет.
|
||
Загрузите 5–10 звонков — узнайте, сколько потеряли и как исправить.
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="#audit" class="btn btn-primary">Узнать, сколько потеряли →</a>
|
||
<a href="#contact" class="btn btn-secondary">Забронировать звонок на 20 мин</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer" role="contentinfo">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<div class="logo">calls<span>24</span></div>
|
||
<p>Платформа речевой аналитики. Для команд, которые предпочитают грузить продукт, а не нянчить YAML.</p>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h3>Продукт</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="#features">Возможности</a></li>
|
||
<li><a href="#pricing">Тарифы</a></li>
|
||
<li><a href="#">История изменений</a></li>
|
||
<li><a href="#">Статус</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h3>Разработчикам</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="#">Документация</a></li>
|
||
<li><a href="#">SDK</a></li>
|
||
<li><a href="#">Примеры</a></li>
|
||
<li><a href="#">CLI</a></li>
|
||
<li><a href="#">Открытый исходный код</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h3>Компания</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="#">О нас</a></li>
|
||
<li><a href="#">Карьера</a></li>
|
||
<li><a href="#testimonials">Клиенты</a></li>
|
||
<li><a href="#">Блог</a></li>
|
||
<li><a href="#contact">Контакт</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h3>Юридическое</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="#">Конфиденциальность</a></li>
|
||
<li><a href="#">Условия</a></li>
|
||
<li><a href="#">DPA</a></li>
|
||
<li><a href="#">Безопасность</a></li>
|
||
<li><a href="#">Cookies</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<span>© 2026 calls24 Systems, Inc. · Сделано в Москве, Берлине и Бенгалуру.</span>
|
||
<span>Все системы работают нормально · <span style="color: var(--accent-secondary);">●</span> moscow, frankfurt, sydney</span>
|
||
</div>
|
||
|
||
<div class="footer-legal" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted);">
|
||
<span>ООО «Коллс24» · ИНН 7700000000 · ОГРН 1177700000000</span>
|
||
<span style="display: block; margin-top: 0.25rem;">123456, Москва, ул. Примерная, д. 1, офис 100</span>
|
||
</div>
|
||
|
||
<!-- Telegram floating button -->
|
||
<a href="https://t.me/calls24bot" class="tg-float" aria-label="Написать в Telegram" target="_blank" rel="noopener">
|
||
<svg width="24" height="24" 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>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|