Files

1439 lines
56 KiB
HTML

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>calls24 — Речевая аналитика для агентств недвижимости</title>
<meta
name="description"
content="Анализ звонков операторов за 24 часа. Узнайте, где теряете деньги."
/>
<!-- Yandex.Metrika placeholder: <script>/* метрика */</script> -->
<!-- Font-display fix: prevent FOIT/FOUT -->
<link
rel="preconnect"
href="https://fonts.googleapis.com"
crossorigin
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<style>
/* ═══════════════════════════════════════════
DESIGN TOKENS — Full scale
═══════════════════════════════════════════ */
:root {
/* Backgrounds */
--color-bg-primary: #0a0a0a;
--color-bg-secondary: #111111;
--color-bg-card: #1a1a1a;
--color-bg-card-hover: #222222;
--color-bg-elevated: #252525;
/* Borders */
--color-border: #2a2a2a;
--color-border-hover: #444444;
/* Text — WCAG AA compliant (contrast > 4.5:1 on #0a0a0a/#111111) */
--color-text-primary: #f5f5f5;
--color-text-secondary: #b0b0b0;
--color-text-muted: #888888;
--color-text-tertiary: #707070;
/* Accent — consistent palette */
--color-accent: #ff3d00;
--color-accent-hover: #ff6e40;
--color-accent-secondary: #00c853;
--color-accent-secondary-hover: #69f0ae;
--color-accent-tertiary: #2979ff;
--color-accent-tertiary-hover: #448aff;
--color-accent-warn: #ffd600;
/* Gradients */
--gradient-accent: linear-gradient(135deg, #ff3d00, #ff6e40);
--gradient-green: linear-gradient(135deg, #00c853, #69f0ae);
--gradient-blue: linear-gradient(135deg, #2979ff, #448aff);
/* 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-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Typography scale (1.25 ratio) */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3.5rem;
--text-6xl: 4.5rem;
/* Border radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 100px;
/* Transitions */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ═══════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════ */
*,
*::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,
"Segoe UI",
sans-serif;
background: var(--color-bg-primary);
color: var(--color-text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* ═══════════════════════════════════════════
ACCESSIBILITY — Skip link & focus
═══════════════════════════════════════════ */
.skip-link {
position: absolute;
top: -48px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: var(--space-3) var(--space-6);
background: var(--color-accent);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
top: var(--space-2);
outline: 3px solid var(--color-accent-secondary);
outline-offset: 2px;
}
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}
/* ═══════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
.animate {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.8s var(--ease-out),
transform 0.8s var(--ease-out);
}
.animate.visible {
opacity: 1;
transform: translateY(0);
}
.animate:nth-child(2) {
transition-delay: 0.1s;
}
.animate:nth-child(3) {
transition-delay: 0.2s;
}
.animate:nth-child(4) {
transition-delay: 0.3s;
}
/* ═══════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
section {
padding: var(--space-32) 0;
position: relative;
}
/* ═══════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════ */
h1 {
font-size: clamp(2.5rem, 6vw, var(--text-6xl));
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.03em;
}
h2 {
font-size: clamp(2rem, 4vw, var(--text-4xl));
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
h3 {
font-size: var(--text-2xl);
font-weight: 700;
line-height: 1.3;
}
p {
line-height: 1.7;
}
.gradient-text {
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-green {
background: var(--gradient-green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ═══════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-4) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-size: var(--text-xl);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--color-text-primary);
text-decoration: none;
}
.nav-logo span {
color: var(--color-accent);
}
.nav-links {
display: flex;
gap: var(--space-8);
list-style: none;
align-items: center;
}
.nav-links a {
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
transition: color 0.3s var(--ease-out);
}
.nav-links a:hover {
color: var(--color-text-primary);
}
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-7);
border-radius: var(--radius-md);
font-weight: 600;
font-size: var(--text-base);
text-decoration: none;
cursor: pointer;
border: none;
transition: all 0.3s var(--ease-out);
font-family: inherit;
}
.btn-primary {
background: var(--gradient-accent);
color: #fff;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(255, 61, 0, 0.3);
}
.btn-primary:focus-visible {
outline: 3px solid var(--color-accent-secondary);
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}
.btn-secondary:hover {
border-color: var(--color-border-hover);
background: var(--color-bg-card);
}
.btn-green {
background: var(--gradient-green);
color: #000;
}
.btn-green:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 200, 83, 0.3);
}
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: var(--space-20);
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(
ellipse at 30% 50%,
rgba(255, 61, 0, 0.06) 0%,
transparent 50%
),
radial-gradient(
ellipse at 70% 50%,
rgba(0, 200, 83, 0.04) 0%,
transparent 50%
);
pointer-events: none;
}
.hero-content {
max-width: 900px;
position: relative;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
font-weight: 500;
}
.hero-badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent-secondary);
animation: pulse 2s infinite;
}
.hero h1 {
margin-bottom: var(--space-6);
}
.hero-subtitle {
font-size: clamp(1.1rem, 2vw, var(--text-lg));
color: var(--color-text-secondary);
max-width: 650px;
margin: 0 auto var(--space-10);
line-height: 1.7;
font-weight: 400;
}
.hero-buttons {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
.hero-stats {
display: flex;
gap: var(--space-12);
justify-content: center;
margin-top: var(--space-20);
padding-top: var(--space-10);
border-top: 1px solid var(--color-border);
}
.hero-stat {
text-align: center;
}
.hero-stat-number {
font-size: var(--text-4xl);
font-weight: 900;
color: var(--color-accent);
display: block;
}
.hero-stat-number.green {
color: var(--color-accent-secondary);
}
.hero-stat-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-1);
font-weight: 500;
}
/* ═══════════════════════════════════════════
SECTIONS
═══════════════════════════════════════════ */
.section-label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-accent);
font-weight: 700;
margin-bottom: var(--space-4);
}
.section-label-green {
color: var(--color-accent-secondary);
}
.section-subtitle {
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--color-text-secondary);
max-width: 700px;
margin-bottom: var(--space-16);
line-height: 1.7;
}
/* ═══════════════════════════════════════════
PROBLEM SECTION
═══════════════════════════════════════════ */
.problem {
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
}
.metric-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8);
transition: all 0.3s var(--ease-out);
will-change: transform;
}
.metric-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-4px);
background: var(--color-bg-card-hover);
}
.metric-card.red {
border-color: rgba(255, 61, 0, 0.3);
}
.metric-card.yellow {
border-color: rgba(255, 214, 0, 0.3);
}
.metric-icon {
font-size: 2rem;
margin-bottom: var(--space-4);
}
.metric-value {
font-size: var(--text-4xl);
font-weight: 900;
margin-bottom: var(--space-2);
}
.metric-value.red {
color: var(--color-accent);
}
.metric-value.yellow {
color: var(--color-accent-warn);
}
.metric-title {
font-size: var(--text-base);
font-weight: 600;
margin-bottom: var(--space-2);
}
.metric-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
/* ═══════════════════════════════════════════
SOLUTION SECTION
═══════════════════════════════════════════ */
.solution-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: var(--space-6);
}
.solution-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-10);
transition: all 0.3s var(--ease-out);
position: relative;
overflow: hidden;
}
.solution-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-accent);
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.solution-card:hover::before {
opacity: 1;
}
.solution-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-4px);
}
.solution-card:nth-child(2)::before {
background: var(--gradient-green);
}
.solution-card:nth-child(3)::before {
background: var(--gradient-blue);
}
.solution-number {
font-size: var(--text-5xl);
font-weight: 900;
color: var(--color-bg-primary);
-webkit-text-stroke: 1px var(--color-border-hover);
margin-bottom: var(--space-4);
line-height: 1;
}
/* ═══════════════════════════════════════════
CASE STUDY
═══════════════════════════════════════════ */
.case-study {
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.case-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-12);
position: relative;
}
.case-card::after {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-lg);
background: linear-gradient(
135deg,
rgba(255, 61, 0, 0.1),
rgba(0, 200, 83, 0.1)
);
pointer-events: none;
z-index: -1;
}
.case-badge {
display: inline-flex;
padding: var(--space-1) var(--space-3);
background: rgba(0, 200, 83, 0.1);
border: 1px solid rgba(0, 200, 83, 0.3);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-accent-secondary);
font-weight: 600;
margin-bottom: var(--space-4);
}
.case-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.case-avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.case-result {
font-size: var(--text-2xl);
font-weight: 700;
margin-bottom: var(--space-4);
}
.case-result em {
color: var(--color-text-muted);
font-weight: 400;
}
.case-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-5);
margin-top: var(--space-8);
}
.case-detail {
padding: var(--space-4);
background: var(--color-bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.case-detail-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: var(--space-1);
}
.case-detail-value {
font-size: var(--text-xl);
font-weight: 700;
}
/* ═══════════════════════════════════════════
PRICING
═══════════════════════════════════════════ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
align-items: start;
}
.pricing-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-10);
transition: all 0.3s var(--ease-out);
position: relative;
}
.pricing-card.featured {
border-color: var(--color-accent);
transform: scale(1.02);
}
.pricing-card.featured::before {
content: "Популярный";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: var(--space-1) var(--space-4);
background: var(--gradient-accent);
color: #fff;
font-size: var(--text-xs);
font-weight: 700;
border-radius: var(--radius-full);
white-space: nowrap;
}
.pricing-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-4px);
}
.pricing-card.featured:hover {
transform: scale(1.02) translateY(-4px);
}
.pricing-name {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-2);
}
.pricing-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.pricing-price {
font-size: var(--text-4xl);
font-weight: 900;
margin-bottom: var(--space-6);
}
.pricing-price span {
font-size: var(--text-base);
font-weight: 400;
color: var(--color-text-muted);
}
.pricing-features {
list-style: none;
margin-bottom: var(--space-8);
}
.pricing-features li {
padding: var(--space-2) 0;
font-size: var(--text-sm);
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--space-2);
}
.pricing-features li::before {
content: "✓";
color: var(--color-accent-secondary);
font-weight: 700;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
CTA
═══════════════════════════════════════════ */
.cta {
text-align: center;
position: relative;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
rgba(255, 61, 0, 0.05) 0%,
transparent 60%
);
}
.cta h2 {
margin-bottom: var(--space-4);
}
.cta-subtitle {
color: var(--color-text-secondary);
font-size: var(--text-lg);
margin-bottom: var(--space-10);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
font-size: var(--text-lg);
padding: var(--space-5) var(--space-10);
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer {
padding: var(--space-10) 0;
border-top: 1px solid var(--color-border);
text-align: center;
}
.footer-text {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.8;
}
.footer-legal {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-3);
}
.footer-links {
display: flex;
gap: var(--space-6);
justify-content: center;
margin-top: var(--space-4);
list-style: none;
}
.footer-links a {
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--text-sm);
transition: color 0.3s var(--ease-out);
}
.footer-links a:hover {
color: var(--color-text-primary);
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
section {
padding: var(--space-16) 0;
}
.hero-stats {
flex-direction: column;
gap: var(--space-6);
}
.nav-links {
display: none;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-4px);
}
.case-card {
padding: var(--space-6);
}
.case-details {
grid-template-columns: 1fr 1fr;
}
}
/* ═══════════════════════════════════════════
SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-hover);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
</style>
</head>
<body>
<!-- Skip link — WCAG 2.4.1 -->
<a href="#main" class="skip-link">Перейти к содержимому</a>
<!-- Navigation -->
<nav class="nav" role="navigation" aria-label="Основная навигация">
<div class="nav-inner">
<a href="#" class="nav-logo" aria-label="calls24 — На главную"
><span>calls</span>24</a
>
<ul class="nav-links">
<li><a href="#problem">Проблема</a></li>
<li><a href="#solution">Решение</a></li>
<li><a href="#case">Кейс</a></li>
<li><a href="#pricing">Тарифы</a></li>
<li>
<a
href="#contact"
class="btn btn-primary"
style="
padding: var(--space-2) var(--space-5);
font-size: var(--text-sm);
"
>Бесплатный аудит</a
>
</li>
</ul>
</div>
</nav>
<!-- Main content -->
<main id="main">
<!-- Hero -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">
<span class="dot"></span>
Анализируем звонки компаний и агентств недвижимости
</div>
<h1>
Узнайте, где ваша комания
<span class="gradient-text">теряет деньги</span>
</h1>
<p class="hero-subtitle">
Загрузите 5–10 звонков операторов — получите детальный
отчёт за 24 часа. Покажем конкретные ошибки и
рекомендации, как увеличить конверсию.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary"
>Получить бесплатный аудит →</a
>
<a href="#case" class="btn btn-secondary"
>Смотреть кейс</a
>
</div>
<div class="hero-stats">
<div class="hero-stat">
<span class="hero-stat-number">99</span>
<span class="hero-stat-label"
>звонков проанализировано</span
>
</div>
<div class="hero-stat">
<span class="hero-stat-number green">85%</span>
<span class="hero-stat-label"
>звонков не по скрипту</span
>
</div>
<div class="hero-stat">
<span class="hero-stat-number">1</span>
<span class="hero-stat-label">день на отчёт</span>
</div>
</div>
</div>
</section>
<!-- Problem -->
<section class="problem" id="problem">
<div class="container">
<div class="section-label">Суровая реальность</div>
<h2>
Ваше агентство теряет
<span class="gradient-text">до 40% лидов</span> на этапе
звонков
</h2>
<p class="section-subtitle">
Мы проанализировали 99 реальных звонков агентства
недвижимости. Вот что обнаружили:
</p>
<div class="metrics-grid">
<div class="metric-card red animate">
<div class="metric-icon">🔴</div>
<div class="metric-value red">90%</div>
<div class="metric-title">Не называют компанию</div>
<div class="metric-desc">
18 из 20 звонков — оператор не представился.
Клиент не понимает, с кем говорит
</div>
</div>
<div class="metric-card red animate">
<div class="metric-icon">🔴</div>
<div class="metric-value red">85%</div>
<div class="metric-title">Не обсуждают бюджет</div>
<div class="metric-desc">
17 из 20 звонков — оператор не узнал бюджет. Нет
понимания, можно ли закрыть сделку
</div>
</div>
<div class="metric-card red animate">
<div class="metric-icon">🔴</div>
<div class="metric-value red">80%</div>
<div class="metric-title">Не спрашивают имя</div>
<div class="metric-desc">
16 из 20 звонков — оператор не узнал имя
клиента. Нет базового контакта
</div>
</div>
<div class="metric-card yellow animate">
<div class="metric-icon">⚠️</div>
<div class="metric-value yellow">50%</div>
<div class="metric-title">Теряют контакт</div>
<div class="metric-desc">
Только половина звонков заканчивается получением
номера — половина лидов потеряна
</div>
</div>
</div>
</div>
</section>
<!-- Solution -->
<section class="solution" id="solution">
<div class="container">
<div class="section-label section-label-green">
Как мы работаем
</div>
<h2>
Три шага к
<span class="gradient-text-green">росту продаж</span>
</h2>
<p class="section-subtitle">
Не шаблонный аудит, а конкретный анализ реальных звонков
вашего агентства
</p>
<div class="solution-grid">
<div class="solution-card animate">
<div class="solution-number">01</div>
<h3>Загружаете звонки</h3>
<p
style="
color: var(--color-text-secondary);
margin-top: var(--space-3);
line-height: 1.7;
"
>
Отправьте 5–10 записей звонков операторов в
Telegram или через форму. Формат: WAV, MP3, M4A
— любой.
</p>
</div>
<div class="solution-card animate">
<div class="solution-number">02</div>
<h3>Локальная ИИ анализирует по чек-листу</h3>
<p
style="
color: var(--color-text-secondary);
margin-top: var(--space-3);
line-height: 1.7;
"
>
Наша ИИ-система проверяет каждый звонок по
пунктам Вашего скрипта: приветствие, имя,
потребности, бюджет, встреча, контакт — и
оценивает каждого оператора. Обработка данных
строго согласно 152фз.
</p>
</div>
<div class="solution-card animate">
<div class="solution-number">03</div>
<h3>Получаете отчёт с рекомендациями</h3>
<p
style="
color: var(--color-text-secondary);
margin-top: var(--space-3);
line-height: 1.7;
"
>
Детальный HTML-отчёт: что было хорошо, что
плохо, конкретные фразы, сравнение операторов,
рекомендации по скрипту. За 24 часа.
</p>
</div>
</div>
</div>
</section>
<!-- Case Study -->
<section class="case-study" id="case">
<div class="container">
<div class="section-label">Реальный кейс</div>
<h2>
Агентство недвижимости —
<span class="gradient-text">99 звонков, 23 ошибки</span>
</h2>
<p class="section-subtitle">
Реальный анализ из июня 2026. Данные получены из API
телефонии агентства.
</p>
<div class="case-card">
<div class="case-badge">
✓ Проверено реальными данными
</div>
<div class="case-header">
<div class="case-avatar">📊</div>
<div>
<h3>Результаты анализа</h3>
<p
style="
color: var(--color-text-secondary);
font-size: var(--text-sm);
"
>
99 записей из CloudPBX, 23 реальных звонка
покупателям
</p>
</div>
</div>
<p
style="
color: var(--color-text-secondary);
line-height: 1.8;
margin-bottom: var(--space-6);
"
>
Из 23 реальных звонков покупателям только
<strong style="color: var(--color-accent-secondary)"
>1 из 10 операторов</strong
>
выполнил скрипт корректно. Лучший оператор набрал
8/10 баллов. Остальные — 1–3 балла из 10.
</p>
<div class="case-result">
🔥 Алина: 8/10 баллов —
<em>единственный оператор, прошедший скрипт</em>
</div>
<div class="case-details">
<div class="case-detail">
<div class="case-detail-label">
Звонков в API
</div>
<div class="case-detail-value">99</div>
</div>
<div class="case-detail">
<div class="case-detail-label">
Реальных покупателей
</div>
<div class="case-detail-value">23</div>
</div>
<div class="case-detail">
<div class="case-detail-label">
Лучший оператор
</div>
<div
class="case-detail-value"
style="color: var(--color-accent-secondary)"
>
8/10
</div>
</div>
<div class="case-detail">
<div class="case-detail-label">
Средний балл
</div>
<div
class="case-detail-value"
style="color: var(--color-accent)"
>
~3.0/10
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section class="pricing" id="pricing">
<div class="container">
<div class="section-label">Тарифы</div>
<h2>
Выберите <span class="gradient-text">свой уровень</span>
</h2>
<p class="section-subtitle">
Начните с бесплатного аудита — покажите результат своим
менеджерам
</p>
<div class="pricing-grid">
<div class="pricing-card animate">
<div class="pricing-name">Бесплатный аудит</div>
<div class="pricing-desc">
Попробуйте без обязательств
</div>
<div class="pricing-price">0 ₽</div>
<ul class="pricing-features">
<li>Анализ 3 звонков</li>
<li>Базовый отчёт по чек-листу</li>
<li>Общие рекомендации</li>
<li>Срок: 24 часа</li>
</ul>
<a
href="#contact"
class="btn btn-secondary"
style="width: 100%; justify-content: center"
>Попробовать бесплатно</a
>
</div>
<div class="pricing-card featured animate">
<div class="pricing-name">Стандарт</div>
<div class="pricing-desc">Для одного агентства</div>
<div class="pricing-price">5 000 ₽</div>
<ul class="pricing-features">
<li>Анализ 10 звонков</li>
<li>Детальный HTML-отчёт</li>
<li>Рейтинг операторов</li>
<li>Конкретные рекомендации</li>
<li>Сравнение по чек-листу</li>
</ul>
<a
href="#contact"
class="btn btn-primary"
style="width: 100%; justify-content: center"
>Заказать анализ →</a
>
</div>
<div class="pricing-card animate">
<div class="pricing-name">Премиум</div>
<div class="pricing-desc">
Ежемесячный мониторинг
</div>
<div class="pricing-price">
15 000 ₽<span>/мес</span>
</div>
<ul class="pricing-features">
<li>Еженедельный анализ</li>
<li>Динамика качества</li>
<li>Сравнение операторов</li>
<li>Приоритетная поддержка</li>
<li>Рекомендации по скрипту</li>
</ul>
<a
href="#contact"
class="btn btn-green"
style="width: 100%; justify-content: center"
>Начать мониторинг →</a
>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="contact">
<div class="container">
<h2>
Готовы узнать, где
<span class="gradient-text">теряете деньги?</span>
</h2>
<p class="cta-subtitle">
Отправьте 3 звонка — получите отчёт за 24 часа. Без
обязательств.
</p>
<a
href="https://t.me/neo"
target="_blank"
rel="noopener"
class="btn btn-primary cta-button"
>
Написать в Telegram →
</a>
<p
style="
margin-top: var(--space-6);
font-size: var(--text-sm);
color: var(--color-text-muted);
"
>
Или напишите:
<strong style="color: var(--color-text-secondary)"
>@neo</strong
>
в Telegram
</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="footer-text">
© 2026 calls24 — Речевая аналитика для бизнеса
</p>
<p class="footer-legal">
ИП Иванов И.И. &middot; ИНН 123456789012 &middot; ОГРНИП
123456789012345
</p>
<ul class="footer-links">
<li><a href="#problem">Проблема</a></li>
<li><a href="#solution">Решение</a></li>
<li><a href="#case">Кейс</a></li>
<li><a href="#pricing">Тарифы</a></li>
<li>
<a
href="https://t.me/neo"
target="_blank"
rel="noopener"
>Telegram</a
>
</li>
</ul>
</div>
</footer>
<!-- Scroll Animations -->
<script>
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
}
});
},
{ threshold: 0.1 },
);
document
.querySelectorAll(".animate")
.forEach((el) => observer.observe(el));
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(
this.getAttribute("href"),
);
if (target) {
target.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
});
});
</script>
</body>
</html>