1439 lines
56 KiB
HTML
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">
|
|
ИП Иванов И.И. · ИНН 123456789012 · ОГРНИП
|
|
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>
|