1572 lines
74 KiB
HTML
1572 lines
74 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ROI24 — Живые цифры бизнеса за 3 дня</title>
|
||
<meta name="description" content="Автоматизированные дашборды для собственников бизнеса. Подключаем 1С, CRM, банки и рекламу. 10 ключевых метрик — каждое утро с телефона.">
|
||
<meta property="og:title" content="ROI24 — Живые цифры бизнеса за 3 дня">
|
||
<meta property="og:description" content="Дашборд с ключевыми метриками из 1С, CRM и банков. Обновляется автоматически. Смотрится с телефона.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="ru_RU">
|
||
<link rel="preconnect" href="https://fonts.cdnfonts.com">
|
||
<link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
|
||
<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
|
||
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
|
||
<style>
|
||
/* ============================================================
|
||
DESIGN TOKENS
|
||
============================================================ */
|
||
:root {
|
||
--bg: #0a0a0a;
|
||
--surface: #111111;
|
||
--card: #161618;
|
||
--border: rgba(255,255,255,0.06);
|
||
--border-hover: rgba(255,255,255,0.15);
|
||
--text: #f5f5f5;
|
||
--text-sec: #a1a1aa;
|
||
--text-dim: #52525b;
|
||
--accent: #22c55e;
|
||
--accent-hover: #16a34a;
|
||
--accent-dim: rgba(34,197,94,0.12);
|
||
--blue: #3b82f6;
|
||
--blue-dim: rgba(59,130,246,0.12);
|
||
--amber: #f59e0b;
|
||
--red: #ef4444;
|
||
--red-dim: rgba(239,68,68,0.12);
|
||
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--mono: 'JetBrains Mono', 'SF Mono', monospace;
|
||
}
|
||
|
||
/* ============================================================
|
||
RESET & BASE
|
||
============================================================ */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
background: var(--bg); color: var(--text); font-family: var(--font);
|
||
line-height: 1.6; overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
|
||
}
|
||
body::before {
|
||
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
||
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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
|
||
opacity: 0.5;
|
||
}
|
||
a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
|
||
a:hover { opacity: 0.85; }
|
||
img { max-width: 100%; display: block; }
|
||
ul { list-style: none; }
|
||
button, input, textarea { font-family: inherit; font-size: inherit; }
|
||
|
||
/* Focus-visible for accessibility */
|
||
:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
border-radius: 4px;
|
||
}
|
||
/* Skip link */
|
||
.skip-link {
|
||
position: absolute; top: -100%; left: 16px; background: var(--accent);
|
||
color: #000; padding: 8px 16px; border-radius: 8px; z-index: 9999;
|
||
font-weight: 600; font-size: 0.875rem;
|
||
}
|
||
.skip-link:focus { top: 16px; }
|
||
|
||
/* ============================================================
|
||
LAYOUT
|
||
============================================================ */
|
||
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
section { padding: 128px 0; }
|
||
.section-label {
|
||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
|
||
color: var(--accent); margin-bottom: 12px; font-weight: 600;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
|
||
letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
|
||
}
|
||
.section-desc {
|
||
font-size: 1.125rem; color: var(--text-sec); max-width: 560px; margin-bottom: 48px;
|
||
}
|
||
.text-center { text-align: center; }
|
||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||
|
||
/* ============================================================
|
||
HEADER / NAV
|
||
============================================================ */
|
||
.header {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
height: 72px; display: flex; align-items: center;
|
||
background: rgba(10,10,10,0.6); backdrop-filter: blur(16px) saturate(180%);
|
||
border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
|
||
}
|
||
.header.scrolled {
|
||
background: rgba(10,10,10,0.9);
|
||
border-bottom-color: var(--border);
|
||
}
|
||
.header .wrap {
|
||
display: flex; align-items: center; justify-content: space-between; width: 100%;
|
||
}
|
||
.logo {
|
||
font-size: 1.375rem; font-weight: 800; letter-spacing: -0.04em;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.logo span { color: var(--accent); }
|
||
.nav-links { display: flex; align-items: center; gap: 32px; }
|
||
.nav-links a { font-size: 0.875rem; color: var(--text-sec); transition: color 0.2s; }
|
||
.nav-links a:hover { color: var(--text); opacity: 1; }
|
||
.header-phone {
|
||
font-size: 0.875rem; color: var(--text-sec); margin-right: 20px;
|
||
font-family: var(--mono);
|
||
}
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
padding: 12px 24px; border-radius: 100px; font-weight: 600; font-size: 0.875rem;
|
||
cursor: pointer; border: none; transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-accent {
|
||
background: var(--accent); color: #000;
|
||
}
|
||
.btn-accent:hover {
|
||
background: var(--accent-hover); transform: translateY(-1px);
|
||
box-shadow: 0 8px 24px var(--accent-dim); opacity: 1;
|
||
}
|
||
.btn-accent.cta-glow {
|
||
animation: ctaGlow 2s ease-in-out infinite;
|
||
}
|
||
@keyframes ctaGlow {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
|
||
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
|
||
}
|
||
.btn-outline {
|
||
background: transparent; border: 1px solid var(--border); color: var(--text);
|
||
}
|
||
.btn-outline:hover { border-color: var(--text-sec); opacity: 1; }
|
||
.btn-lg { padding: 16px 32px; font-size: 1rem; }
|
||
|
||
/* ============================================================
|
||
HERO
|
||
============================================================ */
|
||
.hero {
|
||
padding: 160px 0 100px; position: relative;
|
||
}
|
||
.hero-inner {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 800;
|
||
letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 20px;
|
||
}
|
||
.hero h1 .accent { color: var(--accent); }
|
||
.hero-sub {
|
||
font-size: 1.125rem; color: var(--text-sec); margin-bottom: 32px; line-height: 1.7;
|
||
}
|
||
.hero-actions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
|
||
.hero-trust {
|
||
font-size: 0.8125rem; color: var(--text-dim); margin-top: 16px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.hero-trust svg { color: var(--accent); flex-shrink: 0; }
|
||
|
||
/* Hero geometric decorations */
|
||
.hero::before, .hero::after {
|
||
content: ''; position: absolute; border-radius: 50%; opacity: 0.03;
|
||
background: var(--accent); pointer-events: none;
|
||
}
|
||
.hero::before { width: 400px; height: 400px; top: -100px; right: -100px; }
|
||
.hero::after { width: 200px; height: 200px; bottom: 40px; right: 40%; border-radius: 4px; }
|
||
|
||
/* ============================================================
|
||
DASHBOARD PREVIEW
|
||
============================================================ */
|
||
.dash-wrap {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5);
|
||
position: relative;
|
||
}
|
||
.dash-wrap::before {
|
||
content: ''; position: absolute; top: -40%; left: -40%;
|
||
width: 180%; height: 180%; pointer-events: none; z-index: 0;
|
||
background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 60%);
|
||
}
|
||
.dash-top {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 16px 24px; border-bottom: 1px solid var(--border);
|
||
position: relative; z-index: 1;
|
||
}
|
||
.dash-title { font-size: 0.875rem; font-weight: 600; }
|
||
.dash-live {
|
||
font-size: 0.75rem; padding: 4px 12px; border-radius: 100px;
|
||
background: var(--accent-dim); color: var(--accent);
|
||
border: 1px solid rgba(34,197,94,0.2);
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.dash-live-dot {
|
||
width: 6px; height: 6px; background: var(--accent);
|
||
border-radius: 50%; animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||
.dash-segments {
|
||
display: flex; gap: 4px; padding: 12px 24px;
|
||
border-bottom: 1px solid var(--border); position: relative; z-index: 1;
|
||
}
|
||
.dash-seg-btn {
|
||
padding: 6px 14px; border-radius: 8px; font-size: 0.75rem;
|
||
background: transparent; border: 1px solid transparent;
|
||
color: var(--text-sec); cursor: pointer; transition: all 0.2s;
|
||
font-weight: 500;
|
||
}
|
||
.dash-seg-btn.active, .dash-seg-btn:hover {
|
||
background: var(--accent-dim); color: var(--accent);
|
||
border-color: rgba(34,197,94,0.2);
|
||
}
|
||
.dash-body { padding: 24px; position: relative; z-index: 1; }
|
||
.dash-kpis {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.dash-kpi {
|
||
background: var(--card); border: 1px solid var(--border);
|
||
border-radius: 10px; padding: 16px; transition: all 0.2s;
|
||
}
|
||
.dash-kpi:hover { border-color: var(--border-hover); transform: translateY(-1px); }
|
||
.dash-kpi-label { font-size: 0.6875rem; color: var(--text-sec); margin-bottom: 6px; }
|
||
.dash-kpi-value {
|
||
font-size: 1.375rem; font-weight: 800; font-family: var(--mono);
|
||
margin-bottom: 4px; letter-spacing: -0.02em;
|
||
}
|
||
.dash-kpi-trend { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
|
||
.trend-up { color: var(--accent); }
|
||
.trend-down { color: var(--red); }
|
||
.dash-charts {
|
||
display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px;
|
||
}
|
||
.dash-chart {
|
||
background: var(--card); border: 1px solid var(--border);
|
||
border-radius: 10px; padding: 16px;
|
||
}
|
||
.dash-chart-title {
|
||
font-size: 0.75rem; font-weight: 600; margin-bottom: 12px; color: var(--text-sec);
|
||
}
|
||
.chart-canvas { width: 100%; height: 180px; }
|
||
|
||
/* ============================================================
|
||
NUMBERS STRIP
|
||
============================================================ */
|
||
.numbers { padding: 80px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
.numbers-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.num-item {}
|
||
.num-value {
|
||
font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800;
|
||
font-family: var(--mono); letter-spacing: -0.03em; color: var(--accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
.num-value .num-unit { font-size: 0.6em; color: var(--text-sec); }
|
||
.num-text { font-size: 0.875rem; color: var(--text-sec); line-height: 1.5; }
|
||
|
||
/* ============================================================
|
||
PROBLEMS
|
||
============================================================ */
|
||
.problems-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
|
||
}
|
||
.problem-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 32px; transition: all 0.3s;
|
||
}
|
||
.problem-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
|
||
.problem-icon {
|
||
width: 48px; height: 48px; border-radius: 12px;
|
||
background: var(--red-dim); color: var(--red);
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 20px; font-size: 1.25rem;
|
||
}
|
||
.problem-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
|
||
.problem-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
SOLUTION
|
||
============================================================ */
|
||
.solution { background: var(--surface); }
|
||
.solution-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||
}
|
||
.solution-card {
|
||
background: var(--card); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 32px; transition: all 0.3s;
|
||
}
|
||
.solution-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
|
||
.sol-icon {
|
||
font-size: 2rem; margin-bottom: 16px;
|
||
}
|
||
.solution-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; }
|
||
.solution-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
HOW IT WORKS (Timeline)
|
||
============================================================ */
|
||
.timeline { position: relative; max-width: 640px; }
|
||
.timeline::before {
|
||
content: ''; position: absolute; left: 23px; top: 0; bottom: 0;
|
||
width: 2px; background: var(--border);
|
||
}
|
||
.tl-step {
|
||
position: relative; padding-left: 64px; padding-bottom: 48px;
|
||
}
|
||
.tl-step:last-child { padding-bottom: 0; }
|
||
.tl-dot {
|
||
position: absolute; left: 14px; top: 4px; width: 20px; height: 20px;
|
||
border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tl-dot span {
|
||
font-size: 0.625rem; font-weight: 700; color: var(--accent);
|
||
font-family: var(--mono);
|
||
}
|
||
.tl-step h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; }
|
||
.tl-time { font-size: 0.75rem; color: var(--accent); font-family: var(--mono); margin-bottom: 8px; }
|
||
.tl-step p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
FOR WHOM (Bento Grid)
|
||
============================================================ */
|
||
.bento {
|
||
display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr;
|
||
grid-template-rows: auto auto; gap: 16px;
|
||
}
|
||
.bento-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 32px; transition: all 0.3s;
|
||
}
|
||
.bento-card:hover { border-color: var(--border-hover); }
|
||
.bento-card.featured { grid-row: span 2; }
|
||
.bento-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
|
||
.bento-metrics { font-size: 0.8125rem; color: var(--text-sec); margin-bottom: 16px; line-height: 1.7; }
|
||
.bento-example {
|
||
font-size: 0.75rem; color: var(--text-dim); font-style: italic;
|
||
border-left: 2px solid var(--border); padding-left: 12px;
|
||
}
|
||
|
||
/* ============================================================
|
||
COMPARISON TABLE
|
||
============================================================ */
|
||
.comparison { background: var(--surface); }
|
||
.comp-table {
|
||
width: 100%; border-collapse: collapse; font-size: 0.875rem;
|
||
}
|
||
.comp-table th {
|
||
text-align: left; padding: 16px 20px; font-weight: 600;
|
||
border-bottom: 2px solid var(--border); font-size: 0.8125rem;
|
||
color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.05em;
|
||
}
|
||
.comp-table th:last-child { color: var(--accent); }
|
||
.comp-table td {
|
||
padding: 14px 20px; border-bottom: 1px solid var(--border);
|
||
color: var(--text-sec);
|
||
}
|
||
.comp-table tr:hover td { background: rgba(255,255,255,0.02); }
|
||
.comp-yes { color: var(--accent); font-weight: 600; }
|
||
.comp-no { color: var(--red); }
|
||
|
||
/* ============================================================
|
||
CASE STUDY
|
||
============================================================ */
|
||
.case-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 48px; position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.case-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
|
||
background: var(--accent);
|
||
}
|
||
.case-company {
|
||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--accent); margin-bottom: 16px; font-weight: 600;
|
||
}
|
||
.case-card h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 32px; }
|
||
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 32px; }
|
||
.case-block h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-sec); margin-bottom: 12px; }
|
||
.case-block ul { font-size: 0.875rem; color: var(--text-sec); line-height: 2; }
|
||
.case-block ul li::before { content: '— '; color: var(--accent); }
|
||
.case-quote {
|
||
border-left: 2px solid var(--accent); padding-left: 20px;
|
||
font-style: italic; color: var(--text-sec); font-size: 1rem; line-height: 1.7;
|
||
margin-bottom: 12px;
|
||
}
|
||
.case-author { font-size: 0.8125rem; color: var(--text-dim); }
|
||
|
||
/* ============================================================
|
||
TEAM
|
||
============================================================ */
|
||
.team { background: var(--surface); }
|
||
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||
.team-card {
|
||
background: var(--card); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 32px; text-align: center;
|
||
transition: all 0.3s;
|
||
}
|
||
.team-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
|
||
.team-avatar {
|
||
width: 80px; height: 80px; border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent-dim), var(--blue-dim));
|
||
margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.75rem; font-weight: 800; color: var(--accent);
|
||
border: 2px solid var(--border);
|
||
}
|
||
.team-card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 4px; }
|
||
.team-role { font-size: 0.8125rem; color: var(--accent); margin-bottom: 12px; font-weight: 500; }
|
||
.team-exp { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.5; }
|
||
|
||
/* ============================================================
|
||
CALCULATOR
|
||
============================================================ */
|
||
.calc-wrap {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 48px; max-width: 600px;
|
||
}
|
||
.calc-field { margin-bottom: 20px; }
|
||
.calc-field label {
|
||
display: block; font-size: 0.8125rem; color: var(--text-sec); margin-bottom: 6px;
|
||
}
|
||
.calc-field input {
|
||
width: 100%; padding: 12px 16px; background: var(--card);
|
||
border: 1px solid var(--border); border-radius: 10px;
|
||
color: var(--text); font-size: 1rem; font-family: var(--mono);
|
||
transition: border-color 0.2s;
|
||
}
|
||
.calc-field input:focus { border-color: var(--accent); outline: none; }
|
||
.calc-result {
|
||
margin-top: 24px; padding: 24px; border-radius: 12px;
|
||
background: var(--accent-dim); border: 1px solid rgba(34,197,94,0.2);
|
||
text-align: center; display: none;
|
||
}
|
||
.calc-result.show { display: block; }
|
||
.calc-result .calc-big {
|
||
font-size: 2rem; font-weight: 800; color: var(--accent);
|
||
font-family: var(--mono); margin-bottom: 8px;
|
||
}
|
||
.calc-result .calc-detail { font-size: 0.8125rem; color: var(--text-sec); }
|
||
|
||
/* ============================================================
|
||
PRICING
|
||
============================================================ */
|
||
.pricing { background: var(--surface); }
|
||
.price-card {
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 48px; text-align: center;
|
||
max-width: 480px; margin: 0 auto; position: relative;
|
||
}
|
||
.price-card::before {
|
||
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
||
width: 60px; height: 3px; background: var(--accent); border-radius: 0 0 4px 4px;
|
||
}
|
||
.price-name { font-size: 1rem; color: var(--text-sec); margin-bottom: 8px; }
|
||
.price-amount {
|
||
font-size: 3rem; font-weight: 800; font-family: var(--mono);
|
||
letter-spacing: -0.03em; margin-bottom: 4px;
|
||
}
|
||
.price-amount span { font-size: 0.4em; color: var(--text-sec); font-weight: 400; }
|
||
.price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 32px; }
|
||
.price-features { text-align: left; margin-bottom: 32px; }
|
||
.price-features li {
|
||
padding: 8px 0; font-size: 0.875rem; color: var(--text-sec);
|
||
display: flex; align-items: flex-start; gap: 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.price-features li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
|
||
.price-guarantee {
|
||
margin-top: 24px; padding: 20px; border-radius: 10px;
|
||
background: var(--card); border: 1px solid var(--border);
|
||
font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6;
|
||
}
|
||
.trust-badges {
|
||
display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
|
||
margin-top: 24px;
|
||
}
|
||
.trust-badge {
|
||
font-size: 0.75rem; color: var(--text-dim);
|
||
display: flex; align-items: center; gap: 4px;
|
||
}
|
||
.trust-badge::before { content: '✓'; color: var(--accent); font-size: 0.875rem; }
|
||
|
||
/* ============================================================
|
||
FAQ
|
||
============================================================ */
|
||
.faq-list { max-width: 720px; margin: 0 auto; }
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.faq-q {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 20px 0; cursor: pointer; font-weight: 600;
|
||
font-size: 1rem; user-select: none; transition: color 0.2s;
|
||
}
|
||
.faq-q:hover { color: var(--accent); }
|
||
.faq-arrow {
|
||
flex-shrink: 0; transition: transform 0.3s; font-size: 0.875rem; color: var(--text-dim);
|
||
}
|
||
.faq-item.open .faq-arrow { transform: rotate(45deg); }
|
||
.faq-a {
|
||
max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
|
||
}
|
||
.faq-a-inner {
|
||
padding: 0 0 20px; font-size: 0.875rem; color: var(--text-sec); line-height: 1.7;
|
||
}
|
||
|
||
/* ============================================================
|
||
CTA
|
||
============================================================ */
|
||
.cta-section { background: var(--surface); }
|
||
.cta-box {
|
||
text-align: center; padding: 80px 48px;
|
||
border-radius: 20px; background: var(--card);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.cta-box h2 {
|
||
font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800;
|
||
letter-spacing: -0.03em; margin-bottom: 12px;
|
||
}
|
||
.cta-box p { color: var(--text-sec); margin-bottom: 32px; font-size: 1.0625rem; }
|
||
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||
.cta-mini-form {
|
||
display: flex; gap: 8px; margin-top: 24px; justify-content: center;
|
||
}
|
||
.cta-mini-form input {
|
||
padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: 100px; color: var(--text); width: 220px;
|
||
}
|
||
.cta-mini-form input:focus { border-color: var(--accent); outline: none; }
|
||
|
||
/* ============================================================
|
||
FOOTER
|
||
============================================================ */
|
||
.footer {
|
||
border-top: 1px solid var(--border); padding: 64px 0 32px;
|
||
}
|
||
.footer-grid {
|
||
display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr; gap: 40px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.footer h4 {
|
||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--text-sec); margin-bottom: 16px; font-weight: 600;
|
||
}
|
||
.footer p, .footer a {
|
||
font-size: 0.8125rem; color: var(--text-sec); line-height: 1.8;
|
||
}
|
||
.footer a:hover { color: var(--accent); opacity: 1; }
|
||
.footer-bottom {
|
||
border-top: 1px solid var(--border); padding-top: 24px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
flex-wrap: wrap; gap: 16px;
|
||
}
|
||
.footer-bottom p { font-size: 0.75rem; color: var(--text-dim); }
|
||
.footer-links { display: flex; gap: 24px; }
|
||
.footer-links a { font-size: 0.75rem; color: var(--text-dim); }
|
||
.footer-links a:hover { color: var(--text-sec); opacity: 1; }
|
||
|
||
/* Fixed Telegram button */
|
||
.tg-float {
|
||
position: fixed; bottom: 24px; right: 24px; z-index: 90;
|
||
width: 56px; height: 56px; border-radius: 50%;
|
||
background: var(--accent); display: flex; align-items: center;
|
||
justify-content: center; box-shadow: 0 4px 20px rgba(34,197,94,0.3);
|
||
transition: transform 0.2s;
|
||
}
|
||
.tg-float:hover { transform: scale(1.05); opacity: 1; }
|
||
.tg-float svg { color: #000; }
|
||
|
||
/* Cookie banner */
|
||
.cookie-banner {
|
||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
|
||
background: var(--surface); border-top: 1px solid var(--border);
|
||
padding: 16px 24px; display: none; align-items: center;
|
||
justify-content: space-between; gap: 16px; flex-wrap: wrap;
|
||
}
|
||
.cookie-banner.show { display: flex; }
|
||
.cookie-banner p { font-size: 0.8125rem; color: var(--text-sec); flex: 1; }
|
||
.cookie-banner p a { color: var(--accent); text-decoration: underline; }
|
||
.cookie-close {
|
||
padding: 8px 20px; border-radius: 100px; background: var(--accent);
|
||
color: #000; font-weight: 600; font-size: 0.8125rem; cursor: pointer;
|
||
border: none; white-space: nowrap;
|
||
}
|
||
|
||
/* Privacy modal */
|
||
.modal-overlay {
|
||
position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.7);
|
||
display: none; align-items: center; justify-content: center;
|
||
padding: 24px;
|
||
}
|
||
.modal-overlay.show { display: flex; }
|
||
.modal-box {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 40px; max-width: 600px; width: 100%;
|
||
max-height: 80vh; overflow-y: auto;
|
||
}
|
||
.modal-box h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
|
||
.modal-box p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.7; margin-bottom: 12px; }
|
||
.modal-close {
|
||
margin-top: 16px; padding: 10px 24px; border-radius: 100px;
|
||
background: var(--accent); color: #000; font-weight: 600;
|
||
border: none; cursor: pointer;
|
||
}
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1024px) {
|
||
.hero-inner { grid-template-columns: 1fr; gap: 40px; }
|
||
.hero .dash-wrap { order: -1; }
|
||
.problems-grid, .solution-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.bento { grid-template-columns: 1fr 1fr; }
|
||
.bento-card.featured { grid-row: auto; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
.case-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
section { padding: 80px 0; }
|
||
.nav-links { display: none; }
|
||
.header-phone { display: none; }
|
||
.numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||
.problems-grid, .solution-grid, .team-grid { grid-template-columns: 1fr; }
|
||
.bento { grid-template-columns: 1fr; }
|
||
.dash-kpis { grid-template-columns: repeat(2, 1fr); }
|
||
.dash-charts { grid-template-columns: 1fr; }
|
||
.dash-kpi-value { font-size: 1.125rem; }
|
||
.comp-table { font-size: 0.75rem; }
|
||
.comp-table th, .comp-table td { padding: 10px 12px; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
.calc-wrap { padding: 24px; }
|
||
.cta-box { padding: 48px 24px; }
|
||
.cta-mini-form { flex-direction: column; }
|
||
.cta-mini-form input { width: 100%; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.dash-kpis { grid-template-columns: 1fr; }
|
||
.hero-actions { flex-direction: column; }
|
||
.hero-actions .btn { width: 100%; }
|
||
}
|
||
|
||
/* ============================================================
|
||
ANIMATION (GSAP-ready classes)
|
||
============================================================ */
|
||
.reveal {
|
||
opacity: 0; transform: translateY(24px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.reveal.visible {
|
||
opacity: 1; transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Skip Link (a11y) -->
|
||
<a href="#main" class="skip-link">Перейти к содержимому</a>
|
||
|
||
<!-- HEADER -->
|
||
<header class="header" id="header">
|
||
<div class="wrap">
|
||
<a href="#" class="logo">ROI<span>24</span></a>
|
||
<nav class="nav-links">
|
||
<a href="#solution">Решение</a>
|
||
<a href="#demo">Пример</a>
|
||
<a href="#pricing">Тариф</a>
|
||
<a href="#faq">FAQ</a>
|
||
</nav>
|
||
<div style="display:flex;align-items:center;gap:20px;">
|
||
<a href="tel:+74951234567" class="header-phone">+7 (495) 123-45-67</a>
|
||
<a href="#cta" class="btn btn-accent">Обсудить проект</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
|
||
<!-- ===== HERO ===== -->
|
||
<section class="hero" id="hero">
|
||
<div class="wrap">
|
||
<div class="hero-inner">
|
||
<div>
|
||
<p class="section-label">Аналитика для собственников</p>
|
||
<h1>Вы теряете деньги, <br>не зная <span class="accent">почему</span></h1>
|
||
<p class="hero-sub">Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков. Без обучения, без Excel.</p>
|
||
<div class="hero-actions">
|
||
<a href="#cta" class="btn btn-accent btn-lg cta-glow">Получить демо за 3 дня</a>
|
||
<a href="#demo" class="btn btn-outline btn-lg">Посмотреть пример дашборда</a>
|
||
</div>
|
||
<p class="hero-trust">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||
Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app
|
||
</p>
|
||
</div>
|
||
|
||
<!-- DASHBOARD PREVIEW -->
|
||
<div class="dash-wrap" id="demo">
|
||
<div class="dash-top">
|
||
<span class="dash-title">ROI24 Dashboard</span>
|
||
<span class="dash-live"><span class="dash-live-dot"></span> Live Sync</span>
|
||
</div>
|
||
<div class="dash-segments">
|
||
<button class="dash-seg-btn active" data-seg="ecom">Интернет-магазин</button>
|
||
<button class="dash-seg-btn" data-seg="services">Услуги / Агентство</button>
|
||
<button class="dash-seg-btn" data-seg="production">Производство</button>
|
||
</div>
|
||
<div class="dash-body">
|
||
<div class="dash-kpis" id="dash-kpis">
|
||
<!-- injected by JS -->
|
||
</div>
|
||
<div class="dash-charts">
|
||
<div class="dash-chart">
|
||
<div class="dash-chart-title">Выручка, 12 месяцев</div>
|
||
<div class="chart-canvas" id="chart-revenue"></div>
|
||
</div>
|
||
<div class="dash-chart">
|
||
<div class="dash-chart-title">Каналы привлечения</div>
|
||
<div class="chart-canvas" id="chart-channels"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== NUMBERS ===== -->
|
||
<section class="numbers" id="numbers">
|
||
<div class="wrap">
|
||
<div class="numbers-grid">
|
||
<div class="num-item reveal">
|
||
<div class="num-value"><span class="counter" data-target="70">0</span><span class="num-unit">%</span></div>
|
||
<div class="num-text">компаний не видят<br>деньги в кассе на износ</div>
|
||
</div>
|
||
<div class="num-item reveal">
|
||
<div class="num-value"><span class="counter" data-target="3">0</span> <span class="num-unit">дня</span></div>
|
||
<div class="num-text">без дашборда<br>тратят время<br>на отчёты</div>
|
||
</div>
|
||
<div class="num-item reveal">
|
||
<div class="num-value"><span class="counter" data-target="83">0</span><span class="num-unit">%</span></div>
|
||
<div class="num-text">маркетологов не<br>могут доказать ROI</div>
|
||
</div>
|
||
<div class="num-item reveal">
|
||
<div class="num-value"><span class="counter" data-target="2.3" data-decimal="1">0</span><span class="num-unit">x</span></div>
|
||
<div class="num-text">чаще компании<br>с аналитикой<br>превышают цели</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PROBLEMS ===== -->
|
||
<section id="problems">
|
||
<div class="wrap">
|
||
<p class="section-label reveal">Знакомо?</p>
|
||
<h2 class="section-title reveal">3 боли собственника</h2>
|
||
<div class="problems-grid" style="margin-top:48px;">
|
||
<div class="problem-card reveal">
|
||
<div class="problem-icon">🔀</div>
|
||
<h3>Данные разбросаны</h3>
|
||
<p>Выручка в 1С, клиенты в CRM, расходы в банках, реклама в Яндекс.Директ. Каждый раз — ручная сводка. Нет единой картины.</p>
|
||
</div>
|
||
<div class="problem-card reveal">
|
||
<div class="problem-icon">🌫</div>
|
||
<h3>Непонятно, где теряете</h3>
|
||
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какой продукт убыточен.</p>
|
||
</div>
|
||
<div class="problem-card reveal">
|
||
<div class="problem-icon">⏰</div>
|
||
<h3>Отчёты приходят слишком поздно</h3>
|
||
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== SOLUTION ===== -->
|
||
<section class="solution" id="solution">
|
||
<div class="wrap">
|
||
<div class="text-center" style="max-width:600px;margin:0 auto 64px;">
|
||
<p class="section-label reveal">Решение</p>
|
||
<h2 class="section-title reveal">Один дашборд. Все ключевые цифры.</h2>
|
||
<p class="section-desc mx-auto reveal" style="margin-bottom:0;">ROI24 собирает данные из ваших источников и показывает 10 метрик, которые нужно смотреть каждое утро.</p>
|
||
</div>
|
||
<div class="solution-grid">
|
||
<div class="solution-card reveal">
|
||
<div class="sol-icon">⚡</div>
|
||
<h3>Живые данные</h3>
|
||
<p>Обновляются автоматически — 1С, CRM, банки, реклама. Не ждите понедельника, смотрите цифры здесь и сейчас.</p>
|
||
</div>
|
||
<div class="solution-card reveal">
|
||
<div class="sol-icon">👁</div>
|
||
<h3>Видно, где теряете</h3>
|
||
<p>Цветовые индикаторы: зелёный — норма, жёлтый — внимание, красный — теряете деньги. Понятно без обучения.</p>
|
||
</div>
|
||
<div class="solution-card reveal">
|
||
<div class="sol-icon">📱</div>
|
||
<h3>С телефона</h3>
|
||
<p>Собственник смотрит дашборд с телефона каждое утро — за завтраком, в дороге, в постели. Удобно и быстро.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== HOW IT WORKS ===== -->
|
||
<section id="how">
|
||
<div class="wrap">
|
||
<div style="display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;">
|
||
<div>
|
||
<p class="section-label reveal">Процесс</p>
|
||
<h2 class="section-title reveal">Как это работает</h2>
|
||
<p class="section-desc reveal">От звонка до дашборда — 3-5 дней. Вы не участвуете в технических процессах.</p>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="tl-step reveal">
|
||
<div class="tl-dot"><span>1</span></div>
|
||
<h3>Брифинг</h3>
|
||
<div class="tl-time">30 минут</div>
|
||
<p>Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок.</p>
|
||
</div>
|
||
<div class="tl-step reveal">
|
||
<div class="tl-dot"><span>2</span></div>
|
||
<h3>Подключение источников</h3>
|
||
<div class="tl-time">1-2 дня</div>
|
||
<p>Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.</p>
|
||
</div>
|
||
<div class="tl-step reveal">
|
||
<div class="tl-dot"><span>3</span></div>
|
||
<h3>Настройка дашборда</h3>
|
||
<div class="tl-time">1-2 дня</div>
|
||
<p>Настраиваем дашборд под ваши 10 метрик. Не 50 — только то, что реально нужно.</p>
|
||
</div>
|
||
<div class="tl-step reveal">
|
||
<div class="tl-dot"><span>4</span></div>
|
||
<h3>Демо</h3>
|
||
<div class="tl-time">30 минут</div>
|
||
<p>Показываем результат. Вносим правки. Вы видите, что работает.</p>
|
||
</div>
|
||
<div class="tl-step reveal">
|
||
<div class="tl-dot"><span>5</span></div>
|
||
<h3>Запуск</h3>
|
||
<div class="tl-time">1 день</div>
|
||
<p>Даём доступ, обучаем команду. Автоматическое обновление включено. Готово.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FOR WHOM ===== -->
|
||
<section id="for-whom" style="background:var(--surface);">
|
||
<div class="wrap">
|
||
<p class="section-label reveal">Кому подходит</p>
|
||
<h2 class="section-title reveal">Создан для вашего бизнеса</h2>
|
||
<div class="bento" style="margin-top:48px;">
|
||
<div class="bento-card featured reveal">
|
||
<h3>🛒 Интернет-магазин</h3>
|
||
<div class="bento-metrics">Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость, выручка по дням, дашборд по товарам</div>
|
||
<div class="bento-example">Пример: Сеть из 12 онлайн-магазинов, оборот ₽540 млн/год</div>
|
||
</div>
|
||
<div class="bento-card reveal">
|
||
<h3>📊 Услуги / Агентство</h3>
|
||
<div class="bento-metrics">Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу, NPS клиентов</div>
|
||
<div class="bento-example">Пример: Маркетинговое агентство, 8 сотрудников</div>
|
||
</div>
|
||
<div class="bento-card reveal">
|
||
<h3>🏭 Производство</h3>
|
||
<div class="bento-metrics">План/факт, OEE, качество, поставки, себестоимость, оборачиваемость сырья</div>
|
||
<div class="bento-example">Пример: Производство мебели, 2 цеха, 45 сотрудников</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== COMPARISON ===== -->
|
||
<section class="comparison" id="comparison">
|
||
<div class="wrap">
|
||
<div class="text-center" style="margin-bottom:48px;">
|
||
<p class="section-label reveal">Сравнение</p>
|
||
<h2 class="section-title reveal">ROI24 vs «как сейчас»</h2>
|
||
</div>
|
||
<div style="overflow-x:auto;" class="reveal">
|
||
<table class="comp-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:35%;">Параметр</th>
|
||
<th>Без ROI24</th>
|
||
<th>С ROI24</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Данные</td>
|
||
<td>5+ разрозненных источников</td>
|
||
<td class="comp-yes">1 дашборд</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Обновление</td>
|
||
<td>Ручной ввод, раз в неделю</td>
|
||
<td class="comp-yes">Авто, каждый час</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Время на отчёты</td>
|
||
<td>3+ часа / неделю</td>
|
||
<td class="comp-yes">0 мин</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Актуальность</td>
|
||
<td>Данные за прошлую неделю</td>
|
||
<td class="comp-yes">Живые данные</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Видно, где теряете</td>
|
||
<td class="comp-no">✕ Не видно</td>
|
||
<td class="comp-yes">✓ Цветовые сигналы</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Мобильный доступ</td>
|
||
<td class="comp-no">Нет</td>
|
||
<td class="comp-yes">Да, телефон</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Стоимость в год</td>
|
||
<td>100К + зарплата аналитика</td>
|
||
<td class="comp-yes">100К + поддержка 20К/мес</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Окупаемость</td>
|
||
<td class="comp-no">Не видно</td>
|
||
<td class="comp-yes">3–8 месяцев</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CASE STUDY ===== -->
|
||
<section id="case">
|
||
<div class="wrap">
|
||
<p class="section-label reveal">Кейс</p>
|
||
<div class="case-card reveal">
|
||
<div class="case-company">Сеть аптек · 42 точки · Москва и МО</div>
|
||
<h3>Как «ФармМаркет» нашёл убыточные точки и экономит ₽840 000/мес</h3>
|
||
<div class="case-grid">
|
||
<div class="case-block">
|
||
<h4>Проблема</h4>
|
||
<ul>
|
||
<li>Данные в 5 разных системах</li>
|
||
<li>Отчёты за неделю — по вторникам</li>
|
||
<li>Не знали, какие точки убыточны, до конца месяца</li>
|
||
</ul>
|
||
</div>
|
||
<div class="case-block">
|
||
<h4>Решение</h4>
|
||
<ul>
|
||
<li>Подключили 1С + CRM + 2 банка + кассы</li>
|
||
<li>Настроили 10 KPI на дашборд</li>
|
||
<li>Обновление каждого часа</li>
|
||
</ul>
|
||
</div>
|
||
<div class="case-block">
|
||
<h4>Результат</h4>
|
||
<ul>
|
||
<li>Выявили 3 убыточные точки за 2 недели</li>
|
||
<li>Сэкономили ₽840 000/мес</li>
|
||
<li>Собственник смотрит дашборд за завтраком</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="case-quote">«ROI24 — единственный инструмент, который дал реальные инсайты, а не просто красивые графики.»</div>
|
||
<div class="case-author">Алексей Петров, операционный директор «ФармМаркет»</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TEAM ===== -->
|
||
<section class="team" id="team">
|
||
<div class="wrap">
|
||
<div class="text-center" style="max-width:500px;margin:0 auto 64px;">
|
||
<p class="section-label reveal">Команда</p>
|
||
<h2 class="section-title reveal">Кто делает ваш дашборд</h2>
|
||
<p class="section-desc mx-auto reveal" style="margin-bottom:0;">Реальные люди с опытом в аналитике и рекламе. Не шаблонная команда — каждый проект индивидуален.</p>
|
||
</div>
|
||
<div class="team-grid">
|
||
<div class="team-card reveal">
|
||
<div class="team-avatar">АН</div>
|
||
<h3>Алексей Н.</h3>
|
||
<div class="team-role">Основатель</div>
|
||
<div class="team-exp">8 лет в бизнес-аналитике. 50+ проектов. Сертификаты 1С, Битрикс24, Яндекс.Директ.</div>
|
||
</div>
|
||
<div class="team-card reveal">
|
||
<div class="team-avatar">ДК</div>
|
||
<h3>Дмитрий К.</h3>
|
||
<div class="team-role">Технический директор</div>
|
||
<div class="team-exp">Data Engineer. PostgreSQL, ClickHouse, API. Подключает любые источники данных.</div>
|
||
</div>
|
||
<div class="team-card reveal">
|
||
<div class="team-avatar">МС</div>
|
||
<h3>Мария С.</h3>
|
||
<div class="team-role">Менеджер проектов</div>
|
||
<div class="team-exp">Переводит с «хочу всё» на «нужно 10 метрик». Работает с бизнесом, а не с кодом.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CALCULATOR ===== -->
|
||
<section id="calculator">
|
||
<div class="wrap">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;">
|
||
<div>
|
||
<p class="section-label reveal">Калькулятор</p>
|
||
<h2 class="section-title reveal">Сколько теряет <br>ваш бизнес?</h2>
|
||
<p class="section-desc reveal">Введите данные — увидите, сколько денег уходит на ручные отчёты и потерю данных.</p>
|
||
</div>
|
||
<div class="calc-wrap reveal">
|
||
<div class="calc-field">
|
||
<label>Сотрудчиков обрабатывают отчёты</label>
|
||
<input type="number" id="calc-people" value="3" min="1" max="100">
|
||
</div>
|
||
<div class="calc-field">
|
||
<label>Часов в неделю на отчёты (каждый)</label>
|
||
<input type="number" id="calc-hours" value="4" min="1" max="40">
|
||
</div>
|
||
<div class="calc-field">
|
||
<label>Средняя зарплата сотрудника, ₽/мес</label>
|
||
<input type="number" id="calc-salary" value="80000" min="10000" step="5000">
|
||
</div>
|
||
<div class="calc-result" id="calc-result">
|
||
<div class="calc-big" id="calc-result-big">—</div>
|
||
<div class="calc-detail" id="calc-result-detail"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PRICING ===== -->
|
||
<section class="pricing" id="pricing">
|
||
<div class="wrap">
|
||
<div class="text-center" style="max-width:600px;margin:0 auto 64px;">
|
||
<p class="section-label reveal">Тариф</p>
|
||
<h2 class="section-title reveal">Под ключ за 100 000 ₽</h2>
|
||
<p class="section-desc mx-auto reveal" style="margin-bottom:0;">Настройка дашборда. Подключение источников. Обучение команды.</p>
|
||
</div>
|
||
<div class="price-card reveal">
|
||
<div class="price-name">Все включено</div>
|
||
<div class="price-amount">100 000 <span>₽</span></div>
|
||
<div class="price-sub">Разовый платёж · оплата по договору</div>
|
||
<ul class="price-features">
|
||
<li>Подключение 1С / CRM</li>
|
||
<li>Настройка 10 метрик под ваш бизнес</li>
|
||
<li>Дизайн дашборда под вашу компанию</li>
|
||
<li>Обучение команды (2 часа)</li>
|
||
<li>Поддержка 30 дней включено</li>
|
||
<li>Обновление источников — бесконечно</li>
|
||
</ul>
|
||
<a href="#cta" class="btn btn-accent btn-lg" style="width:100%;">Обсудить проект</a>
|
||
<div class="price-guarantee">
|
||
<strong style="color:var(--text);">30-дневная гарантия.</strong> Если дашборд не устроит — вернём деньги за настройку. Работаем по этапам, вы видите результат после каждого шага.
|
||
</div>
|
||
<div class="trust-badges">
|
||
<span class="trust-badge">Данные в РФ</span>
|
||
<span class="trust-badge">152-ФЗ</span>
|
||
<span class="trust-badge">SSL</span>
|
||
<span class="trust-badge">Работаем с НДС</span>
|
||
<span class="trust-badge">Договор и акты</span>
|
||
<span class="trust-badge">Поддержка по телефону</span>
|
||
</div>
|
||
<p style="margin-top:20px;font-size:0.8125rem;color:var(--text-dim);">
|
||
После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FAQ ===== -->
|
||
<section id="faq">
|
||
<div class="wrap">
|
||
<div class="text-center" style="margin-bottom:48px;">
|
||
<p class="section-label reveal">Вопросы</p>
|
||
<h2 class="section-title reveal">Частые вопросы</h2>
|
||
</div>
|
||
<div class="faq-list reveal">
|
||
<div class="faq-item">
|
||
<div class="faq-q">Почему 100К? Это же дорого.<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес. Вы платите за результат, а не за процесс.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">А если не подойдёт?<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Сколько времени займёт настройка?<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">3-5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">А какие данные можно подключить?<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">1С (любая конфигурация), amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки (Сбер, Тинькофф, Альфа), кассы (1С-Рарус, iiko, r_keeper). Если не знаете — напишите, скажем.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Можно проще? Дешевле?<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">Нет. Потому что «проще» = «не работает». 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Поддержка после запуска?<span class="faq-arrow">+</span></div>
|
||
<div class="faq-a"><div class="faq-a-inner">30 дней включено в стоимость — правки, донастройка, ответы на вопросы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборд продолжает работать.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CTA ===== -->
|
||
<section class="cta-section" id="cta">
|
||
<div class="wrap">
|
||
<div class="cta-box reveal">
|
||
<h2>Узнайте, сколько теряет <br>ваш бизнес каждый месяц</h2>
|
||
<p>Бесплатный аудит аналитики за 30 минут. Покажем, какие метрики вы упускаете.</p>
|
||
<div class="cta-actions">
|
||
<a href="https://t.me/roi24_bot" class="btn btn-accent btn-lg">Написать в Telegram</a>
|
||
<a href="tel:+74951234567" class="btn btn-outline btn-lg">+7 (495) 123-45-67</a>
|
||
</div>
|
||
<form class="cta-mini-form" onsubmit="return false;">
|
||
<input type="text" placeholder="Ваше имя" aria-label="Ваше имя">
|
||
<input type="tel" placeholder="Телефон" aria-label="Телефон">
|
||
<button class="btn btn-accent" type="submit">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ===== FOOTER ===== -->
|
||
<footer class="footer">
|
||
<div class="wrap">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<div class="logo" style="margin-bottom:16px;">ROI<span>24</span></div>
|
||
<p>Автоматизированные дашборды для собственников бизнеса. Живые цифры из 1С, CRM и банков.</p>
|
||
</div>
|
||
<div>
|
||
<h4>Контакты</h4>
|
||
<p>
|
||
<a href="tel:+74951234567">+7 (495) 123-45-67</a><br>
|
||
<a href="mailto:info@roi24.ru">info@roi24.ru</a><br>
|
||
<a href="https://t.me/roi24_bot">Telegram-бот</a>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4>Решение</h4>
|
||
<p>
|
||
<a href="#solution">О решении</a><br>
|
||
<a href="#demo">Пример дашборда</a><br>
|
||
<a href="#pricing">Тариф</a><br>
|
||
<a href="#faq">FAQ</a><br>
|
||
<a href="#cta">Контакты</a>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4>Юридическое</h4>
|
||
<p>
|
||
ИП ТАРАСОВ Н.О.<br>
|
||
ИНН: 027811542842
|
||
<a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Политика конфиденциальности</a><br>
|
||
<a href="#" onclick="return false;">Публичная оферта</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 ROI24. Все права защищены. Не является публичной офертой. Данные обрабатываются на серверах в РФ (152-ФЗ).</p>
|
||
<div class="footer-links">
|
||
<a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Конфиденциальность</a>
|
||
<a href="#" onclick="return false;">Оферта</a>
|
||
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Fixed Telegram button -->
|
||
<a href="https://t.me/roi24_bot" class="tg-float" aria-label="Написать в Telegram">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.027-1.627 4.476-1.635z"/></svg>
|
||
</a>
|
||
|
||
<!-- Cookie Banner -->
|
||
<div class="cookie-banner" id="cookie-banner">
|
||
<p>Мы используем файлы cookie для аналитики и улучшения сервиса. <a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Подробнее</a></p>
|
||
<button class="cookie-close" id="cookie-close">Принять</button>
|
||
</div>
|
||
|
||
<!-- Privacy Policy Modal -->
|
||
<div class="modal-overlay" id="privacy-modal" onclick="if(event.target===this)this.classList.remove('show')">
|
||
<div class="modal-box">
|
||
<h2>Политика конфиденциальности</h2>
|
||
<p>Настоящая Политика конфиденциальностиPersonal Data обрабатывается в соответствии с Федеральным законом №152-ФЗ «О персональных данных».</p>
|
||
<p>1. Мы собираем: имя, номер телефона, email — исключительно для связи по запросу.</p>
|
||
<p>2. Данные хранятся на серверах, расположенных на территории Российской Федерации.</p>
|
||
<p>3. Мы не передаём данные третьим лицам, за исключением случаев, предусмотренных законодательством РФ.</p>
|
||
<p>4. Вы вправе запросить удаление ваших данных, направив письмо на info@roi24.ru.</p>
|
||
<p>5. Файлы cookie используются исключительно для аналитики (Яндекс.Метрика).</p>
|
||
<button class="modal-close" onclick="document.getElementById('privacy-modal').classList.remove('show')">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GSAP + ScrollTrigger -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||
<!-- ECharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||
|
||
<script>
|
||
(function() {
|
||
'use strict';
|
||
|
||
/* ==========================================================
|
||
HEADER SCROLL
|
||
========================================================== */
|
||
const header = document.getElementById('header');
|
||
let lastScroll = 0;
|
||
window.addEventListener('scroll', function() {
|
||
header.classList.toggle('scrolled', window.scrollY > 50);
|
||
}, { passive: true });
|
||
|
||
/* ==========================================================
|
||
FAQ ACCORDION
|
||
========================================================== */
|
||
document.querySelectorAll('.faq-q').forEach(function(q) {
|
||
q.addEventListener('click', function() {
|
||
var item = this.parentElement;
|
||
var answer = item.querySelector('.faq-a');
|
||
var isOpen = item.classList.contains('open');
|
||
|
||
// Close all
|
||
document.querySelectorAll('.faq-item').forEach(function(fi) {
|
||
fi.classList.remove('open');
|
||
fi.querySelector('.faq-a').style.maxHeight = '0';
|
||
});
|
||
|
||
if (!isOpen) {
|
||
item.classList.add('open');
|
||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ==========================================================
|
||
COOKIE BANNER
|
||
========================================================== */
|
||
if (!localStorage.getItem('roi24_cookie')) {
|
||
setTimeout(function() {
|
||
document.getElementById('cookie-banner').classList.add('show');
|
||
}, 1500);
|
||
}
|
||
document.getElementById('cookie-close').addEventListener('click', function() {
|
||
document.getElementById('cookie-banner').classList.remove('show');
|
||
localStorage.setItem('roi24_cookie', '1');
|
||
});
|
||
|
||
/* ==========================================================
|
||
REVEAL ON SCROLL (IntersectionObserver)
|
||
========================================================== */
|
||
var reveals = document.querySelectorAll('.reveal');
|
||
if ('IntersectionObserver' in window) {
|
||
var observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||
reveals.forEach(function(el) { observer.observe(el); });
|
||
} else {
|
||
reveals.forEach(function(el) { el.classList.add('visible'); });
|
||
}
|
||
|
||
/* ==========================================================
|
||
COUNTER ANIMATION
|
||
========================================================== */
|
||
var counters = document.querySelectorAll('.counter');
|
||
var counterDone = false;
|
||
var numbersSection = document.getElementById('numbers');
|
||
|
||
function animateCounters() {
|
||
if (counterDone) return;
|
||
counterDone = true;
|
||
counters.forEach(function(counter) {
|
||
var target = parseFloat(counter.dataset.target);
|
||
var isDecimal = counter.dataset.decimal === '1';
|
||
var duration = 1500;
|
||
var start = 0;
|
||
var startTime = null;
|
||
|
||
function step(timestamp) {
|
||
if (!startTime) startTime = timestamp;
|
||
var progress = Math.min((timestamp - startTime) / duration, 1);
|
||
// easeOutExpo
|
||
var eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
|
||
var current = eased * target;
|
||
counter.textContent = isDecimal ? current.toFixed(1) : Math.floor(current);
|
||
if (progress < 1) requestAnimationFrame(step);
|
||
}
|
||
requestAnimationFrame(step);
|
||
});
|
||
}
|
||
|
||
if ('IntersectionObserver' in window) {
|
||
var counterObs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
animateCounters();
|
||
counterObs.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.3 });
|
||
counterObs.observe(numbersSection);
|
||
}
|
||
|
||
/* ==========================================================
|
||
CALCULATOR
|
||
========================================================== */
|
||
var calcPeople = document.getElementById('calc-people');
|
||
var calcHours = document.getElementById('calc-hours');
|
||
var calcSalary = document.getElementById('calc-salary');
|
||
var calcResult = document.getElementById('calc-result');
|
||
var calcResultBig = document.getElementById('calc-result-big');
|
||
var calcResultDetail = document.getElementById('calc-result-detail');
|
||
|
||
function calc() {
|
||
var people = parseInt(calcPeople.value) || 0;
|
||
var hours = parseInt(calcHours.value) || 0;
|
||
var salary = parseInt(calcSalary.value) || 0;
|
||
|
||
if (people && hours && salary) {
|
||
var hoursPerMonth = hours * 4.33;
|
||
var salaryPerHour = salary / 168;
|
||
var annualCost = Math.round(hoursPerMonth * salaryPerHour * 12 * people);
|
||
var monthlyCost = Math.round(annualCost / 12);
|
||
|
||
calcResultBig.textContent = '₽' + annualCost.toLocaleString('ru-RU') + ' / год';
|
||
calcResultDetail.textContent = 'Это примерно ₽' + monthlyCost.toLocaleString('ru-RU') + ' в месяц. ROI24 окупается за 3-8 месяцев.';
|
||
calcResult.classList.add('show');
|
||
} else {
|
||
calcResult.classList.remove('show');
|
||
}
|
||
}
|
||
|
||
calcPeople.addEventListener('input', calc);
|
||
calcHours.addEventListener('input', calc);
|
||
calcSalary.addEventListener('input', calc);
|
||
|
||
/* ==========================================================
|
||
DASHBOARD PREVIEW — ECharts
|
||
========================================================== */
|
||
if (typeof echarts !== 'undefined') {
|
||
var chartRevenue = null;
|
||
var chartChannels = null;
|
||
|
||
var SEGMENTS = {
|
||
ecom: {
|
||
kpis: [
|
||
{ label: 'Выручка', value: '4.2М ₽', trend: 'up', trendTxt: '+12%' },
|
||
{ label: 'Маржа', value: '23%', trend: 'up', trendTxt: '+3%' },
|
||
{ label: 'Касса', value: '1.8М ₽', trend: 'up', trendTxt: '+8%' },
|
||
{ label: 'Дебиторка', value: '890K ₽', trend: 'down', trendTxt: '-5%' }
|
||
],
|
||
revenue: {
|
||
labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||
data: [3.1,3.4,3.2,3.6,3.8,3.5,3.9,4.0,3.9,4.2,3.7,4.2]
|
||
},
|
||
channels: {
|
||
labels: ['SEO','Контекст','Прямой','Email','Маркетплейсы'],
|
||
data: [35,28,22,8,7]
|
||
}
|
||
},
|
||
services: {
|
||
kpis: [
|
||
{ label: 'Выручка', value: '1.8М ₽', trend: 'up', trendTxt: '+8%' },
|
||
{ label: 'Маржа', value: '41%', trend: 'up', trendTxt: '+2%' },
|
||
{ label: 'Пайплайн', value: '5.2М ₽', trend: 'up', trendTxt: '+15%' },
|
||
{ label: 'Win Rate', value: '32%', trend: 'up', trendTxt: '+4%' }
|
||
],
|
||
revenue: {
|
||
labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||
data: [1.4,1.5,1.3,1.6,1.7,1.6,1.5,1.8,1.9,1.8,1.7,1.8]
|
||
},
|
||
channels: {
|
||
labels: ['Рефералы','SEO','Контент','Прямой','Реклама'],
|
||
data: [40,25,18,12,5]
|
||
}
|
||
},
|
||
production: {
|
||
kpis: [
|
||
{ label: 'Выпуск', value: '12K шт', trend: 'up', trendTxt: '+5%' },
|
||
{ label: 'OEE', value: '78%', trend: 'up', trendTxt: '+3%' },
|
||
{ label: 'Себестоимость', value: '₽2 400', trend: 'down', trendTxt: '-2%' },
|
||
{ label: 'Брак', value: '1.2%', trend: 'down', trendTxt: '-0.3%' }
|
||
],
|
||
revenue: {
|
||
labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||
data: [2.8,2.9,3.0,3.1,3.2,3.0,3.3,3.4,3.2,3.5,3.3,3.6]
|
||
},
|
||
channels: {
|
||
labels: ['Оптовик А','Оптовик Б','Ритейл','Прямые','Экспорт'],
|
||
data: [35,25,20,12,8]
|
||
}
|
||
}
|
||
};
|
||
|
||
function renderKpis(seg) {
|
||
var container = document.getElementById('dash-kpis');
|
||
var html = '';
|
||
seg.kpis.forEach(function(k) {
|
||
var arrow = k.trend === 'up' ? '↑' : '↓';
|
||
var cls = k.trend === 'up' ? 'trend-up' : 'trend-down';
|
||
html += '<div class="dash-kpi">'
|
||
+ '<div class="dash-kpi-label">' + k.label + '</div>'
|
||
+ '<div class="dash-kpi-value">' + k.value + '</div>'
|
||
+ '<div class="dash-kpi-trend ' + cls + '">'
|
||
+ '<span>' + arrow + ' ' + k.trendTxt + '</span>'
|
||
+ '</div></div>';
|
||
});
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
function buildRevenueChart(data) {
|
||
return {
|
||
tooltip: { trigger: 'axis', backgroundColor: '#161618', borderColor: '#222', textStyle: { color: '#f5f5f5', fontSize: 11 } },
|
||
grid: { left: 12, right: 12, top: 12, bottom: 4, containLabel: true },
|
||
xAxis: {
|
||
type: 'category', data: data.labels,
|
||
axisLine: { lineStyle: { color: '#1e1e22' } },
|
||
axisLabel: { color: '#52525b', fontSize: 9 }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: { lineStyle: { color: '#1a1a1e' } },
|
||
axisLabel: { color: '#52525b', fontSize: 9, formatter: v => (v >= 1 ? v.toFixed(0) + 'М' : v.toFixed(0) + 'М') }
|
||
},
|
||
series: [{
|
||
type: 'line', data: data.data, smooth: 0.4, symbol: 'none',
|
||
lineStyle: { width: 2, color: '#22c55e' },
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(34,197,94,0.2)' },
|
||
{ offset: 1, color: 'rgba(34,197,94,0.02)' }
|
||
])
|
||
}
|
||
}],
|
||
animationDuration: 600
|
||
};
|
||
}
|
||
|
||
function buildChannelsChart(data) {
|
||
return {
|
||
tooltip: { trigger: 'axis', backgroundColor: '#161618', borderColor: '#222', textStyle: { color: '#f5f5f5', fontSize: 11 } },
|
||
grid: { left: 12, right: 12, top: 12, bottom: 4, containLabel: true },
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: { lineStyle: { color: '#1a1a1e' } },
|
||
axisLabel: { color: '#52525b', fontSize: 9 }
|
||
},
|
||
yAxis: {
|
||
type: 'category', data: data.labels,
|
||
axisLine: { lineStyle: { color: '#1e1e22' } },
|
||
axisLabel: { color: '#52525b', fontSize: 9 }
|
||
},
|
||
series: [{
|
||
type: 'bar', data: data.data, barWidth: 14,
|
||
itemStyle: {
|
||
borderRadius: [0, 4, 4, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#22c55e' },
|
||
{ offset: 1, color: 'rgba(34,197,94,0.3)' }
|
||
])
|
||
}
|
||
}],
|
||
animationDuration: 600
|
||
};
|
||
}
|
||
|
||
function setSegment(key) {
|
||
var seg = SEGMENTS[key];
|
||
if (!seg) return;
|
||
|
||
// Update active button
|
||
document.querySelectorAll('.dash-seg-btn').forEach(function(b) {
|
||
b.classList.toggle('active', b.dataset.seg === key);
|
||
});
|
||
|
||
// Update KPIs
|
||
renderKpis(seg);
|
||
|
||
// Revenue chart
|
||
if (!chartRevenue) chartRevenue = echarts.init(document.getElementById('chart-revenue'));
|
||
chartRevenue.clear();
|
||
chartRevenue.setOption(buildRevenueChart(seg.revenue));
|
||
|
||
// Channels chart
|
||
if (!chartChannels) chartChannels = echarts.init(document.getElementById('chart-channels'));
|
||
chartChannels.clear();
|
||
chartChannels.setOption(buildChannelsChart(seg.channels));
|
||
}
|
||
|
||
// Segment button event delegation
|
||
document.querySelector('.dash-segments').addEventListener('click', function(e) {
|
||
var btn = e.target.closest('.dash-seg-btn');
|
||
if (btn) setSegment(btn.dataset.seg);
|
||
});
|
||
|
||
// Initial render
|
||
setSegment('ecom');
|
||
|
||
// Resize charts on window resize
|
||
window.addEventListener('resize', function() {
|
||
if (chartRevenue) chartRevenue.resize();
|
||
if (chartChannels) chartChannels.resize();
|
||
});
|
||
}
|
||
|
||
/* ==========================================================
|
||
SMOOTH SCROLL for anchor links
|
||
========================================================== */
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(link) {
|
||
link.addEventListener('click', function(e) {
|
||
var target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
e.preventDefault();
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
});
|
||
|
||
})();
|
||
</script>
|
||
|
||
<!-- JSON-LD Structured Data -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "ROI24",
|
||
"description": "Автоматизированные дашборды для собственников бизнеса",
|
||
"url": "https://roi24.ru",
|
||
"telephone": "+7-495-123-45-67",
|
||
"email": "info@roi24.ru",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"addressCountry": "RU"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|