Files
roi24/index.html
T

1572 lines
74 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>