v4: init — STATUS.md, prompts/, AGENTS.md, git setup
This commit is contained in:
neo committed
commit
2d0c7d6156
15 files changed
+13752
No files matched your search
@@ -0,0 +1,5 @@
|
|||||||
|
*.swp
|
||||||
|
*~
|
||||||
|
.DS_Store
|
||||||
|
*.html.bak
|
||||||
|
*.html.backup
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
# AGENTS.md — Инструкции для агентов
|
||||||
|
|
||||||
|
## Процесс
|
||||||
|
1. Всегда читать `STATUS.md` первым
|
||||||
|
2. Всегда читать `git log --oneline -5` для понимания контекста
|
||||||
|
3. Применять точечные `patch`, НЕ перезаписывать файл целиком
|
||||||
|
4. После изменений: обновить `STATUS.md`, `git add -A && git commit -m "..."`
|
||||||
|
|
||||||
|
## Конвенции
|
||||||
|
- Брейкпоинт: `@media (max-width: 768px)`
|
||||||
|
- Все CTA: `.btn-green`
|
||||||
|
- Эмодзи → inline SVG
|
||||||
|
- Не трогать GPU-процессы
|
||||||
|
- Не удалять STATUS.md
|
||||||
|
|
||||||
|
## Типовые операции
|
||||||
|
- Мобильная адаптация → `prompts/mobile-adapter.md`
|
||||||
|
- Кнопки → `prompts/btn-consistency.md`
|
||||||
|
- Дашборд → `prompts/dashboard-pattern.md`
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
# Статус разработки index-v4.html
|
||||||
|
|
||||||
|
## ✅ Сделано
|
||||||
|
- [x] Удален блок "Перейти к содержимому" (skip-link), больше нет лишних элементов при загрузке.
|
||||||
|
- [x] Все кнопки CTA заменены на зеленые: "Узнать, сколько теряете", "Начать бесплатно", "Написать в Telegram", "Узнать, сколько потеряли".
|
||||||
|
- [x] Тарифы: 3 карточки в ряд на десктопе, убрана GSAP-анимация появления.
|
||||||
|
- [x] Иконка в "Отчете по звонкам": эмодзи заменен на SVG-гистограмму.
|
||||||
|
- [x] Дашборд сотрудников:
|
||||||
|
- Убран переключатель "Таблица/Карточки".
|
||||||
|
- На десктопе отображается таблица с новыми колонками (Балл, Скрипт, Конверсия, Ср. время, Тренд).
|
||||||
|
- На мобильном (≤768px) автоматически отображаются карточки.
|
||||||
|
- В карточках добавлены круговые диаграммы (score-ring) и блок "Слабое место" (weakness).
|
||||||
|
|
||||||
|
## 🚧 В процессе
|
||||||
|
- Нет.
|
||||||
|
|
||||||
|
## 🛠 Инструменты
|
||||||
|
- **Git**: `/home/nik/projects/wow-design/calls24-landing/.git`
|
||||||
|
- **SKILL.md**: `calls24-landing` (автоматически загружается при работе)
|
||||||
|
- **Пресеты**: `prompts/` — адаптация, кнопки, дашборд
|
||||||
|
|
||||||
|
## 📝 План изменений
|
||||||
|
- [ ] ...
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
"""Run full analysis on updated calls24 landing page."""
|
||||||
|
import requests, base64, json, os
|
||||||
|
|
||||||
|
# Fetch HTML with obscura
|
||||||
|
os.system('obscura fetch --allow-private-network --wait 5 http://localhost:8899 -o /tmp/calls24_v2.html -q 2>/dev/null')
|
||||||
|
html = open('/tmp/calls24_v2.html').read()
|
||||||
|
print(f"HTML: {len(html)} chars")
|
||||||
|
|
||||||
|
# 1. DOM Analysis
|
||||||
|
print("\n=== DOM ANALYSIS ===")
|
||||||
|
resp_dom = requests.post('http://localhost:8001/design/analyze-dom', json={
|
||||||
|
"html": html,
|
||||||
|
"full_analysis": False
|
||||||
|
})
|
||||||
|
dom = resp_dom.json()
|
||||||
|
print(f"Overall DOM Score: {dom.get('overall_score', 'N/A')}/10")
|
||||||
|
|
||||||
|
# Key analyzers
|
||||||
|
for key, val in dom.get('analyzers', {}).items():
|
||||||
|
if isinstance(val, dict) and 'score' in val:
|
||||||
|
print(f" {key}: {val['score']}/10")
|
||||||
|
|
||||||
|
# 2. Pixel Analysis
|
||||||
|
print("\n=== PIXEL ANALYSIS ===")
|
||||||
|
img_b64 = base64.b64encode(open('/home/nik/.hermes/cache/screenshots/browser_screenshot_0b531830c7bf4166b5969c1c7b8c8326.png', 'rb').read()).decode()
|
||||||
|
resp_px = requests.post('http://localhost:8001/design/analyze', json={
|
||||||
|
"image_base64": img_b64,
|
||||||
|
"full_analysis": False
|
||||||
|
})
|
||||||
|
pixel = resp_px.json()
|
||||||
|
print(f"Pixel Score: {pixel.get('overall_score', 'N&A')}/10")
|
||||||
|
|
||||||
|
for key, val in pixel.get('dimensions', {}).items():
|
||||||
|
if isinstance(val, dict) and 'score' in val:
|
||||||
|
print(f" {key}: {val['score']}/10")
|
||||||
|
|
||||||
|
# Combined
|
||||||
|
combined = (dom.get('overall_score', 0) + pixel.get('overall_score', 0)) / 2
|
||||||
|
print(f"\n=== COMBINED: {combined:.1f}/10 ===")
|
||||||
|
|
||||||
|
# Save full results
|
||||||
|
with open('/tmp/calls24_v2-full.json', 'w') as f:
|
||||||
|
json.dump({"dom": dom, "pixel": pixel}, f, indent=2, ensure_ascii=False)
|
||||||
|
|
||||||
|
# Print critical issues
|
||||||
|
print("\n=== CRITICAL ISSUES ===")
|
||||||
|
all_issues = []
|
||||||
|
if dom.get('analyzers', {}).get('wcag_compliance', {}).get('issues'):
|
||||||
|
all_issues.extend([f"[DOM] {i}" for i in dom['analyzers']['wcag_compliance']['issues']])
|
||||||
|
if pixel.get('issues'):
|
||||||
|
all_issues.extend([f"[Pixel] {i}" for i in pixel['issues']])
|
||||||
|
|
||||||
|
for issue in all_issues:
|
||||||
|
if 'FAIL' in issue or 'Критичн' in issue or 'ОТСУТСТВУЕТ' in issue:
|
||||||
|
print(f" {issue}")
|
||||||
File diff suppressed because it is too large.
Load diff
+968
@@ -0,0 +1,968 @@
|
|||||||
|
<!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 часа. Узнайте, где теряете деньги.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
DESIGN TOKENS v2.2 — Complete System
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
:root {
|
||||||
|
--color-bg: #050505;
|
||||||
|
--color-surface: #0a0a0a;
|
||||||
|
--color-surface-elevated: #111111;
|
||||||
|
--color-surface-hover: #141414;
|
||||||
|
--color-border: rgba(255,255,255,0.06);
|
||||||
|
--color-border-hover: rgba(255,255,255,0.12);
|
||||||
|
--color-border-strong: rgba(255,255,255,0.18);
|
||||||
|
--color-text-primary: #f0f0f0;
|
||||||
|
--color-text-secondary: #a0a0a0;
|
||||||
|
--color-text-muted: #555555;
|
||||||
|
--color-accent: #6366f1;
|
||||||
|
--color-accent-hover: #818cf8;
|
||||||
|
--color-accent-soft: rgba(99,102,241,0.12);
|
||||||
|
--color-success: #10b981;
|
||||||
|
--color-success-soft: rgba(16,185,129,0.12);
|
||||||
|
--color-warning: #f59e0b;
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
|
||||||
|
--gradient-text: linear-gradient(135deg, #818cf8, #a78bfa, #c084fc, #f472b6);
|
||||||
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
||||||
|
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
|
||||||
|
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
|
||||||
|
--space-32: 128px;
|
||||||
|
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
--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; --text-7xl: 5.5rem;
|
||||||
|
--leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6;
|
||||||
|
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
--duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms;
|
||||||
|
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px;
|
||||||
|
--radius-2xl: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { font-size: 16px; scroll-behavior: smooth; }
|
||||||
|
body { font-family: var(--font-main); background: var(--color-bg); color: var(--color-text-primary); line-height: var(--leading-normal); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
button { font-family: inherit; cursor: pointer; border: none; background: none; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
NOISE TEXTURE
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.noise-overlay {
|
||||||
|
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
|
||||||
|
opacity: 0.025; mix-blend-mode: overlay;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
|
background-size: 128px 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
CONTAINER
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
ANIMATED GRADIENT BG (Pattern #3)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.gradient-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||||||
|
.orb { position: absolute; border-radius: 50%; filter: blur(120px); }
|
||||||
|
.orb-1 {
|
||||||
|
width: 700px; height: 700px;
|
||||||
|
background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
|
||||||
|
top: -25%; left: -15%; animation: orb-float 25s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.orb-2 {
|
||||||
|
width: 550px; height: 550px;
|
||||||
|
background: radial-gradient(circle, rgba(236,72,153,0.12), transparent 70%);
|
||||||
|
bottom: -25%; right: -10%; animation: orb-float 25s ease-in-out infinite -8s;
|
||||||
|
}
|
||||||
|
.orb-3 {
|
||||||
|
width: 450px; height: 450px;
|
||||||
|
background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%);
|
||||||
|
top: 40%; left: 50%; transform: translate(-50%, -50%);
|
||||||
|
animation: orb-float 25s ease-in-out infinite -16s;
|
||||||
|
}
|
||||||
|
@keyframes orb-float {
|
||||||
|
0%,100% { transform: translate(0,0) scale(1); }
|
||||||
|
33% { transform: translate(50px,-40px) scale(1.1); }
|
||||||
|
66% { transform: translate(-40px,60px) scale(0.92); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
NAVIGATION
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.nav {
|
||||||
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||||
|
padding: var(--space-5) 0;
|
||||||
|
background: rgba(5,5,5,0.7);
|
||||||
|
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
.nav.scrolled { padding: var(--space-3) 0; background: rgba(5,5,5,0.92); }
|
||||||
|
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
|
||||||
|
.nav-logo { font-size: var(--text-xl); font-weight: 900; letter-spacing: -0.03em; }
|
||||||
|
.nav-logo span {
|
||||||
|
background: var(--gradient-text);
|
||||||
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.nav-links { display: flex; gap: var(--space-8); align-items: center; }
|
||||||
|
.nav-links a { font-size: var(--text-sm); color: var(--color-text-secondary); transition: color var(--duration-normal) var(--ease-out); }
|
||||||
|
.nav-links a:hover { color: var(--color-text-primary); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
BUTTONS
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-weight: 600; font-size: var(--text-sm);
|
||||||
|
transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--gradient-primary); color: white;
|
||||||
|
box-shadow: 0 4px 24px rgba(99,102,241,0.25);
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
box-shadow: 0 8px 40px rgba(99,102,241,0.4);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
border: 1px solid var(--color-border); color: var(--color-text-secondary);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); background: var(--color-surface); }
|
||||||
|
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
|
||||||
|
.btn-xl { padding: var(--space-5) var(--space-10); font-size: var(--text-lg); border-radius: var(--radius-xl); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
HERO
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.hero {
|
||||||
|
position: relative; min-height: 100vh; display: flex; align-items: center;
|
||||||
|
padding: var(--space-40) 0 var(--space-32); overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-content { text-align: center; position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
|
||||||
|
.hero-eyebrow {
|
||||||
|
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||||
|
padding: var(--space-2) var(--space-5);
|
||||||
|
background: var(--color-accent-soft);
|
||||||
|
border: 1px solid rgba(99,102,241,0.2);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-hover);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.12em;
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.hero-title {
|
||||||
|
font-size: clamp(2.5rem, 7vw, var(--text-7xl));
|
||||||
|
font-weight: 900; line-height: var(--leading-tight);
|
||||||
|
letter-spacing: -0.035em; margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: var(--gradient-text);
|
||||||
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1.05rem, 2vw, var(--text-lg));
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
max-width: 640px; margin: 0 auto var(--space-12);
|
||||||
|
line-height: var(--leading-normal);
|
||||||
|
}
|
||||||
|
.hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
|
||||||
|
.hero-proof {
|
||||||
|
margin-top: var(--space-12);
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
|
||||||
|
font-size: var(--text-sm); color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
.hero-avatars { display: flex; }
|
||||||
|
.hero-avatar {
|
||||||
|
width: 32px; height: 32px; border-radius: 50%;
|
||||||
|
border: 2px solid var(--color-bg);
|
||||||
|
margin-left: -8px;
|
||||||
|
background: var(--gradient-primary);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 10px; font-weight: 700; color: white;
|
||||||
|
}
|
||||||
|
.hero-avatar:first-child { margin-left: 0; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
STATS BAR
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.stats-bar {
|
||||||
|
border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
|
||||||
|
padding: var(--space-16) 0; background: var(--color-surface);
|
||||||
|
}
|
||||||
|
.stats-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.stat-item { padding: var(--space-4) 0; }
|
||||||
|
.stat-number {
|
||||||
|
display: block;
|
||||||
|
font-size: clamp(2.5rem, 4vw, var(--text-5xl));
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
.stat-number.accent { color: var(--color-accent); }
|
||||||
|
.stat-number.danger { color: var(--color-danger); }
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
SECTIONS
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.section { padding: var(--space-32) 0; }
|
||||||
|
.section-header { text-align: center; margin-bottom: var(--space-20); }
|
||||||
|
.section-eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: var(--text-xs); color: var(--color-accent);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.12em;
|
||||||
|
font-weight: 700; margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: clamp(1.8rem, 3.5vw, var(--text-5xl));
|
||||||
|
font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: var(--text-lg); color: var(--color-text-secondary);
|
||||||
|
max-width: 560px; margin: 0 auto; line-height: var(--leading-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
BENTO GRID (Pattern #1)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: var(--space-6);
|
||||||
|
}
|
||||||
|
.bento-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
padding: var(--space-12);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.bento-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
|
||||||
|
opacity: 0; transition: opacity var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
.bento-card:hover {
|
||||||
|
border-color: var(--color-border-hover);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.bento-card:hover::before { opacity: 1; }
|
||||||
|
.bento-card.large { grid-column: span 8; padding: var(--space-16); }
|
||||||
|
.bento-card.medium { grid-column: span 6; }
|
||||||
|
.bento-card.small { grid-column: span 4; padding: var(--space-10); }
|
||||||
|
.bento-card .card-number {
|
||||||
|
font-size: clamp(3rem, 5vw, var(--text-6xl));
|
||||||
|
font-weight: 900; line-height: 1; margin-bottom: var(--space-6);
|
||||||
|
background: var(--gradient-text);
|
||||||
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.bento-card.large .card-number { font-size: var(--text-7xl); }
|
||||||
|
.bento-card h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); }
|
||||||
|
.bento-card p { color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-normal); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
SOLUTION / FEATURE LIST (Pattern #7)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.solution-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
|
||||||
|
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; }
|
||||||
|
.solution-text h2 { font-size: var(--text-4xl); font-weight: 800; margin-bottom: var(--space-6); letter-spacing: -0.03em; }
|
||||||
|
.solution-text > p { color: var(--color-text-secondary); font-size: var(--text-lg); margin-bottom: var(--space-12); line-height: var(--leading-normal); }
|
||||||
|
.feature-list { display: flex; flex-direction: column; gap: 0; }
|
||||||
|
.feature-item {
|
||||||
|
display: flex; gap: var(--space-5); padding: var(--space-6) 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.feature-item:first-child { padding-top: 0; }
|
||||||
|
.feature-item:last-child { border-bottom: none; }
|
||||||
|
.feature-item:hover { transform: translateX(8px); }
|
||||||
|
.feature-icon {
|
||||||
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||||
|
width: 36px; height: 36px; border-radius: 50%;
|
||||||
|
font-size: 16px; margin-top: 2px;
|
||||||
|
background: var(--color-success-soft); color: var(--color-success);
|
||||||
|
border: 1px solid rgba(16,185,129,0.2);
|
||||||
|
}
|
||||||
|
.feature-content h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
|
||||||
|
.feature-content p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
SOLUTION VISUAL MOCKUP
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.solution-visual {
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
background: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
padding: var(--space-8);
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
display: flex; flex-direction: column; gap: var(--space-6);
|
||||||
|
}
|
||||||
|
.mockup-bar {
|
||||||
|
display: flex; align-items: center; gap: var(--space-3);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-xs); color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
.mockup-dots { display: flex; gap: 6px; margin-right: var(--space-4); }
|
||||||
|
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||||
|
.mockup-dot.r { background: #ff5f57; }
|
||||||
|
.mockup-dot.y { background: #ffbd2e; }
|
||||||
|
.mockup-dot.g { background: #28ca42; }
|
||||||
|
.mockup-list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
|
||||||
|
.mockup-row {
|
||||||
|
display: flex; align-items: center; gap: var(--space-4);
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
.mockup-row:hover { border-color: var(--color-border-hover); }
|
||||||
|
.mockup-avatar {
|
||||||
|
width: 36px; height: 36px; border-radius: 50%;
|
||||||
|
background: var(--color-accent-soft);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 11px; font-weight: 700; color: var(--color-accent); flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mockup-info { flex: 1; }
|
||||||
|
.mockup-info-line {
|
||||||
|
height: 8px; border-radius: 4px; background: var(--color-border);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
.mockup-info-line:last-child { width: 60%; margin-bottom: 0; }
|
||||||
|
.mockup-score {
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-xs); font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mockup-score.good { background: var(--color-success-soft); color: var(--color-success); }
|
||||||
|
.mockup-score.bad { background: rgba(239,68,68,0.12); color: var(--color-danger); }
|
||||||
|
.mockup-score.mid { background: rgba(245,158,11,0.12); color: var(--color-warning); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
STEPS
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.steps-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; margin-top: var(--space-16); }
|
||||||
|
.steps-visual {
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
flex-direction: column; gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.steps-icon { font-size: 64px; }
|
||||||
|
.steps-list { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
|
.step-item {
|
||||||
|
display: flex; gap: var(--space-6); padding: var(--space-8);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-surface);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
.step-item:hover { border-color: var(--color-accent); background: var(--color-surface-hover); transform: translateY(-2px); }
|
||||||
|
.step-number {
|
||||||
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||||
|
width: 48px; height: 48px; border-radius: 50%;
|
||||||
|
background: var(--color-accent-soft); color: var(--color-accent);
|
||||||
|
font-weight: 800; font-size: var(--text-xl);
|
||||||
|
}
|
||||||
|
.step-item h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-2); }
|
||||||
|
.step-item p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.6; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
TESTIMONIALS (Pattern #6)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
|
||||||
|
.testimonial-card {
|
||||||
|
background: var(--color-surface); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-xl); padding: var(--space-8);
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.testimonial-card:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }
|
||||||
|
.testimonial-stars { display: flex; gap: 2px; color: var(--color-warning); font-size: 16px; margin-bottom: var(--space-4); }
|
||||||
|
.testimonial-card blockquote {
|
||||||
|
font-size: var(--text-sm); color: var(--color-text-secondary);
|
||||||
|
line-height: var(--leading-normal); margin-bottom: var(--space-6);
|
||||||
|
font-style: italic; flex: 1;
|
||||||
|
}
|
||||||
|
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
|
||||||
|
.testimonial-avatar {
|
||||||
|
width: 44px; height: 44px; border-radius: 50%;
|
||||||
|
background: var(--gradient-primary);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-weight: 700; font-size: var(--text-sm); color: white; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.testimonial-name { font-weight: 600; font-size: var(--text-sm); }
|
||||||
|
.testimonial-role { font-size: var(--text-xs); color: var(--color-text-muted); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
PRICING (Pattern #8)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); align-items: start; }
|
||||||
|
.pricing-card {
|
||||||
|
background: var(--color-surface); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-xl); padding: var(--space-10);
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
transition: all var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
.pricing-card:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }
|
||||||
|
.pricing-card.featured {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
background: linear-gradient(180deg, rgba(99,102,241,0.06), var(--color-surface) 40%);
|
||||||
|
box-shadow: 0 8px 48px rgba(99,102,241,0.15);
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
.pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }
|
||||||
|
.pricing-name { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
|
||||||
|
.pricing-price { font-size: var(--text-5xl); font-weight: 900; margin-bottom: var(--space-2); line-height: 1; }
|
||||||
|
.pricing-price span { font-size: var(--text-base); font-weight: 400; color: var(--color-text-muted); }
|
||||||
|
.pricing-desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-8); }
|
||||||
|
.pricing-features { list-style: none; margin-bottom: var(--space-8); flex: 1; }
|
||||||
|
.pricing-features li {
|
||||||
|
display: flex; align-items: center; gap: var(--space-3);
|
||||||
|
padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.pricing-features .check-icon {
|
||||||
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||||
|
width: 20px; height: 20px; border-radius: 50%;
|
||||||
|
background: var(--color-success-soft); color: var(--color-success);
|
||||||
|
font-size: 11px; font-weight: 700;
|
||||||
|
}
|
||||||
|
.pricing-features .cross-icon {
|
||||||
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||||
|
width: 20px; height: 20px; border-radius: 50%;
|
||||||
|
background: rgba(100,100,100,0.08); color: var(--color-text-muted);
|
||||||
|
font-size: 11px; font-weight: 700;
|
||||||
|
}
|
||||||
|
.pricing-features li.disabled { opacity: 0.4; }
|
||||||
|
.pricing-features .btn { width: 100%; justify-content: center; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
CTA
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.cta-section { padding: var(--space-40) 0; text-align: center; position: relative; overflow: hidden; }
|
||||||
|
.cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
|
||||||
|
.cta-title { font-size: clamp(2rem, 4.5vw, var(--text-5xl)); font-weight: 900; margin-bottom: var(--space-6); letter-spacing: -0.03em; }
|
||||||
|
.cta-subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-12); }
|
||||||
|
.cta-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
FOOTER
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.footer { border-top: 1px solid var(--color-border); padding: var(--space-16) 0; }
|
||||||
|
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
|
||||||
|
.footer-copy { font-size: var(--text-sm); color: var(--color-text-muted); }
|
||||||
|
.footer-links { display: flex; gap: var(--space-6); }
|
||||||
|
.footer-links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--duration-normal) var(--ease-out); }
|
||||||
|
.footer-links a:hover { color: var(--color-text-primary); }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
STAGGERED REVEAL (Pattern #1)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
|
||||||
|
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||||
|
.reveal-delay-1 { transition-delay: 0.08s; }
|
||||||
|
.reveal-delay-2 { transition-delay: 0.16s; }
|
||||||
|
.reveal-delay-3 { transition-delay: 0.24s; }
|
||||||
|
.reveal-delay-4 { transition-delay: 0.32s; }
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
RESPONSIVE
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.bento-card.large, .bento-card.medium, .bento-card.small { grid-column: span 6; }
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
|
||||||
|
.bento-card.large, .bento-card.medium, .bento-card.small { grid-column: span 12; }
|
||||||
|
.solution-grid, .steps-container { grid-template-columns: 1fr; }
|
||||||
|
.solution-visual, .steps-visual { order: -1; aspect-ratio: 16/9; }
|
||||||
|
.testimonial-grid, .pricing-grid { grid-template-columns: 1fr; }
|
||||||
|
.pricing-card.featured { transform: none; }
|
||||||
|
.pricing-card.featured:hover { transform: translateY(-4px); }
|
||||||
|
.hero-title { font-size: clamp(2rem, 8vw, 3rem); }
|
||||||
|
.hero { padding: var(--space-32) 0 var(--space-16); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
ACCESSIBILITY
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.skip-link {
|
||||||
|
position: absolute; top: -100%; left: var(--space-4); z-index: 200;
|
||||||
|
padding: var(--space-3) var(--space-4); background: var(--color-accent);
|
||||||
|
color: white; border-radius: var(--radius-sm); font-weight: 600;
|
||||||
|
}
|
||||||
|
.skip-link:focus { top: var(--space-4); }
|
||||||
|
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="#main" class="skip-link">Перейти к содержимому</a>
|
||||||
|
<div class="noise-overlay" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<nav class="nav" role="navigation" aria-label="Главная навигация">
|
||||||
|
<div class="nav-inner">
|
||||||
|
<a href="#" class="nav-logo" aria-label="calls24"><span>calls</span>24</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#problems">Проблема</a>
|
||||||
|
<a href="#solution">Решение</a>
|
||||||
|
<a href="#steps">Как работает</a>
|
||||||
|
<a href="#pricing">Цены</a>
|
||||||
|
<a href="#contact" class="btn btn-primary magnetic-btn">Начать бесплатно</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
|
||||||
|
<!-- ═══ HERO ═══ -->
|
||||||
|
<section class="hero" aria-labelledby="hero-title">
|
||||||
|
<div class="gradient-orbs" aria-hidden="true">
|
||||||
|
<div class="orb orb-1"></div>
|
||||||
|
<div class="orb orb-2"></div>
|
||||||
|
<div class="orb orb-3"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-eyebrow reveal">Речевая аналитика для агентств</div>
|
||||||
|
<h1 class="hero-title reveal reveal-delay-1">Узнайте, где операторы <span class="gradient-text">теряют сделки</span></h1>
|
||||||
|
<p class="hero-subtitle reveal reveal-delay-2">Загрузите запись звонка — через 2 минуты получите детальный анализ по 10 пунктам скрипта, рейтинг оператора и рекомендации по росту конверсии.</p>
|
||||||
|
<div class="hero-actions reveal reveal-delay-3">
|
||||||
|
<a href="#contact" class="btn btn-primary btn-xl magnetic-btn">Получить аудит бесплатно →</a>
|
||||||
|
<a href="#solution" class="btn btn-secondary btn-lg">Как это работает</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-proof reveal reveal-delay-4">
|
||||||
|
<div class="hero-avatars">
|
||||||
|
<div class="hero-avatar">МК</div>
|
||||||
|
<div class="hero-avatar">АП</div>
|
||||||
|
<div class="hero-avatar">ДВ</div>
|
||||||
|
</div>
|
||||||
|
<span>Уже используют 500+ агентств</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ STATS BAR ═══ -->
|
||||||
|
<section class="stats-bar" aria-label="Ключевые цифры">
|
||||||
|
<div class="container">
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item reveal">
|
||||||
|
<span class="stat-number accent">99</span>
|
||||||
|
<span class="stat-label">звонков проанализировано</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item reveal reveal-delay-1">
|
||||||
|
<span class="stat-number danger">90%</span>
|
||||||
|
<span class="stat-label">не по скрипту</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item reveal reveal-delay-2">
|
||||||
|
<span class="stat-number">40%</span>
|
||||||
|
<span class="stat-label">рост конверсии после</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item reveal reveal-delay-3">
|
||||||
|
<span class="stat-number accent">500+</span>
|
||||||
|
<span class="stat-label">агентств России</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ PROBLEM (Bento) ═══ -->
|
||||||
|
<section id="problems" class="section" aria-labelledby="problem-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-eyebrow reveal">Проблема</div>
|
||||||
|
<h2 id="problem-title" class="section-title reveal reveal-delay-1">Агентство теряет деньги каждый день</h2>
|
||||||
|
<p class="section-subtitle reveal reveal-delay-2">Мы проанализировали 99 звонков реального агентства недвижимости и нашли критические потери</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-grid">
|
||||||
|
<div class="bento-card large reveal">
|
||||||
|
<div class="card-number">90%</div>
|
||||||
|
<h3>Операторы не соблюдают скрипт</h3>
|
||||||
|
<p>Подавляющее большинство звонков проходит без соблюдения базовых этапов: приветствие, определение потребности, обсуждение бюджета, закрепление контакта.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-card medium reveal reveal-delay-1">
|
||||||
|
<div class="card-number">85%</div>
|
||||||
|
<h3>Не обсуждают бюджет</h3>
|
||||||
|
<p>Операторы не спрашивают бюджет — теряют квалифицированных клиентов на первом контакте.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-card medium reveal reveal-delay-2">
|
||||||
|
<div class="card-number">50%</div>
|
||||||
|
<h3>Конверсия в контакт</h3>
|
||||||
|
<p>Только половина звонков завершается получением контакта — 50% потерян даром.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-card small reveal reveal-delay-3">
|
||||||
|
<div class="card-number">23</div>
|
||||||
|
<h3>Реальных звонка</h3>
|
||||||
|
<p>Из 99 звонков только 23 — разговоры с покупателями. Остальные — страховка, коллеги, тишина.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-card small reveal reveal-delay-4">
|
||||||
|
<div class="card-number">3.1</div>
|
||||||
|
<h3>Средний балл</h3>
|
||||||
|
<p>Операторы «Автолинии» получают 2.3–3.1 из 10. Лучший оператор — 8 из 10.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bento-card small reveal reveal-delay-5">
|
||||||
|
<div class="card-number">0₽</div>
|
||||||
|
<h3>Аналитики</h3>
|
||||||
|
<p>Большинство агентств вообще не анализируют звонки. Не знают, что теряют.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ SOLUTION ═══ -->
|
||||||
|
<section id="solution" class="section solution-section" aria-labelledby="solution-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="solution-grid">
|
||||||
|
<div class="solution-text">
|
||||||
|
<div class="section-eyebrow reveal">Решение</div>
|
||||||
|
<h2 id="solution-title" class="reveal reveal-delay-1">Аналитика, которая растит конверсию</h2>
|
||||||
|
<p class="reveal reveal-delay-2">Мы анализируем каждый звонок по 10 пунктам и даём конкретные рекомендации, а не просто цифры.</p>
|
||||||
|
<div class="feature-list">
|
||||||
|
<div class="feature-item reveal">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h3>Транскрибация за секунды</h3>
|
||||||
|
<p>Загрузите MP3/WAV — через 2 минуты получите текст звонка с временными метками.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item reveal reveal-delay-1">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h3>AI-оценка по чек-листу</h3>
|
||||||
|
<p>Нейросеть проверяет 10 пунктов скрипта и ставит оценку от 1 до 10.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item reveal reveal-delay-2">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h3>Рейтинг операторов</h3>
|
||||||
|
<p>Автоматический рейтинг от лучшего к худшему — без субъективности.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item reveal reveal-delay-3">
|
||||||
|
<div class="feature-icon">✓</div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h3>Рекомендации по росту</h3>
|
||||||
|
<p>Не просто «плохо», а «замените фразу X на Y для роста конверсии на 15%».</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="solution-visual reveal" aria-hidden="true">
|
||||||
|
<div class="mockup-bar">
|
||||||
|
<div class="mockup-dots"><div class="mockup-dot r"></div><div class="mockup-dot y"></div><div class="mockup-dot g"></div></div>
|
||||||
|
<span>calls24 — Рейтинг операторов</span>
|
||||||
|
</div>
|
||||||
|
<div class="mockup-list">
|
||||||
|
<div class="mockup-row">
|
||||||
|
<div class="mockup-avatar">РМ</div>
|
||||||
|
<div class="mockup-info"><div class="mockup-info-line" style="width:80%"></div><div class="mockup-info-line"></div></div>
|
||||||
|
<div class="mockup-score good">8.5</div>
|
||||||
|
</div>
|
||||||
|
<div class="mockup-row">
|
||||||
|
<div class="mockup-avatar">АГ</div>
|
||||||
|
<div class="mockup-info"><div class="mockup-info-line" style="width:60%"></div><div class="mockup-info-line"></div></div>
|
||||||
|
<div class="mockup-score good">7.2</div>
|
||||||
|
</div>
|
||||||
|
<div class="mockup-row">
|
||||||
|
<div class="mockup-avatar">КА</div>
|
||||||
|
<div class="mockup-info"><div class="mockup-info-line" style="width:40%"></div><div class="mockup-info-line"></div></div>
|
||||||
|
<div class="mockup-score mid">3.8</div>
|
||||||
|
</div>
|
||||||
|
<div class="mockup-row">
|
||||||
|
<div class="mockup-avatar">АЛ</div>
|
||||||
|
<div class="mockup-info"><div class="mockup-info-line" style="width:30%"></div><div class="mockup-info-line"></div></div>
|
||||||
|
<div class="mockup-score bad">2.8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ STEPS ═══ -->
|
||||||
|
<section id="steps" class="section" aria-labelledby="steps-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-eyebrow reveal">Как это работает</div>
|
||||||
|
<h2 id="steps-title" class="section-title reveal reveal-delay-1">Три шага до роста конверсии</h2>
|
||||||
|
</div>
|
||||||
|
<div class="steps-container">
|
||||||
|
<div class="steps-visual reveal" aria-hidden="true">
|
||||||
|
<div class="steps-icon">📊</div>
|
||||||
|
<div style="font-size:20px;font-weight:700;margin-bottom:4px;">Аналитика в реальном времени</div>
|
||||||
|
<div style="color:var(--color-text-secondary);font-size:14px;">Загрузите файл — получите отчёт за 2 минуты</div>
|
||||||
|
</div>
|
||||||
|
<div class="steps-list">
|
||||||
|
<div class="step-item reveal">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<div>
|
||||||
|
<h3>Загрузите аудио</h3>
|
||||||
|
<p>Перетащите запись звонка из CRM. Поддерживаем MP3, WAV, M4A — до 100 МБ.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-item reveal reveal-delay-1">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div>
|
||||||
|
<h3>AI анализирует 10 параметров</h3>
|
||||||
|
<p>Нейросеть проверяет: приветствие, компанию, имя, тип клиента, комнаты, район, бюджет, был просмотр, встречу, контакт.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-item reveal reveal-delay-2">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div>
|
||||||
|
<h3>Получите отчёт</h3>
|
||||||
|
<p>PDF-отчёт с оценками, рейтингом операторов и рекомендациями по росту конверсии.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ TESTIMONIALS ═══ -->
|
||||||
|
<section class="section" aria-labelledby="testimonials-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-eyebrow reveal">Отзывы</div>
|
||||||
|
<h2 id="testimonials-title" class="section-title reveal reveal-delay-1">Что говорят клиенты</h2>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-grid">
|
||||||
|
<div class="testimonial-card reveal">
|
||||||
|
<div class="testimonial-stars">★★★★★</div>
|
||||||
|
<blockquote>"calls24 помог увеличить конверсию звонков на 40%. Мы знали о проблемах, но не видели их."</blockquote>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-avatar">МК</div>
|
||||||
|
<div>
|
||||||
|
<div class="testimonial-name">Мария К.</div>
|
||||||
|
<div class="testimonial-role">Рук. отдела продаж, Agency X</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-card reveal reveal-delay-1">
|
||||||
|
<div class="testimonial-stars">★★★★★</div>
|
||||||
|
<blockquote>"Протестировали 3 инструмента. calls24 — единственный, кто дал реальные инсайты, а не просто цифры."</blockquote>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-avatar">АП</div>
|
||||||
|
<div>
|
||||||
|
<div class="testimonial-name">Алексей П.</div>
|
||||||
|
<div class="testimonial-role">CEO, RealEstate Pro</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-card reveal reveal-delay-2">
|
||||||
|
<div class="testimonial-stars">★★★★★</div>
|
||||||
|
<blockquote>"Еженедельный отчёт — наш главный инструмент развития команды. Каждый знает, над чем работать."</blockquote>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-avatar">ДВ</div>
|
||||||
|
<div>
|
||||||
|
<div class="testimonial-name">Дмитрий В.</div>
|
||||||
|
<div class="testimonial-role">Директор, Broker Plus</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ PRICING ═══ -->
|
||||||
|
<section id="pricing" class="section" aria-labelledby="pricing-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-eyebrow reveal">Тарифы</div>
|
||||||
|
<h2 id="pricing-title" class="section-title reveal reveal-delay-1">Прозрачное ценообразование</h2>
|
||||||
|
<p class="section-subtitle reveal reveal-delay-2">Начните бесплатно. Платите за результат.</p>
|
||||||
|
</div>
|
||||||
|
<div class="pricing-grid">
|
||||||
|
<div class="pricing-card reveal">
|
||||||
|
<div class="pricing-name">Аудит</div>
|
||||||
|
<div class="pricing-price">0₽</div>
|
||||||
|
<div class="pricing-desc">Попробуйте бесплатно</div>
|
||||||
|
<ul class="pricing-features">
|
||||||
|
<li><span class="check-icon">✓</span> 1 звонок</li>
|
||||||
|
<li><span class="check-icon">✓</span> Базовый отчёт</li>
|
||||||
|
<li><span class="check-icon">✓</span> 10 параметров</li>
|
||||||
|
<li class="disabled"><span class="cross-icon">×</span> Рейтинг операторов</li>
|
||||||
|
<li class="disabled"><span class="cross-icon">×</span> Рекомендации</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-secondary">Попробовать</a>
|
||||||
|
</div>
|
||||||
|
<div class="pricing-card featured reveal reveal-delay-1">
|
||||||
|
<div class="pricing-name">Стандарт</div>
|
||||||
|
<div class="pricing-price">5 000₽</div>
|
||||||
|
<div class="pricing-desc">За 10 звонков</div>
|
||||||
|
<ul class="pricing-features">
|
||||||
|
<li><span class="check-icon">✓</span> 10 звонков</li>
|
||||||
|
<li><span class="check-icon">✓</span> Детальный отчёт</li>
|
||||||
|
<li><span class="check-icon">✓</span> Рейтинг операторов</li>
|
||||||
|
<li><span class="check-icon">✓</span> Рекомендации</li>
|
||||||
|
<li><span class="check-icon">✓</span> PDF экспорт</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-primary magnetic-btn">Заказать</a>
|
||||||
|
</div>
|
||||||
|
<div class="pricing-card reveal reveal-delay-2">
|
||||||
|
<div class="pricing-name">Премиум</div>
|
||||||
|
<div class="pricing-price">15 000₽<span>/мес</span></div>
|
||||||
|
<div class="pricing-desc">Безлимитный доступ</div>
|
||||||
|
<ul class="pricing-features">
|
||||||
|
<li><span class="check-icon">✓</span> Безлимит звонков</li>
|
||||||
|
<li><span class="check-icon">✓</span> Ежедневные отчёты</li>
|
||||||
|
<li><span class="check-icon">✓</span> Динамика улучшений</li>
|
||||||
|
<li><span class="check-icon">✓</span> Интеграция с CRM</li>
|
||||||
|
<li><span class="check-icon">✓</span> Персональный менеджер</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-secondary">Связаться</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ═══ CTA ═══ -->
|
||||||
|
<section id="contact" class="cta-section" aria-labelledby="cta-title">
|
||||||
|
<div class="gradient-orbs" aria-hidden="true">
|
||||||
|
<div class="orb orb-1"></div>
|
||||||
|
<div class="orb orb-3"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content">
|
||||||
|
<h2 id="cta-title" class="cta-title reveal">Начните <span class="gradient-text">бесплатный аудит</span></h2>
|
||||||
|
<p class="cta-subtitle reveal reveal-delay-1">Загрузите одну запись звонка и получите полную аналитику бесплатно. Никаких обязательств.</p>
|
||||||
|
<div class="cta-actions reveal reveal-delay-2">
|
||||||
|
<a href="#" class="btn btn-primary btn-xl magnetic-btn">Загрузить звонок →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer" role="contentinfo">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div class="footer-copy">© 2026 calls24. Все права защищены.</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#">Конфиденциальность</a>
|
||||||
|
<a href="#">Оферта</a>
|
||||||
|
<a href="mailto:hello@calls24.ru">hello@calls24.ru</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
// MAGNETIC BUTTONS (Pattern #2)
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
class MagneticButton {
|
||||||
|
constructor(el, opts = {}) {
|
||||||
|
this.el = el;
|
||||||
|
this.radius = opts.radius || 100;
|
||||||
|
this.strength = opts.strength || 0.4;
|
||||||
|
this.spring = opts.spring || 0.1;
|
||||||
|
this.rect = this.el.getBoundingClientRect();
|
||||||
|
this.x = this.rect.left + this.rect.width / 2;
|
||||||
|
this.y = this.rect.top + this.rect.height / 2;
|
||||||
|
this.currentX = 0; this.currentY = 0;
|
||||||
|
this.isHovering = false;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
init() {
|
||||||
|
this.el.addEventListener('mouseenter', () => this.isHovering = true);
|
||||||
|
this.el.addEventListener('mouseleave', () => { this.isHovering = false; this.animate(); });
|
||||||
|
this.el.addEventListener('mousemove', (e) => {
|
||||||
|
if (!this.isHovering) return;
|
||||||
|
this.targetX = (e.clientX - this.x) * this.strength;
|
||||||
|
this.targetY = (e.clientY - this.y) * this.strength;
|
||||||
|
});
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
animate() {
|
||||||
|
if (this.isHovering && this.targetX !== undefined) {
|
||||||
|
this.currentX += (this.targetX - this.currentX) * 0.3;
|
||||||
|
this.currentY += (this.targetY - this.currentY) * 0.3;
|
||||||
|
} else {
|
||||||
|
this.currentX *= (1 - this.spring);
|
||||||
|
this.currentY *= (1 - this.spring);
|
||||||
|
}
|
||||||
|
this.el.style.transform = `translate(${this.currentX}px, ${this.currentY}px)`;
|
||||||
|
requestAnimationFrame(() => this.animate());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
// STAGGERED REVEAL (Pattern #1)
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
function initReveal() {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) entry.target.classList.add('visible');
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||||||
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
// NAV SCROLL
|
||||||
|
// ═══════════════════════════════════════════
|
||||||
|
function initNav() {
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
let ticking = false;
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||||
|
else nav.classList.remove('scrolled');
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('.magnetic-btn').forEach(el => new MagneticButton(el, { radius: 120, strength: 0.4 }));
|
||||||
|
initReveal();
|
||||||
|
initNav();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1214
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+3255
File diff suppressed because it is too large.
Load diff
+1438
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,18 @@
|
|||||||
|
# Консистентность кнопок CTA
|
||||||
|
|
||||||
|
## Правило
|
||||||
|
Все кнопки призыва к действию — зелёные (`btn-green`):
|
||||||
|
- "Начать бесплатно" (навигация + карточка тарифа)
|
||||||
|
- "Узнать, сколько теряете →" (hero)
|
||||||
|
- "Узнать, сколько потеряли →" (CTA-секция)
|
||||||
|
- "Написать в Telegram" (CTA-секция + футер)
|
||||||
|
- "Принять" (cookie-banner)
|
||||||
|
|
||||||
|
## Не трогать
|
||||||
|
- `btn-secondary` — "Посмотреть пример отчёта", "Загрузить звонки", "Отклонить"
|
||||||
|
- Кнопки внутри карточек тарифов "Загрузить звонки" — остаются secondary
|
||||||
|
|
||||||
|
## Классы
|
||||||
|
- `.btn-green` — primary action (зелёная)
|
||||||
|
- `.btn-secondary` — secondary action (контурная)
|
||||||
|
- `.btn-primary` — больше не используется, заменить на `btn-green`
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# Шаблон: Дашборд сотрудников
|
||||||
|
|
||||||
|
## Структура
|
||||||
|
- На десктопе — табличное представление (`.employee-table-view`)
|
||||||
|
- На мобильном (≤768px) — карточное представление (`.employee-card-view`)
|
||||||
|
- Переключатель табов УБРАН — автоматическое переключение по ширине экрана
|
||||||
|
- `display: none` / `display: flex` управляется через CSS медиа-запросы
|
||||||
|
|
||||||
|
## Колонки таблицы
|
||||||
|
Сотрудник | Звонки | Балл | Скрипт | Конверсия | Ср. время | Тренд
|
||||||
|
|
||||||
|
## Карточка сотрудника
|
||||||
|
- Аватар с инициалами
|
||||||
|
- Круговая диаграмма score-ring
|
||||||
|
- Метрики в 2 колонки (балл, скрипт, конверсия, время)
|
||||||
|
- Блок "Слабое место" с иконкой-треугольником
|
||||||
|
|
||||||
|
## Правила
|
||||||
|
- Новые сотрудники добавляются как строки/карточки с той же структурой
|
||||||
|
- Тренд: зелёный +X.X, красный -X.X
|
||||||
|
- Не менять структуру — только добавлять данные
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
# Адаптация секции под мобильный (≤768px)
|
||||||
|
|
||||||
|
## Конвенции
|
||||||
|
- Брейкпоинт: `@media (max-width: 768px)`
|
||||||
|
- Grid → `grid-template-columns: 1fr` (одна колонка)
|
||||||
|
- Flex → `flex-direction: column` (вертикальный стек)
|
||||||
|
- Padding → уменьшить с 3rem до 1.5rem
|
||||||
|
- Шрифты — не мельче 14px для текста, 18px для заголовков
|
||||||
|
- Кнопки на всю ширину: `width: 100%`
|
||||||
|
- Не трогать `scroll-behavior`, `animation`, GSAP-триггеры
|
||||||
|
|
||||||
|
## Порядок
|
||||||
|
1. Найти секцию в `index-v4.html` по CSS-классу или тексту
|
||||||
|
2. Добавить/обновить правило в `@media (max-width: 768px)`
|
||||||
|
3. Если секция табличная — заменить на карточный вид (`.employee-card-view`)
|
||||||
|
4. Проверить, что нет `overflow-x: hidden` на контенте
|
||||||
Reference in new issue
Block a user