mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 18:24:47 +00:00
fefa5f07f9
- consult_landing.html — продуктовый лендинг: Hero, проблема, возможности, воронка 5 фаз, демо-ссылки - consult_demo.html — интерактивный мокап 4 вкладки: Workspace / Admin / Карточка / Интервью - index.html — добавлен раздел "AI КОНСАЛТИНГ CRM" со ссылками на лендинг, демо и live-систему Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
389 lines
19 KiB
HTML
389 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>AI КОНСАЛТИНГ CRM — @wasrusgen1</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--bg: #0F172A;
|
||
--bg2: #1E293B;
|
||
--bg3: #0D1B2A;
|
||
--accent: #10B981;
|
||
--accent2: #047857;
|
||
--accent3: #34D399;
|
||
--text: #F1F5F9;
|
||
--muted: #94A3B8;
|
||
--border: #334155;
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
|
||
h1,h2,h3 { font-family: 'Montserrat', sans-serif; }
|
||
a { text-decoration: none; color: inherit; }
|
||
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* NAV */
|
||
nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
background: rgba(15,23,42,0.85); backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0 24px;
|
||
height: 64px; display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.nav-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); letter-spacing: -0.5px; }
|
||
.nav-logo span { color: var(--text); }
|
||
.nav-links { display: flex; gap: 32px; }
|
||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.2s; }
|
||
.nav-links a:hover { color: var(--text); }
|
||
.nav-cta { background: var(--accent); color: #fff; padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background 0.2s; }
|
||
.nav-cta:hover { background: var(--accent2); color: #fff; }
|
||
|
||
/* HERO */
|
||
.hero {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #064E3B 0%, #0F172A 50%, #0F172A 100%);
|
||
display: flex; align-items: center; justify-content: center;
|
||
text-align: center; padding: 80px 24px 60px;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||
}
|
||
.hero-content { position: relative; z-index: 1; max-width: 800px; }
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3);
|
||
color: var(--accent3); padding: 6px 16px; border-radius: 100px;
|
||
font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 28px;
|
||
}
|
||
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; }
|
||
.hero h1 { font-size: clamp(32px, 6vw, 60px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px; }
|
||
.hero h1 em { font-style: normal; color: var(--accent); }
|
||
.hero p { font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 600px; margin: 0 auto 40px; }
|
||
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
.btn-primary {
|
||
background: var(--accent); color: #fff; padding: 14px 32px; border-radius: 10px;
|
||
font-size: 16px; font-weight: 600; transition: all 0.2s;
|
||
box-shadow: 0 4px 20px rgba(16,185,129,0.3);
|
||
}
|
||
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(16,185,129,0.4); }
|
||
.btn-outline {
|
||
background: transparent; color: var(--text); padding: 14px 32px; border-radius: 10px;
|
||
font-size: 16px; font-weight: 600; border: 1px solid var(--border); transition: all 0.2s;
|
||
}
|
||
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
|
||
.hero-stat { display: flex; gap: 48px; justify-content: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border); }
|
||
.stat-item { text-align: center; }
|
||
.stat-num { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 800; color: var(--accent); }
|
||
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
|
||
|
||
/* SECTIONS */
|
||
section { padding: 96px 24px; }
|
||
.section-tag { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
|
||
.section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.5px; }
|
||
.section-sub { font-size: 17px; color: var(--muted); max-width: 560px; }
|
||
|
||
/* PROBLEM */
|
||
.problem { background: var(--bg); }
|
||
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
|
||
.problem-card {
|
||
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
|
||
padding: 32px; position: relative; overflow: hidden;
|
||
}
|
||
.problem-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||
background: linear-gradient(90deg, #EF4444, #F97316);
|
||
}
|
||
.problem-icon { font-size: 32px; margin-bottom: 16px; }
|
||
.problem-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; font-family: 'Inter', sans-serif; }
|
||
.problem-card p { font-size: 14px; color: var(--muted); }
|
||
|
||
/* FEATURES */
|
||
.features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); }
|
||
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; }
|
||
.feature-card {
|
||
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
|
||
padding: 28px; transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.feature-card:hover { border-color: rgba(16,185,129,0.4); transform: translateY(-2px); }
|
||
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
|
||
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
|
||
.feature-card p { font-size: 14px; color: var(--muted); }
|
||
|
||
/* FUNNEL */
|
||
.funnel { background: var(--bg2); }
|
||
.funnel-flow { display: flex; align-items: flex-start; gap: 0; margin-top: 56px; overflow-x: auto; padding-bottom: 16px; }
|
||
.funnel-step {
|
||
flex: 1; min-width: 160px;
|
||
background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
|
||
padding: 24px 20px; text-align: center; position: relative;
|
||
}
|
||
.funnel-step.active { border-color: var(--accent); background: rgba(16,185,129,0.05); }
|
||
.funnel-arrow {
|
||
flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
|
||
color: var(--accent); font-size: 20px; padding-top: 36px;
|
||
}
|
||
.funnel-num {
|
||
width: 32px; height: 32px; border-radius: 50%; background: rgba(16,185,129,0.15);
|
||
color: var(--accent); font-weight: 700; font-size: 14px;
|
||
display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
|
||
}
|
||
.funnel-step.active .funnel-num { background: var(--accent); color: #fff; }
|
||
.funnel-step h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
|
||
.funnel-step p { font-size: 12px; color: var(--muted); line-height: 1.5; }
|
||
.funnel-desc { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
|
||
|
||
/* DEMO */
|
||
.demo { background: var(--bg); }
|
||
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
|
||
.demo-card {
|
||
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
|
||
padding: 28px; transition: all 0.2s;
|
||
}
|
||
.demo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
|
||
.demo-num { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 800; color: rgba(16,185,129,0.2); margin-bottom: 16px; line-height: 1; }
|
||
.demo-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
|
||
.demo-card p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
|
||
.demo-link {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
color: var(--accent); font-size: 14px; font-weight: 600;
|
||
transition: gap 0.2s;
|
||
}
|
||
.demo-link:hover { gap: 10px; }
|
||
.demo-link::after { content: '→'; }
|
||
|
||
/* FOOTER */
|
||
footer {
|
||
background: var(--bg3); border-top: 1px solid var(--border);
|
||
padding: 48px 24px;
|
||
}
|
||
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
|
||
.footer-brand .logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); }
|
||
.footer-brand p { font-size: 13px; color: var(--muted); margin-top: 6px; }
|
||
.footer-links { display: flex; gap: 24px; }
|
||
.footer-links a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
|
||
.footer-links a:hover { color: var(--text); }
|
||
.footer-contact { font-size: 14px; color: var(--muted); }
|
||
.footer-contact a { color: var(--accent); }
|
||
.footer-bottom { max-width: 1120px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
|
||
.footer-bottom p { font-size: 13px; color: var(--muted); }
|
||
|
||
@media(max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.hero-stat { gap: 24px; flex-wrap: wrap; }
|
||
.funnel-flow { flex-wrap: nowrap; }
|
||
.footer-inner { justify-content: center; text-align: center; }
|
||
.footer-links { justify-content: center; }
|
||
.footer-bottom { justify-content: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-logo">@wasrusgen<span>1</span></div>
|
||
<div class="nav-links">
|
||
<a href="#problem">Проблема</a>
|
||
<a href="#features">Возможности</a>
|
||
<a href="#funnel">Воронка</a>
|
||
<a href="#demo">Демо</a>
|
||
</div>
|
||
<a href="https://wasrusgen1.ru/consult/" target="_blank" class="nav-cta">Открыть систему</a>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">AI КОНСАЛТИНГ ПЛАТФОРМА</div>
|
||
<h1>AI-Ассистент для<br><em>консалтингового</em> бизнеса</h1>
|
||
<p>Структурирует сбор информации о клиенте. Ведёт через все этапы проекта. Готовит документы.</p>
|
||
<div class="hero-btns">
|
||
<a href="#demo" class="btn-primary">Посмотреть демо</a>
|
||
<a href="https://wasrusgen1.ru/consult/" target="_blank" class="btn-outline">Открыть систему</a>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="stat-item">
|
||
<div class="stat-num">5</div>
|
||
<div class="stat-label">фаз проекта</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-num">AI</div>
|
||
<div class="stat-label">ассистент Елена</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-num">0</div>
|
||
<div class="stat-label">ручных документов</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROBLEM -->
|
||
<section class="problem" id="problem">
|
||
<div class="container">
|
||
<div class="section-tag">Проблема</div>
|
||
<h2 class="section-title">Почему консалтинг теряет деньги</h2>
|
||
<p class="section-sub">Три системных проблемы, которые съедают время и снижают качество работы с клиентами</p>
|
||
<div class="problem-grid">
|
||
<div class="problem-card">
|
||
<div class="problem-icon">🗣️</div>
|
||
<h3>Клиент рассказывает обо всём, кроме сути</h3>
|
||
<p>Первичная встреча превращается в монолог без структуры. Консультант получает 80% нерелевантной информации и 20% нужной.</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">📋</div>
|
||
<h3>Нет структуры сбора информации</h3>
|
||
<p>Каждый проект начинается с нуля. Нет единого шаблона брифа, нет контрольного списка вопросов, нет истории диалога.</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">📝</div>
|
||
<h3>Документы готовятся вручную</h3>
|
||
<p>ТЗ, договоры, отчёты — каждый раз копипаст из предыдущих проектов. Занимает часы, в которые можно работать с клиентами.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="features" id="features">
|
||
<div class="container">
|
||
<div class="section-tag">Решение</div>
|
||
<h2 class="section-title">Возможности платформы</h2>
|
||
<p class="section-sub">Всё что нужно для системной работы с клиентами — в одном месте</p>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎙️</div>
|
||
<h3>Первичный бриф с голосом</h3>
|
||
<p>5 структурированных блоков с поддержкой голосового ввода. Клиент говорит — система записывает и структурирует.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🤖</div>
|
||
<h3>AI-ассистент с ограничениями</h3>
|
||
<p>Ассистент Елена ведёт диалог строго в рамках задачи. Не уходит в сторону, фокусирует клиента на главном.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>Структурированное интервью</h3>
|
||
<p>Система вопросов с прогрессом прохождения. Все ответы сохраняются, можно продолжить в любой момент.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📄</div>
|
||
<h3>Генерация ТЗ и договоров</h3>
|
||
<p>Документы автоматически формируются из данных карточки клиента. Редактирование и экспорт одним кликом.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🗂️</div>
|
||
<h3>CRM с воронкой проекта</h3>
|
||
<p>Каждый клиент проходит 5 фаз: от первичного анализа до сопровождения. Статус всегда виден в кабинете.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FUNNEL -->
|
||
<section class="funnel" id="funnel">
|
||
<div class="container">
|
||
<div class="section-tag">Воронка проекта</div>
|
||
<h2 class="section-title">5 фаз работы с клиентом</h2>
|
||
<p class="section-sub">Стандартизированный процесс от первого контакта до долгосрочного сопровождения</p>
|
||
<div class="funnel-flow">
|
||
<div class="funnel-step">
|
||
<div class="funnel-num">1</div>
|
||
<h4>AS-IS</h4>
|
||
<p>Анализ текущего состояния бизнеса клиента</p>
|
||
</div>
|
||
<div class="funnel-arrow">›</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-num">2</div>
|
||
<h4>Аудит</h4>
|
||
<p>Детальный разбор процессов, выявление узких мест</p>
|
||
</div>
|
||
<div class="funnel-arrow">›</div>
|
||
<div class="funnel-step active">
|
||
<div class="funnel-num">3</div>
|
||
<h4>TO-BE</h4>
|
||
<p>Проектирование целевого состояния</p>
|
||
</div>
|
||
<div class="funnel-arrow">›</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-num">4</div>
|
||
<h4>Внедрение</h4>
|
||
<p>Реализация изменений, обучение команды</p>
|
||
</div>
|
||
<div class="funnel-arrow">›</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-num">5</div>
|
||
<h4>Сопровождение</h4>
|
||
<p>Поддержка, контроль результатов, доработки</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DEMO -->
|
||
<section class="demo" id="demo">
|
||
<div class="container">
|
||
<div class="section-tag">Демо</div>
|
||
<h2 class="section-title">Посмотрите систему в работе</h2>
|
||
<p class="section-sub">Четыре ключевых модуля — доступны прямо сейчас</p>
|
||
<div class="demo-grid">
|
||
<div class="demo-card">
|
||
<div class="demo-num">01</div>
|
||
<h3>Кабинет клиента</h3>
|
||
<p>Workspace с чатом AI-ассистента Елены, брифом и интервью</p>
|
||
<a href="https://wasrusgen1.ru/consult/" target="_blank" class="demo-link">Открыть</a>
|
||
</div>
|
||
<div class="demo-card">
|
||
<div class="demo-num">02</div>
|
||
<h3>Кабинет администратора</h3>
|
||
<p>Список клиентов с приоритетами, статусами и управлением</p>
|
||
<a href="https://wasrusgen1.ru/consult/admin" target="_blank" class="demo-link">Открыть</a>
|
||
</div>
|
||
<div class="demo-card">
|
||
<div class="demo-num">03</div>
|
||
<h3>Карточка клиента</h3>
|
||
<p>Воронка проекта, бриф, ТЗ, история взаимодействий</p>
|
||
<a href="https://wasrusgen1.ru/consult/client" target="_blank" class="demo-link">Открыть</a>
|
||
</div>
|
||
<div class="demo-card">
|
||
<div class="demo-num">04</div>
|
||
<h3>Договор</h3>
|
||
<p>Автогенерация договора из данных карточки клиента</p>
|
||
<a href="https://wasrusgen1.ru/consult/contract" target="_blank" class="demo-link">Открыть</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<div class="logo">@wasrusgen1</div>
|
||
<p>AI-консалтинг для производственного бизнеса</p>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="#problem">Проблема</a>
|
||
<a href="#features">Возможности</a>
|
||
<a href="#funnel">Воронка</a>
|
||
<a href="#demo">Демо</a>
|
||
</div>
|
||
<div class="footer-contact">
|
||
ИП Васильев Р.Г. | <a href="https://wasrusgen1.ru/consult/" target="_blank">wasrusgen1.ru</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 @wasrusgen1 — AI КОНСАЛТИНГ CRM</p>
|
||
<p>Все права защищены</p>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|