598 lines
No EOL
20 KiB
HTML
598 lines
No EOL
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Simbiot — Ритмичный ИИ-харнес кооператива 42</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--accent: #2563eb;
|
||
--bg-light: #ffffff;
|
||
--bg-dark: #1e293b;
|
||
--text-light: #1e293b;
|
||
--text-dark: #f8fafc;
|
||
--gray: #64748b;
|
||
--border: #e2e8f0;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-light);
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fade-in-up {
|
||
opacity: 0;
|
||
animation: fadeInUp 0.8s ease-out forwards;
|
||
}
|
||
|
||
.delay-1 { animation-delay: 0.2s; }
|
||
.delay-2 { animation-delay: 0.4s; }
|
||
.delay-3 { animation-delay: 0.6s; }
|
||
|
||
/* Typography */
|
||
h1, h2, h3 {
|
||
font-family: Georgia, serif;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.section:nth-child(even) {
|
||
background: var(--bg-dark);
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 12px 24px;
|
||
background: var(--accent);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
font-weight: 500;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #1d4ed8;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
text-align: center;
|
||
padding: 120px 0;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 2rem;
|
||
color: var(--gray);
|
||
}
|
||
|
||
/* Problem/Solution Blocks */
|
||
.problem-solution {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.block {
|
||
padding: 30px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.block h3 {
|
||
color: var(--accent);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.block p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* What's Included */
|
||
.included-list {
|
||
list-style: none;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.included-list li {
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.included-list li:before {
|
||
content: "✓";
|
||
color: var(--accent);
|
||
font-weight: bold;
|
||
margin-right: 15px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* How It Works */
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.step {
|
||
text-align: center;
|
||
padding: 30px;
|
||
background: rgba(37, 99, 235, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(37, 99, 235, 0.1);
|
||
}
|
||
|
||
.step-number {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: var(--accent);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
/* Mockups */
|
||
.mockup {
|
||
margin: 40px 0;
|
||
padding: 30px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.dashboard {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
font-family: monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.dashboard-header {
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 10px 15px;
|
||
border-radius: 6px 6px 0 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dashboard-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.task-item {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.task-status {
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
}
|
||
.status-pending { background: #fef3c7; color: #92400e; }
|
||
.status-progress { background: #dbeafe; color: #1e40af; }
|
||
.status-done { background: #d1fae5; color: #065f46; }
|
||
|
||
.telegram-chat {
|
||
background: #f8fafc;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.message {
|
||
margin: 10px 0;
|
||
max-width: 70%;
|
||
padding: 12px 16px;
|
||
border-radius: 18px;
|
||
position: relative;
|
||
}
|
||
|
||
.message.user {
|
||
background: var(--accent);
|
||
color: white;
|
||
margin-left: auto;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
|
||
.message.bot {
|
||
background: #e2e8f0;
|
||
color: var(--text-light);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
|
||
/* Social Proof */
|
||
.social-proof {
|
||
text-align: center;
|
||
padding: 40px;
|
||
}
|
||
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.stat {
|
||
padding: 20px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Pricing */
|
||
.pricing {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.plan {
|
||
padding: 40px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.plan h3 {
|
||
margin-bottom: 20px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.plan-price {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.plan-features {
|
||
list-style: none;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.plan-features li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: var(--bg-dark);
|
||
color: var(--text-dark);
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 40px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.footer-section h4 {
|
||
margin-bottom: 15px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.footer-section p, .footer-section a {
|
||
color: #94a3b8;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer-section a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 { font-size: 1.8rem; }
|
||
h2 { font-size: 1.5rem; }
|
||
.section { padding: 60px 0; }
|
||
.hero { padding: 80px 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero Section -->
|
||
<section class="hero section">
|
||
<div class="container fade-in-up">
|
||
<h1>Харнес превращает решения в исполненные задачи</h1>
|
||
<p>Для кооперативов, которые хотят ≥ +1% к AUM в горизонте год+</p>
|
||
<a href="#pricing" class="btn">Начать использовать Simbiot</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- What This Is -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Что это</h2>
|
||
<div class="problem-solution">
|
||
<div class="block fade-in-up delay-1">
|
||
<h3>Проблема</h3>
|
||
<p>Решения из звонков и чатов теряются, не доходят до исполнителей, важное тонет в рутине</p>
|
||
</div>
|
||
<div class="block fade-in-up delay-2">
|
||
<h3>Механизм</h3>
|
||
<p>Харнес автоматически извлекает решения из диалогов, создает задачи с четкими сроками и ответственными</p>
|
||
</div>
|
||
<div class="block fade-in-up delay-3">
|
||
<h3>Результат</h3>
|
||
<p>Важное всегда на виду, эскалации важного поднимаются наверх, AUM растет системно</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- What's Included -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Что включено</h2>
|
||
<ul class="included-list">
|
||
<li>Автоматический парсинг решений из Telegram-чатов и звонков</li>
|
||
<li>Система задач с тактами (минута/час/день) для агентов</li>
|
||
<li>Дашборд контроля исполнения в реальном времени</li>
|
||
<li>Эскалация важных задач без потери контекста</li>
|
||
<li>Интеграция с существующими системами кооператива</li>
|
||
<li>Аналитика эффективности решений и их исполнения</li>
|
||
<li>Поддержка 7 продуктов кооператива 42</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Как это работает</h2>
|
||
<div class="steps">
|
||
<div class="step fade-in-up">
|
||
<div class="step-number">1</div>
|
||
<h3>Обсуждение</h3>
|
||
<p>Вы обсуждаете решения в Telegram или звонках</p>
|
||
</div>
|
||
<div class="step fade-in-up delay-1">
|
||
<div class="step-number">2</div>
|
||
<h3>Авто-создание задач</h3>
|
||
<p>Simbiot превращает решения в задачи с ответственными</p>
|
||
</div>
|
||
<div class="step fade-in-up delay-2">
|
||
<div class="step-number">3</div>
|
||
<h3>Контроль исполнения</h3>
|
||
<p>Агенты выполняют по тактам, важное эскалируется</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Product Visuals -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Визуалы продукта</h2>
|
||
|
||
<div class="mockup fade-in-up">
|
||
<h3>Дашборд задач</h3>
|
||
<div class="dashboard">
|
||
<div class="dashboard-header">Панель управления задачами</div>
|
||
<div class="dashboard-content">
|
||
<div class="task-item">
|
||
<span>Анализ Q3 отчетов</span>
|
||
<span class="task-status status-progress">В работе</span>
|
||
</div>
|
||
<div class="task-item">
|
||
<span>Подготовить презентацию для инвесторов</span>
|
||
<span class="task-status status-pending">Ожидание</span>
|
||
</div>
|
||
<div class="task-item">
|
||
<span>Обновить CRM систему</span>
|
||
<span class="task-status status-done">Готово</span>
|
||
</div>
|
||
<div class="task-item">
|
||
<span>Проверить compliance требования</span>
|
||
<span class="task-status status-pending">Ожидание</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mockup fade-in-up delay-1">
|
||
<h3>Telegram-диалог</h3>
|
||
<div class="telegram-chat">
|
||
<div class="message bot">
|
||
<strong>Simbiot:</strong> Обнаружено решение: "Запланировать встречу с командой по стратегии Q4"
|
||
</div>
|
||
<div class="message user">
|
||
<strong>Вы:</strong> Подтверждаю, создай задачу
|
||
</div>
|
||
<div class="message bot">
|
||
<strong>Simbiot:</strong> Задача создана: Встреча по стратегии Q4, ответственный: Вы, срок: 25.10.2024
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Social Proof -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Соцдоказательство</h2>
|
||
<div class="social-proof">
|
||
<p>Кооператив 42 «Друзья Коллективного Разума»</p>
|
||
<p>Юрлицо с 2026 года, Минск</p>
|
||
<p>7 продуктов под управлением, сайт cil.by, Telegram t.me/cil_by</p>
|
||
|
||
<div class="stats">
|
||
<div class="stat">
|
||
<div class="stat-number">2026</div>
|
||
<div>Год основания</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">7</div>
|
||
<div>Активных продуктов</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">≥+1%</div>
|
||
<div>Рост AUM в год+</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section class="section" id="pricing">
|
||
<div class="container">
|
||
<h2>Тарифные планы</h2>
|
||
<div class="pricing">
|
||
<div class="plan fade-in-up">
|
||
<h3>Старт</h3>
|
||
<div class="plan-price">₽15к/мес</div>
|
||
<ul class="plan-features">
|
||
<li>До 5 пользователей</li>
|
||
<li>1 Telegram-чат</li>
|
||
<li>Базовый дашборд</li>
|
||
<li>Стандартная поддержка</li>
|
||
</ul>
|
||
<a href="#" class="btn">Начать</a>
|
||
</div>
|
||
|
||
<div class="plan fade-in-up delay-1">
|
||
<h3>Про</h3>
|
||
<div class="plan-price">₽35к/мес</div>
|
||
<ul class="plan-features">
|
||
<li>До 20 пользователей</li>
|
||
<li>5 Telegram-чатов</li>
|
||
<li>Продвинутый дашборд</li>
|
||
<li>Приоритетная поддержка</li>
|
||
<li>API интеграции</li>
|
||
</ul>
|
||
<a href="#" class="btn">Выбрать</a>
|
||
</div>
|
||
|
||
<div class="plan fade-in-up delay-2">
|
||
<h3>Enterprise</h3>
|
||
<div class="plan-price">По запросу</div>
|
||
<ul class="plan-features">
|
||
<li>Неограниченно пользователей</li>
|
||
<li>Неограниченно чатов</li>
|
||
<li>Полный функционал</li>
|
||
<li>Персональный менеджер</li>
|
||
<li>Кастомные интеграции</li>
|
||
</ul>
|
||
<a href="#" class="btn">Контакты</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Final CTA -->
|
||
<section class="hero section">
|
||
<div class="container fade-in-up">
|
||
<h1>Харнес превращает решения в исполненные задачи</h1>
|
||
<p>Для кооперативов, которые хотят ≥ +1% к AUM в горизонте год+</p>
|
||
<a href="#pricing" class="btn">Начать использовать Simbiot</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-section">
|
||
<h4>Кто делает</h4>
|
||
<p>Кооператив 42 «Друзья Коллективного Разума»</p>
|
||
<p>Разработка Simbiot</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Контакты</h4>
|
||
<p>Сайт: cil.by</p>
|
||
<p>Telegram: t.me/cil_by</p>
|
||
<p>Email: info@cil.by</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Юр. информация</h4>
|
||
<p>УНП: 123456789</p>
|
||
<p>Адрес: г. Минск, ул. Примерная, 42</p>
|
||
<p>2026-2026 © Все права защищены</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html> |