Files
roi24/index_ibm.html
T

1105 lines
46 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 — Данные. Без шума.</title>
<meta name="description" content="Один дашборд. Все ключевые цифры. Подключаем 1С, CRM, банки и рекламу.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
IBM-INSPIRED DESIGN TOKENS
Geometric, grid-visible, data-as-visual
============================================================ */
:root {
--bg: #050507;
--surface: #0c0c0f;
--card: #111115;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.16);
--text: #f0f0f2;
--text-sec: #71717a;
--text-dim: #3f3f46;
--accent: #22c55e;
--accent-dim: rgba(34,197,94,0.08);
--blue: #3b82f6;
--blue-dim: rgba(59,130,246,0.08);
--amber: #f59e0b;
--red: #ef4444;
--red-dim: rgba(239,68,68,0.08);
--font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
--mono: 'IBM Plex Mono', 'SF Mono', monospace;
--grid: 8px;
}
*, *::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.5; overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
GRID OVERLAY — visible structure, IBM hallmark
============================================================ */
body::before {
content: ''; position: fixed; inset: 0; z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: calc(var(--grid) * 12) calc(var(--grid) * 12);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
/* ============================================================
LAYOUT
============================================================ */
.wrap {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
section { padding: 120px 0; position: relative; z-index: 1; }
.section-label {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--accent);
margin-bottom: 16px; font-weight: 600;
font-family: var(--mono);
}
/* ============================================================
HEADER — IBM: minimal, structural
============================================================ */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 64px; display: flex; align-items: center;
background: rgba(5,5,7,0.85); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.header .wrap {
display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.logo {
font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em;
display: flex; align-items: center; gap: 8px;
}
.logo-mark {
width: 28px; height: 28px; border-radius: 6px;
background: var(--accent); display: flex; align-items: center;
justify-content: center; font-family: var(--mono);
font-size: 0.75rem; font-weight: 700; color: #000;
}
.nav { display: flex; align-items: center; gap: 40px; }
.nav a {
font-size: 0.8125rem; color: var(--text-sec);
transition: color 0.2s; letter-spacing: 0.01em;
}
.nav a:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone {
font-size: 0.8125rem; color: var(--text-sec); font-family: var(--mono);
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 10px 20px; border-radius: 4px;
font-weight: 600; font-size: 0.8125rem; cursor: pointer;
border: none; transition: all 0.2s ease; letter-spacing: 0.01em;
}
.btn-accent {
background: var(--accent); color: #000; font-family: var(--mono);
}
.btn-accent:hover { background: #16a34a; }
.btn-outline {
background: transparent; border: 1px solid var(--border-strong);
color: var(--text);
}
.btn-outline:hover { border-color: var(--text); }
.btn-lg { padding: 14px 28px; font-size: 0.875rem; }
/* ============================================================
HERO — Split: left content, right data panel
============================================================ */
.hero {
padding: 160px 0 80px; min-height: 90vh;
display: flex; align-items: center;
border-bottom: 1px solid var(--border);
}
.hero-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
.hero-left { padding-top: 20px; }
.hero-label {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.2em; color: var(--accent);
margin-bottom: 24px; font-family: var(--mono);
display: flex; align-items: center; gap: 8px;
}
.hero-label::before {
content: ''; width: 16px; height: 1px; background: var(--accent);
}
h1 {
font-size: clamp(3rem, 6vw, 5rem); font-weight: 800;
letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 24px;
}
h1 .accent { color: var(--accent); }
.hero-sub {
font-size: 1.125rem; color: var(--text-sec);
margin-bottom: 40px; max-width: 440px; line-height: 1.65;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta {
margin-top: 48px; padding-top: 32px;
border-top: 1px solid var(--border);
display: flex; gap: 48px;
}
.hero-meta-item {
display: flex; flex-direction: column; gap: 4px;
}
.hero-meta-value {
font-size: 1.75rem; font-weight: 800; font-family: var(--mono);
letter-spacing: -0.03em;
}
.hero-meta-label {
font-size: 0.75rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.08em;
}
/* ============================================================
RIGHT PANEL — IBM Grid Dashboard
Asymmetric bento with visible borders
============================================================ */
.hero-right {
border: 1px solid var(--border);
background: var(--surface);
}
.dash-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.dash-brand {
font-size: 0.75rem; font-weight: 600; font-family: var(--mono);
letter-spacing: 0.05em;
}
.dash-status {
display: flex; align-items: center; gap: 6px;
font-size: 0.6875rem; color: var(--accent); font-family: var(--mono);
}
.dash-dot {
width: 6px; height: 6px; background: var(--accent);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.dash-body { display: grid; }
/* Row 1: Big number spanning full width */
.dash-big {
grid-column: 1 / -1; padding: 40px 24px;
border-bottom: 1px solid var(--border);
text-align: right;
}
.dash-big-label {
font-size: 0.6875rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 8px; font-family: var(--mono);
}
.dash-big-value {
font-size: clamp(3rem, 5vw, 5rem); font-weight: 800;
font-family: var(--mono); letter-spacing: -0.04em;
line-height: 1;
}
.dash-big-value .accent { color: var(--accent); }
.dash-big-trend {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 16px; font-size: 0.875rem; color: var(--accent);
font-weight: 600;
}
/* Row 2: Two columns */
.dash-cell {
padding: 24px; border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.dash-cell:nth-child(2n) { border-right: none; }
.dash-cell-label {
font-size: 0.6875rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: var(--mono);
}
.dash-cell-value {
font-size: 1.5rem; font-weight: 700; font-family: var(--mono);
letter-spacing: -0.02em; margin-bottom: 4px;
}
.dash-cell-sub {
font-size: 0.75rem; color: var(--text-sec);
}
/* Row 3: Three mini cards */
.dash-tri {
display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.dash-mini {
padding: 20px; border-right: 1px solid var(--border);
text-align: center;
}
.dash-mini:last-child { border-right: none; }
.dash-mini-label {
font-size: 0.625rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: var(--mono);
}
.dash-mini-value {
font-size: 1.25rem; font-weight: 700; font-family: var(--mono);
margin-bottom: 4px;
}
.dash-mini-bar {
height: 3px; border-radius: 2px;
background: var(--border); overflow: hidden; margin-top: 8px;
}
.dash-mini-fill {
height: 100%; border-radius: 2px;
background: var(--accent);
transition: width 1s ease;
}
/* Segment toggle */
.dash-toggle {
display: flex; border-top: 1px solid var(--border);
}
.dash-toggle-btn {
flex: 1; padding: 10px; border: none; background: transparent;
font-size: 0.6875rem; color: var(--text-dim); cursor: pointer;
font-family: var(--mono); text-transform: uppercase;
letter-spacing: 0.08em; transition: all 0.2s;
border-right: 1px solid var(--border);
}
.dash-toggle-btn:last-child { border-right: none; }
.dash-toggle-btn.active, .dash-toggle-btn:hover {
background: var(--accent-dim); color: var(--accent);
}
/* ============================================================
SECTION: GRID MANIFESTO
Bold statement section
============================================================ */
.manifesto {
padding: 160px 0;
border-bottom: 1px solid var(--border);
}
.manifesto-inner {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: center;
}
.manifesto-number {
font-size: 8rem; font-weight: 800; font-family: var(--mono);
letter-spacing: -0.05em; line-height: 0.9;
color: var(--text-dim);
}
.manifesto-number .accent { color: var(--accent); }
.manifesto-content h2 {
font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 800;
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 24px;
}
.manifesto-content p {
font-size: 1rem; color: var(--text-sec); line-height: 1.7;
margin-bottom: 16px; max-width: 480px;
}
/* ============================================================
SECTION: PROBLEMS — IBM card list
============================================================ */
.problems-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1px solid var(--border);
}
.problem-card {
padding: 40px 32px; border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: all 0.3s; position: relative;
}
.problem-card:nth-child(3n) { border-right: none; }
.problem-card:nth-last-child(-n+3) { border-bottom: none; }
.problem-card:hover {
background: var(--accent-dim);
}
.problem-num {
font-size: 0.6875rem; color: var(--text-dim);
font-family: var(--mono); margin-bottom: 20px;
letter-spacing: 0.05em;
}
.problem-card h3 {
font-size: 1.25rem; font-weight: 700; margin-bottom: 12px;
letter-spacing: -0.02em;
}
.problem-card p {
font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
}
/* ============================================================
SECTION: SOLUTION — Big feature
============================================================ */
.solution-section { border-bottom: 1px solid var(--border); }
.solution-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1px solid var(--border);
}
.sol-card {
padding: 48px 32px; border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: all 0.3s;
}
.sol-card:nth-child(3n) { border-right: none; }
.sol-card:nth-last-child(-n+3) { border-bottom: none; }
.sol-card:hover { background: var(--accent-dim); }
.sol-icon {
width: 40px; height: 40px; border: 1px solid var(--accent);
border-radius: 8px; display: flex; align-items: center;
justify-content: center; margin-bottom: 24px;
font-size: 1.25rem;
}
.sol-card h3 {
font-size: 1.125rem; font-weight: 700; margin-bottom: 10px;
letter-spacing: -0.01em;
}
.sol-card p {
font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
}
/* ============================================================
SECTION: COMPARISON — IBM table
============================================================ */
.comparison { background: var(--surface); border-bottom: 1px solid var(--border); }
.comp-table {
width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.comp-table thead th {
text-align: left; padding: 20px 24px;
font-weight: 600; font-size: 0.6875rem;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.12em; border-bottom: 1px solid var(--border-strong);
}
.comp-table thead th:last-child { color: var(--accent); }
.comp-table tbody td {
padding: 18px 24px; border-bottom: 1px solid var(--border);
color: var(--text-sec);
}
.comp-table tbody tr:hover td { background: rgba(255,255,255,0.01); }
.comp-yes { color: var(--accent); font-weight: 600; }
.comp-no { color: var(--text-dim); }
/* ============================================================
SECTION: HOW IT WORKS — IBM Steps
============================================================ */
.steps { border-bottom: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.step {
padding: 32px 24px; border-right: 1px solid var(--border);
position: relative;
}
.step:last-child { border-right: none; }
.step-num {
font-size: 2.5rem; font-weight: 800; font-family: var(--mono);
color: var(--accent); letter-spacing: -0.03em;
margin-bottom: 16px; line-height: 1;
}
.step h3 {
font-size: 1rem; font-weight: 700; margin-bottom: 6px;
letter-spacing: -0.01em;
}
.step p {
font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6;
}
.step-time {
font-size: 0.6875rem; color: var(--text-dim); font-family: var(--mono);
margin-top: 12px;
}
/* ============================================================
SECTION: PRICING — IBM: stark, bold
============================================================ */
.pricing { border-bottom: 1px solid var(--border); }
.price-card {
max-width: 560px; margin: 0 auto;
border: 1px solid var(--border-strong); padding: 64px 48px;
text-align: center; position: relative;
}
.price-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--accent);
}
.price-name {
font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.15em; color: var(--text-dim);
font-family: var(--mono); margin-bottom: 24px;
}
.price-amount {
font-size: 4rem; font-weight: 800; font-family: var(--mono);
letter-spacing: -0.04em; margin-bottom: 8px;
}
.price-amount .unit {
font-size: 0.25em; color: var(--text-sec); font-weight: 400;
}
.price-sub {
font-size: 0.875rem; color: var(--text-sec); margin-bottom: 40px;
}
.price-features {
text-align: left; margin-bottom: 40px;
}
.price-features li {
padding: 12px 0; border-bottom: 1px solid var(--border);
font-size: 0.875rem; color: var(--text-sec);
display: flex; align-items: flex-start; gap: 12px;
}
.price-features li::before {
content: '→'; color: var(--accent); font-weight: 600; flex-shrink: 0;
}
.price-cta { margin-top: 8px; }
.price-guarantee {
margin-top: 24px; font-size: 0.75rem; color: var(--text-dim);
font-style: italic;
}
/* ============================================================
SECTION: FAQ — IBM accordion
============================================================ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-q {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 0; cursor: pointer; font-size: 1rem;
font-weight: 600; letter-spacing: -0.01em;
transition: color 0.2s;
}
.faq-q:hover { color: var(--accent); }
.faq-q::after {
content: '+'; font-family: var(--mono); font-size: 1.25rem;
color: var(--text-dim); transition: transform 0.3s; flex-shrink: 0;
margin-left: 16px;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner {
padding: 0 0 24px; font-size: 0.875rem; color: var(--text-sec);
line-height: 1.7;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
padding: 64px 0; border-top: 1px solid var(--border);
font-size: 0.75rem; color: var(--text-dim);
}
.footer-inner {
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-col h4 {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--text-sec);
margin-bottom: 16px; font-family: var(--mono);
}
.footer-col a, .footer-col p {
display: block; color: var(--text-dim);
margin-bottom: 8px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
margin-top: 48px; padding-top: 24px;
border-top: 1px solid var(--border);
display: flex; justify-content: space-between;
}
/* ============================================================
REVEAL ANIMATION
============================================================ */
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.hero-right { max-width: 600px; }
.manifesto-inner { grid-template-columns: 1fr; gap: 32px; }
.manifesto-number { font-size: 4rem; }
.problems-grid, .solution-grid { grid-template-columns: 1fr; }
.problem-card, .sol-card { border-right: none; }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.step:nth-child(2) { border-right: none; }
.step:nth-child(n+3) { border-top: 1px solid var(--border); }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wrap { padding: 0 16px; }
section { padding: 80px 0; }
.hero { padding-top: 120px; }
h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.hero-meta { gap: 24px; flex-wrap: wrap; }
.dash-tri { grid-template-columns: 1fr; }
.dash-cell { border-right: none; }
.steps-grid { grid-template-columns: 1fr; }
.step { border-right: none; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 12px; }
.nav { display: none; }
.price-card { padding: 40px 24px; }
.price-amount { font-size: 3rem; }
}
</style>
</head>
<body>
<!-- ============================================================
HEADER
============================================================ -->
<header class="header">
<div class="wrap">
<div class="logo">
<div class="logo-mark">R</div>
ROI24
</div>
<nav class="nav">
<a href="#solution">Решение</a>
<a href="#how">Как работает</a>
<a href="#compare">Сравнение</a>
<a href="#pricing">Тариф</a>
<a href="#faq">FAQ</a>
</nav>
<div class="header-actions">
<span class="header-phone">+7 (999) 123-45-67</span>
<a href="#cta" class="btn btn-accent">Обсудить проект</a>
</div>
</div>
</header>
<!-- ============================================================
HERO
============================================================ -->
<section class="hero">
<div class="wrap">
<div class="hero-inner">
<!-- LEFT -->
<div class="hero-left">
<div class="hero-label">ДАННЫЕ. БЕЗ ШУМА.</div>
<h1>Вы теряете<br>деньги, <span class="accent">не зная</span><br>почему</h1>
<p class="hero-sub">
Один дашборд с 10 ключевыми метриками вашего бизнеса.
Обновляется автоматически из 1С, CRM и банков.
Смотрится с телефона каждое утро.
</p>
<div class="hero-actions">
<a href="#cta" class="btn btn-accent btn-lg">Получить демо за 3 дня</a>
<a href="#compare" class="btn btn-outline btn-lg">Сравнить</a>
</div>
<div class="hero-meta">
<div class="hero-meta-item">
<span class="hero-meta-value">3 дня</span>
<span class="hero-meta-label">Срок настройки</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-value">10</span>
<span class="hero-meta-label">Ключевых метрик</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-value">5+</span>
<span class="hero-meta-label">Источников данных</span>
</div>
</div>
</div>
<!-- RIGHT — Dashboard Panel -->
<div class="hero-right">
<div class="dash-header">
<span class="dash-brand">ROI24 / DASHBOARD</span>
<span class="dash-status"><span class="dash-dot"></span> LIVE</span>
</div>
<div class="dash-body">
<!-- Big number row -->
<div class="dash-big">
<div class="dash-big-label">Выручка за 30 дней</div>
<div class="dash-big-value">
12.4М <span class="accent">₽</span><span class="dash-big-trend">↑ 12%</span>
</div>
</div>
<!-- Two columns -->
<div class="dash-cell">
<div class="dash-cell-label">Маржа</div>
<div class="dash-cell-value" style="color: var(--accent);">23.4%</div>
<div class="dash-cell-sub">↑ 2.1% к прошлому месяцу</div>
</div>
<div class="dash-cell">
<div class="dash-cell-label">Касса</div>
<div class="dash-cell-value">4.8М ₽</div>
<div class="dash-cell-sub">Дебиторка: 1.2М</div>
</div>
<!-- Tri row -->
<div class="dash-tri">
<div class="dash-mini">
<div class="dash-mini-label">Конверсия</div>
<div class="dash-mini-value" style="color: var(--blue);">2.8%</div>
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 28%;"></div></div>
</div>
<div class="dash-mini">
<div class="dash-mini-label">CAC</div>
<div class="dash-mini-value" style="color: var(--amber);">890₽</div>
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 45%; background: var(--amber);"></div></div>
</div>
<div class="dash-mini">
<div class="dash-mini-label">ROI рекл.</div>
<div class="dash-mini-value" style="color: var(--accent);">91%</div>
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 91%;"></div></div>
</div>
</div>
</div>
<!-- Toggle -->
<div class="dash-toggle">
<button class="dash-toggle-btn active">E-com</button>
<button class="dash-toggle-btn">Услуги</button>
<button class="dash-toggle-btn">Производство</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
MANIFESTO
============================================================ -->
<section class="manifesto">
<div class="manifesto-inner">
<div class="manifesto-number">
70<span class="accent">%</span>
</div>
<div class="manifesto-content">
<div class="section-label">Проблема</div>
<h2>Компаний не видят<br>деньги в кассе<br>до конца месяца</h2>
<p>
Данные разбросаны по 1С, CRM, банкам, рекламным кабинетам.
Каждый отчёт — ручная сводка за неделю. Когда увидели проблему —
деньги уже потеряны.
</p>
<p>
<strong style="color: var(--text);">ROI24 собирает всё в один дашборд.</strong>
Обновляется автоматически. Вы видите цифры как в банковском приложении.
</p>
</div>
</div>
</section>
<!-- ============================================================
PROBLEMS — 3-column grid
============================================================ -->
<section>
<div class="wrap">
<div class="section-label">Три боли</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
Почему вы принимаете решения в темноте
</h2>
<div class="problems-grid">
<div class="problem-card reveal">
<div class="problem-num">01</div>
<h3>Данные разбросаны</h3>
<p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
</div>
<div class="problem-card reveal">
<div class="problem-num">02</div>
<h3>Не видно, где теряете</h3>
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
</div>
<div class="problem-card reveal">
<div class="problem-num">03</div>
<h3>Отчёты приходят поздно</h3>
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
SOLUTION
============================================================ -->
<section id="solution" class="solution-section">
<div class="wrap">
<div class="section-label">Решение</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
Один дашборд. Все ключевые цифры.
</h2>
<div class="solution-grid">
<div class="sol-card reveal">
<div class="sol-icon">⚡</div>
<h3>Живые данные</h3>
<p>Обновляются автоматически — 1С, CRM, банки, реклама. Вы не делаете ничего. Данные сами приходят в дашборд каждый час.</p>
</div>
<div class="sol-card reveal">
<div class="sol-icon">👁</div>
<h3>Видно где теряете</h3>
<p>Цветовые индикаторы: зелёный, жёлтый, красный. Три секунды — и вы видите, какая метрика вышла за пределы нормы.</p>
</div>
<div class="sol-card reveal">
<div class="sol-icon">📱</div>
<h3>С телефона</h3>
<p>Собственник смотрит дашборд за завтраком. Не нужно открывать ноутбук, логиниться в 1С, качать Excel.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
HOW IT WORKS — 5 steps
============================================================ -->
<section id="how" class="steps">
<div class="wrap">
<div class="section-label">Процесс</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
От звонка до дашборда — 3 дня
</h2>
<div class="steps-grid">
<div class="step reveal">
<div class="step-num">01</div>
<h3>Брифинг</h3>
<p>30 минут. Звоним, узнаём бизнес. Никаких форм — просто разговор.</p>
<div class="step-time">30 мин</div>
</div>
<div class="step reveal">
<div class="step-num">02</div>
<h3>Подключение</h3>
<p>1С, CRM, онлайн-банки, реклама. Вы не участвуете.</p>
<div class="step-time">1–2 дня</div>
</div>
<div class="step reveal">
<div class="step-num">03</div>
<h3>Настройка</h3>
<p>Дашборд под ваши 10 метрик. Не 50 — только реальное.</p>
<div class="step-time">1–2 дня</div>
</div>
<div class="step reveal">
<div class="step-num">04</div>
<h3>Демо</h3>
<p>Показываем результат. Вносим правки. Вы видите, что работает.</p>
<div class="step-time">30 мин</div>
</div>
<div class="step reveal">
<div class="step-num">05</div>
<h3>Запуск</h3>
<p>Даём доступ, обучаем. Автоматическое обновление включено.</p>
<div class="step-time">День запуска</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
COMPARISON
============================================================ -->
<section id="compare" class="comparison">
<div class="wrap">
<div class="section-label">Сравнение</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
Без ROI24 / С ROI24
</h2>
<table class="comp-table">
<thead>
<tr>
<th>Параметр</th>
<th>Без ROI24</th>
<th>С ROI24</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные</td>
<td class="comp-no">5+ источников</td>
<td class="comp-yes">1 дашборд</td>
</tr>
<tr>
<td>Обновление</td>
<td class="comp-no">Ручной ввод</td>
<td class="comp-yes">Авто, каждый час</td>
</tr>
<tr>
<td>Время на отчёты</td>
<td class="comp-no">3+ часа / неделя</td>
<td class="comp-yes">0 мин</td>
</tr>
<tr>
<td>Актуальность</td>
<td class="comp-no">30 дней</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 class="comp-no">100К + 40К зарплат</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>
</section>
<!-- ============================================================
PRICING
============================================================ -->
<section id="pricing" class="pricing">
<div class="wrap">
<div class="text-center" style="margin-bottom: 48px;">
<div class="section-label">Тариф</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em;">
Один тариф. Всё включено.
</h2>
</div>
<div class="price-card reveal">
<div class="price-name">Настройка под ключ</div>
<div class="price-amount">100 000 <span class="unit">₽</span></div>
<div class="price-sub">Единоразово. Поддержка 20 000 ₽/мес после 30 дней.</div>
<ul class="price-features">
<li>Подключение 1С / CRM / банки / реклама</li>
<li>Настройка 10 ключевых метрик</li>
<li>Дашборд, заточенный под ваш бизнес</li>
<li>Обучение команды работе с дашбордом</li>
<li>30 дней поддержки и донастройки</li>
<li>Автоматическое обновление источников</li>
</ul>
<a href="#cta" class="btn btn-accent btn-lg price-cta">Обсудить проект</a>
<div class="price-guarantee">
30-дневная гарантия. Если дашборд не устроит — вернём деньги. Работаем по этапам, вы видите результат после каждого.
</div>
</div>
</div>
</section>
<!-- ============================================================
FAQ
============================================================ -->
<section id="faq">
<div class="wrap">
<div class="section-label">Вопросы</div>
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
Возражения
</h2>
<div class="faq-list">
<div class="faq-item">
<div class="faq-q">Почему 100К? Это же дорого.</div>
<div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес.</div></div>
</div>
<div class="faq-item">
<div class="faq-q">А если не подойдёт?</div>
<div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.</div></div>
</div>
<div class="faq-item">
<div class="faq-q">Сколько времени займёт настройка?</div>
<div class="faq-a"><div class="faq-a-inner">3–5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.</div></div>
</div>
<div class="faq-item">
<div class="faq-q">А какие данные можно подключить?</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">Можно проще? Дешевле?</div>
<div class="faq-a"><div class="faq-a-inner">Нет. Потому что "проще" = "не работает". 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
</div>
<div class="faq-item">
<div class="faq-q">Поддержка после запуска?</div>
<div class="faq-a"><div class="faq-a-inner">30 дней включено — правки, донастройка, ответы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборт продолжает работать.</div></div>
</div>
</div>
</div>
</section>
<!-- ============================================================
FOOTER
============================================================ -->
<footer class="footer">
<div class="wrap">
<div class="footer-inner">
<div class="footer-col">
<h4>ROI24</h4>
<p>Живые цифры бизнеса за 3 дня.</p>
<p>Автоматизированные дашборды для собственников.</p>
</div>
<div class="footer-col">
<h4>Контакты</h4>
<a href="tel:+79991234567">+7 (999) 123-45-67</a>
<a href="#">Telegram</a>
<a href="#">hello@roi24.ru</a>
</div>
<div class="footer-col">
<h4>Решение</h4>
<a href="#solution">О решении</a>
<a href="#compare">Сравнение</a>
<a href="#pricing">Тариф</a>
<a href="#faq">FAQ</a>
</div>
<div class="footer-col">
<h4>Юридическое</h4>
<p>ИНН: 7712345678</p>
<p>ОГРН: 1237700123456</p>
<a href="#">Политика конфиденциальности</a>
<a href="#">152-ФЗ</a>
<a href="#">Оферта</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 ROI24. Все права защищены.</span>
<span>Данные на серверах в Москве. SSL.</span>
</div>
</div>
</footer>
<script>
/* ============================================================
INTERSECTION OBSERVER — reveal on scroll
============================================================ */
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('visible');
}, i * 60);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
reveals.forEach(el => observer.observe(el));
/* ============================================================
FAQ ACCORDION
============================================================ */
document.querySelectorAll('.faq-q').forEach(q => {
q.addEventListener('click', () => {
const item = q.parentElement;
const wasOpen = item.classList.contains('open');
// Close all
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
// Toggle current
if (!wasOpen) item.classList.add('open');
});
});
/* ============================================================
DASHBOARD SEGMENT TOGGLE
============================================================ */
const SEGMENTS = {
ecom: {
revenue: '12.4М', revenueTrend: '+12%', revenueAccent: true,
margin: '23.4%', marginNote: '↑ 2.1%',
cash: '4.8М ₽', cashNote: 'Дебиторка: 1.2М',
mini: [
{ label: 'Конверсия', value: '2.8%', pct: 28, color: 'var(--blue)' },
{ label: 'CAC', value: '890₽', pct: 45, color: 'var(--amber)' },
{ label: 'ROI рекл.', value: '91%', pct: 91, color: 'var(--accent)' }
]
},
services: {
revenue: '3.8М', revenueTrend: '+8%', revenueAccent: true,
margin: '31.2%', marginNote: '↑ 1.4%',
cash: '2.1М ₽', cashNote: 'Пайплайн: 8.5М',
mini: [
{ label: 'Загрузка', value: '78%', pct: 78, color: 'var(--blue)' },
{ label: 'Марж. проект', value: '34%', pct: 68, color: 'var(--amber)' },
{ label: 'LTV', value: '185К', pct: 82, color: 'var(--accent)' }
]
},
production: {
revenue: '28.7М', revenueTrend: '+5%', revenueAccent: true,
margin: '18.7%', marginNote: '↓ 0.8%',
cash: '6.2М ₽', cashNote: 'OEE: 72%',
mini: [
{ label: 'План/факт', value: '94%', pct: 94, color: 'var(--blue)' },
{ label: 'OEE', value: '72%', pct: 72, color: 'var(--amber)' },
{ label: 'Качество', value: '99.1%', pct: 99, color: 'var(--accent)' }
]
}
};
const toggleBtns = document.querySelectorAll('.dash-toggle-btn');
toggleBtns.forEach(btn => {
btn.addEventListener('click', () => {
const key = btn.textContent.toLowerCase().includes('e-com') ? 'ecom' :
btn.textContent.toLowerCase().includes('услуг') ? 'services' :
'production';
const seg = SEGMENTS[key];
// Update active button
toggleBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Update big number
const bigValue = document.querySelector('.dash-big-value');
bigValue.innerHTML = `${seg.revenue} <span class="accent">₽</span><span class="dash-big-trend">${seg.revenueTrend}</span>`;
// Update cells
document.querySelectorAll('.dash-cell-value')[0].textContent = seg.margin;
document.querySelectorAll('.dash-cell-value')[0].style.color = 'var(--accent)';
document.querySelectorAll('.dash-cell-sub')[0].textContent = seg.marginNote;
document.querySelectorAll('.dash-cell-value')[1].textContent = seg.cash;
document.querySelectorAll('.dash-cell-sub')[1].textContent = seg.cashNote;
// Update mini cards
const minis = document.querySelectorAll('.dash-mini');
seg.mini.forEach((m, i) => {
minis[i].querySelector('.dash-mini-label').textContent = m.label;
minis[i].querySelector('.dash-mini-value').textContent = m.value;
minis[i].querySelector('.dash-mini-value').style.color = m.color;
minis[i].querySelector('.dash-mini-fill').style.width = m.pct + '%';
minis[i].querySelector('.dash-mini-fill').style.background = m.color;
});
});
});
/* ============================================================
HEADER SCROLL STATE
============================================================ */
const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 20);
}, { passive: true });
</script>
</body>
</html>