470 lines
19 KiB
HTML
470 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ROI24 — Живые цифры бизнеса</title>
|
|
<style>
|
|
/* === RESET & BASE === */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg-primary: #050505;
|
|
--bg-surface: #0f0f10;
|
|
--bg-card: #1a1a1c;
|
|
--border: #2a2a2e;
|
|
--border-hover: #444;
|
|
--text-primary: #f0f0f0;
|
|
--text-secondary: #a0a0a5;
|
|
--accent: #00ff9d; /* Green for money/profit */
|
|
--accent-dim: rgba(0, 255, 157, 0.15);
|
|
--error: #ff4d4d;
|
|
--warning: #ffc107;
|
|
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
|
|
}
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-main);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
|
|
a:hover { opacity: 0.8; }
|
|
|
|
/* === LAYOUT === */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
section { padding: 80px 0; }
|
|
|
|
/* === NAVIGATION === */
|
|
nav {
|
|
padding: 24px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
.logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
|
|
.logo span { color: var(--accent); }
|
|
.nav-links { display: flex; gap: 32px; font-size: 0.9rem; color: var(--text-secondary); }
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border-radius: 100px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #000;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #00cc7d;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px var(--accent-dim);
|
|
}
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-outline:hover {
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
padding: 120px 0 80px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(3rem, 8vw, 5.5rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.04em;
|
|
margin-bottom: 24px;
|
|
background: linear-gradient(to bottom, #ffffff, #a0a0a0);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin: 0 auto 40px;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
/* === DASHBOARD PREVIEW (THE MONEY SHOT) === */
|
|
.dashboard-wrapper {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
|
|
margin-top: 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/* Glow effect behind dashboard */
|
|
.dashboard-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%; left: -50%;
|
|
width: 200%; height: 200%;
|
|
background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.dash-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.dash-title { font-size: 1.1rem; font-weight: 700; }
|
|
.dash-badge {
|
|
font-size: 0.75rem;
|
|
padding: 4px 12px;
|
|
border-radius: 100px;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(0,255,157,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.live-dot {
|
|
width: 6px; height: 6px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
|
|
|
|
/* Metrics Grid */
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.metric-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.metric-card:hover {
|
|
border-color: var(--border-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
.metric-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
|
|
.metric-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; }
|
|
.metric-trend { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
|
|
.trend-up { color: var(--accent); }
|
|
.trend-down { color: var(--error); }
|
|
|
|
/* Chart Area */
|
|
.chart-area {
|
|
height: 200px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
}
|
|
.chart-bar {
|
|
flex: 1;
|
|
background: var(--border);
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 0.5s ease;
|
|
}
|
|
.chart-bar.highlight {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 10px var(--accent-dim);
|
|
}
|
|
|
|
/* === FEATURES === */
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
}
|
|
.feature-item h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
.feature-item p { color: var(--text-secondary); }
|
|
|
|
/* === PRICING === */
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-top: 48px;
|
|
}
|
|
.price-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.price-card.featured {
|
|
border-color: var(--accent);
|
|
background: linear-gradient(180deg, rgba(0,255,157,0.05) 0%, var(--bg-surface) 100%);
|
|
}
|
|
.price-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
|
|
.price-amount { font-size: 2.5rem; font-weight: 800; margin-bottom: 24px; font-family: var(--font-mono); }
|
|
.price-period { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
|
|
.price-features { list-style: none; margin-bottom: 32px; flex-grow: 1; }
|
|
.price-features li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.price-features li::before {
|
|
content: '✓';
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 48px 0;
|
|
margin-top: 80px;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 2.5rem; }
|
|
.metrics-grid { grid-template-columns: 1fr 1fr; }
|
|
.pricing-grid { grid-template-columns: 1fr; }
|
|
.features { grid-template-columns: 1fr; }
|
|
.nav-links { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="logo">ROI<span>24</span></div>
|
|
<div class="nav-links">
|
|
<a href="#features">Возможности</a>
|
|
<a href="#pricing">Тарифы</a>
|
|
<a href="#demo">Демо</a>
|
|
</div>
|
|
<a href="#cta" class="btn btn-outline">Войти</a>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<header class="hero">
|
|
<h1>Живые цифры<br>вашего бизнеса</h1>
|
|
<p>Подключаем 1С, банк и рекламу. Вы видите выручку, маржу и кассу каждое утро. Без бухгалтерских задержек и таблиц Excel.</p>
|
|
<div class="hero-actions">
|
|
<a href="#demo" class="btn btn-primary">Смотреть демо</a>
|
|
<a href="#pricing" class="btn btn-outline">Тарифы</a>
|
|
</div>
|
|
|
|
<!-- DASHBOARD PREVIEW -->
|
|
<div class="dashboard-wrapper" id="demo">
|
|
<div class="dash-header">
|
|
<div class="dash-title">Dashboard | Интернет-магазин</div>
|
|
<div class="dash-badge">
|
|
<div class="live-dot"></div> Live Sync
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-label">Выручка (Сегодня)</div>
|
|
<div class="metric-value">124 500 ₽</div>
|
|
<div class="metric-trend trend-up">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
|
|
+12.5%
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">Маржа (Сегодня)</div>
|
|
<div class="metric-value">38 150 ₽</div>
|
|
<div class="metric-trend trend-up">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
|
|
+8.2%
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">Заказы (Всего)</div>
|
|
<div class="metric-value">47</div>
|
|
<div class="metric-trend trend-down">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
|
|
-2.1%
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">Касса (Баланс)</div>
|
|
<div class="metric-value" style="color: var(--accent)">1 245 000 ₽</div>
|
|
<div class="metric-trend" style="color: var(--text-secondary)">
|
|
Обновлено 2 мин назад
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-area" id="revenue-chart">
|
|
<!-- Bars injected via JS for animation -->
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- FEATURES -->
|
|
<section id="features">
|
|
<div class="features">
|
|
<div class="feature-item">
|
|
<h3>Автообновление</h3>
|
|
<p>Данные синхронизируются с 1С, банками и рекламными кабинетами каждые 4 часа. Не нужно ждать отчётов в понедельник.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h3>Все каналы в одном месте</h3>
|
|
<p>Сравнивайте ROI Директа, ВКонтакте и маркетплейсов на одном экране. Видно, какой канал приносит деньги прямо сейчас.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h3>AI-прогнозы</h3>
|
|
<p>Система анализирует тренды и предсказывает выручку на завтра. Получайте алерты, если что-то идёт не так.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING -->
|
|
<section id="pricing">
|
|
<h2 style="font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px;">Тарифы</h2>
|
|
<div class="pricing-grid">
|
|
<div class="price-card">
|
|
<div class="price-name">Старт</div>
|
|
<div class="price-amount">10 000 ₽<span class="price-period">/мес</span></div>
|
|
<ul class="price-features">
|
|
<li>1 источник данных (1С или Банк)</li>
|
|
<li>3 дашборда</li>
|
|
<li>Обновление 1 раз в день</li>
|
|
<li>Поддержка по Email</li>
|
|
</ul>
|
|
<a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Начать</a>
|
|
</div>
|
|
<div class="price-card featured">
|
|
<div class="price-name">Бизнес</div>
|
|
<div class="price-amount">25 000 ₽<span class="price-period">/мес</span></div>
|
|
<ul class="price-features">
|
|
<li>До 4 источников (1С, Банк, CRM, Рекламы)</li>
|
|
<li>10 дашбордов</li>
|
|
<li>Обновление каждые 4 часа</li>
|
|
<li>AI-прогнозы и алерты</li>
|
|
<li>Выгрузка в PDF/Excel</li>
|
|
</ul>
|
|
<a href="#" class="btn btn-primary" style="width:100%; justify-content:center;">Попробовать</a>
|
|
</div>
|
|
<div class="price-card">
|
|
<div class="price-name">Под ключ</div>
|
|
<div class="price-amount">50 000 ₽<span class="price-period">/мес</span></div>
|
|
<ul class="price-features">
|
|
<li>Все источники + Маркетплейсы</li>
|
|
<li>Кастомные метрики под бизнес</li>
|
|
<li>Обновление каждые 30 минут</li>
|
|
<li>Выделенный менеджер</li>
|
|
</ul>
|
|
<a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Связаться</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section id="cta" style="text-align: center;">
|
|
<h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 24px;">Перестаньте управлять "на ощупь"</h2>
|
|
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 1.1rem;">
|
|
Подключим дашборд за 3 дня. Первые 7 дней — бесплатно.
|
|
</p>
|
|
<a href="https://t.me/" class="btn btn-primary" style="padding: 16px 32px; font-size: 1.1rem;">
|
|
Обсудить проект в Telegram
|
|
</a>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>ROI24 © 2026. Все права защищены.</p>
|
|
<p style="margin-top: 8px; opacity: 0.5;">Не является публичной офертой. ИНН 0000000000</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// === Simple Chart Animation ===
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const chartContainer = document.getElementById('revenue-chart');
|
|
const barCount = 12;
|
|
const heights = [40, 55, 45, 60, 70, 65, 80, 90, 85, 95, 88, 100]; // Mock data
|
|
|
|
// Generate bars
|
|
heights.forEach((h, i) => {
|
|
const bar = document.createElement('div');
|
|
bar.className = 'chart-bar' + (i === heights.length - 1 ? ' highlight' : '');
|
|
bar.style.height = '0%'; // Start at 0
|
|
chartContainer.appendChild(bar);
|
|
|
|
// Animate on load
|
|
setTimeout(() => {
|
|
bar.style.height = h + '%';
|
|
}, 100 + (i * 50));
|
|
});
|
|
|
|
// Simple Hover Effect for Metric Cards
|
|
const cards = document.querySelectorAll('.metric-card');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', () => {
|
|
card.style.borderColor = 'var(--accent)';
|
|
});
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.borderColor = 'var(--border)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|