4402fbe4c5
Начальная версия public/index.html с лендингом компании. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
389 lines
14 KiB
HTML
389 lines
14 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-разработка для бизнеса</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
:root {
|
||
--bg: #0a0a0f;
|
||
--surface: #12121a;
|
||
--border: #1e1e2e;
|
||
--primary: #6c5ce7;
|
||
--primary-light: #a29bfe;
|
||
--text: #e0e0e0;
|
||
--text-dim: #888;
|
||
--accent: #00cec9;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* Header */
|
||
header {
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
position: sticky; top: 0;
|
||
background: rgba(10,10,15,0.95);
|
||
backdrop-filter: blur(10px);
|
||
z-index: 100;
|
||
}
|
||
header .container { display: flex; justify-content: space-between; align-items: center; }
|
||
.logo { font-size: 1.3em; font-weight: 700; color: var(--primary-light); }
|
||
.logo span { color: var(--accent); }
|
||
nav a { color: var(--text-dim); text-decoration: none; margin-left: 28px; transition: color .2s; }
|
||
nav a:hover { color: var(--primary-light); }
|
||
|
||
/* Hero */
|
||
.hero {
|
||
padding: 100px 0 80px;
|
||
text-align: center;
|
||
}
|
||
.hero h1 {
|
||
font-size: 3em;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary-light), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero p {
|
||
font-size: 1.25em;
|
||
color: var(--text-dim);
|
||
max-width: 600px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
.hero-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 50px;
|
||
margin-top: 50px;
|
||
}
|
||
.stat { text-align: center; }
|
||
.stat-num {
|
||
font-size: 2.5em;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
}
|
||
.stat-label { color: var(--text-dim); font-size: 0.9em; }
|
||
|
||
/* Services */
|
||
.section { padding: 80px 0; }
|
||
.section-title {
|
||
font-size: 2em;
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
color: var(--primary-light);
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 32px;
|
||
transition: border-color .3s, transform .3s;
|
||
}
|
||
.card:hover { border-color: var(--primary); transform: translateY(-4px); }
|
||
.card-icon { font-size: 2em; margin-bottom: 16px; }
|
||
.card h3 { font-size: 1.2em; margin-bottom: 10px; color: #fff; }
|
||
.card p { color: var(--text-dim); font-size: 0.95em; }
|
||
|
||
/* Advantages */
|
||
.advantages { background: var(--surface); }
|
||
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
|
||
.adv-item { display: flex; gap: 16px; align-items: flex-start; }
|
||
.adv-icon {
|
||
width: 48px; height: 48px;
|
||
background: var(--primary);
|
||
border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.5em;
|
||
flex-shrink: 0;
|
||
}
|
||
.adv-item h4 { margin-bottom: 6px; color: #fff; }
|
||
.adv-item p { color: var(--text-dim); font-size: 0.9em; }
|
||
|
||
/* Team (agents) */
|
||
.agent-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.agent {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
}
|
||
.agent-avatar {
|
||
width: 64px; height: 64px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
margin: 0 auto 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.5em;
|
||
}
|
||
.agent h4 { color: #fff; margin-bottom: 4px; }
|
||
.agent p { color: var(--text-dim); font-size: 0.85em; }
|
||
.agent-status {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
border-radius: 20px;
|
||
font-size: 0.75em;
|
||
margin-top: 8px;
|
||
background: rgba(0,206,201,0.15);
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Contact form */
|
||
.contact-section { background: var(--surface); }
|
||
.form-wrap {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
}
|
||
.form-group { margin-bottom: 20px; }
|
||
.form-group label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 0.9em; }
|
||
.form-group input, .form-group textarea {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
color: var(--text);
|
||
font-size: 1em;
|
||
outline: none;
|
||
transition: border-color .2s;
|
||
}
|
||
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
|
||
.form-group textarea { min-height: 100px; resize: vertical; }
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
background: linear-gradient(135deg, var(--primary), #5a4bd1);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity .2s, transform .2s;
|
||
width: 100%;
|
||
}
|
||
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
|
||
.form-success {
|
||
display: none;
|
||
text-align: center;
|
||
padding: 30px;
|
||
color: var(--accent);
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
border-top: 1px solid var(--border);
|
||
color: var(--text-dim);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero h1 { font-size: 2em; }
|
||
.hero-stats { flex-direction: column; gap: 20px; }
|
||
.adv-grid { grid-template-columns: 1fr; }
|
||
.agent-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<div class="logo">Верный<span>вектор</span></div>
|
||
<nav>
|
||
<a href="#services">Услуги</a>
|
||
<a href="#team">Команда</a>
|
||
<a href="#contact">Заявка</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>AI-разработка для бизнеса</h1>
|
||
<p>Команда автономных AI-агентов разрабатывает программные решения 24/7. Быстрее, дешевле, без человеческого фактора.</p>
|
||
<a href="#contact" class="btn" style="max-width:300px;display:inline-block">Оставить заявку</a>
|
||
<div class="hero-stats">
|
||
<div class="stat"><div class="stat-num" id="agents-count">6</div><div class="stat-label">AI-агентов</div></div>
|
||
<div class="stat"><div class="stat-num">24/7</div><div class="stat-label">Работа без перерывов</div></div>
|
||
<div class="stat"><div class="stat-num">x3</div><div class="stat-label">Быстрее рынка</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="services">
|
||
<div class="container">
|
||
<h2 class="section-title">Услуги</h2>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<div class="card-icon">🌐</div>
|
||
<h3>Веб-приложения и SaaS</h3>
|
||
<p>Полный цикл: от идеи до продакшена. React, Node.js, Python. Адаптивный дизайн, API, админ-панели.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🤖</div>
|
||
<h3>Telegram-боты и интеграции</h3>
|
||
<p>Умные боты для бизнеса: приём заявок, CRM, уведомления, автоматизация рутины.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">⚙</div>
|
||
<h3>Автоматизация процессов</h3>
|
||
<p>Интеграция систем, ETL-пайплайны, автоматические отчёты, workflow-движки.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🧠</div>
|
||
<h3>AI-решения</h3>
|
||
<p>Чат-боты на базе LLM, RAG-системы, AI-ассистенты для вашей предметной области.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">📱</div>
|
||
<h3>API и микросервисы</h3>
|
||
<p>RESTful и GraphQL API, микросервисная архитектура, масштабирование под нагрузку.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🛡</div>
|
||
<h3>DevOps и поддержка</h3>
|
||
<p>CI/CD, Docker, мониторинг, SLA 99.9%. Ежемесячная поддержка и доработки.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section advantages" id="advantages">
|
||
<div class="container">
|
||
<h2 class="section-title">Почему мы</h2>
|
||
<div class="adv-grid">
|
||
<div class="adv-item">
|
||
<div class="adv-icon">⚡</div>
|
||
<div>
|
||
<h4>Скорость</h4>
|
||
<p>AI-агенты работают параллельно и круглосуточно. Проект за неделю вместо месяца.</p>
|
||
</div>
|
||
</div>
|
||
<div class="adv-item">
|
||
<div class="adv-icon">💰</div>
|
||
<div>
|
||
<h4>Экономия</h4>
|
||
<p>Нет зарплатного фонда. Стоимость проектов в 2-3 раза ниже рынка.</p>
|
||
</div>
|
||
</div>
|
||
<div class="adv-item">
|
||
<div class="adv-icon">🔍</div>
|
||
<div>
|
||
<h4>Качество</h4>
|
||
<p>Автоматическое code review, 80%+ покрытие тестами, проверка безопасности.</p>
|
||
</div>
|
||
</div>
|
||
<div class="adv-item">
|
||
<div class="adv-icon">📊</div>
|
||
<div>
|
||
<h4>Прозрачность</h4>
|
||
<p>Клиентский портал: статус задач, коммиты, тесты — всё в реальном времени.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="team">
|
||
<div class="container">
|
||
<h2 class="section-title">Команда</h2>
|
||
<div class="agent-grid" id="agent-list">
|
||
<div class="agent"><div class="agent-avatar">🎯</div><h4>Координатор</h4><p>Управление проектами и командой</p><span class="agent-status">online</span></div>
|
||
<div class="agent"><div class="agent-avatar">📋</div><h4>Продакт-менеджер</h4><p>ТЗ, спецификации, приёмка</p><span class="agent-status">online</span></div>
|
||
<div class="agent"><div class="agent-avatar">👨‍💻</div><h4>Старший разработчик</h4><p>Архитектура, код, code review</p><span class="agent-status">online</span></div>
|
||
<div class="agent"><div class="agent-avatar">💻</div><h4>Разработчик</h4><p>Реализация фич, тесты</p><span class="agent-status">online</span></div>
|
||
<div class="agent"><div class="agent-avatar">🔎</div><h4>QA-инженер</h4><p>Тесты, ревью, безопасность</p><span class="agent-status">online</span></div>
|
||
<div class="agent"><div class="agent-avatar">🛠</div><h4>DevOps-инженер</h4><p>CI/CD, деплой, мониторинг</p><span class="agent-status">online</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section contact-section" id="contact">
|
||
<div class="container">
|
||
<h2 class="section-title">Оставить заявку</h2>
|
||
<div class="form-wrap">
|
||
<form id="lead-form">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" name="name" required placeholder="Иван Петров">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Контакт (email или Telegram)</label>
|
||
<input type="text" name="contact" required placeholder="@username или email@example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Опишите проект</label>
|
||
<textarea name="description" required placeholder="Чем мы можем помочь?"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn">Отправить заявку</button>
|
||
</form>
|
||
<div class="form-success" id="form-success">
|
||
Заявка принята! Наш AI-менеджер свяжется с вами в ближайшее время.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 Верный вектор. AI-first software development.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById('lead-form').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const form = e.target;
|
||
const data = {
|
||
name: form.name.value,
|
||
contact: form.contact.value,
|
||
description: form.description.value,
|
||
channel: 'website'
|
||
};
|
||
try {
|
||
const res = await fetch('/api/leads', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
if (res.ok) {
|
||
form.style.display = 'none';
|
||
document.getElementById('form-success').style.display = 'block';
|
||
}
|
||
} catch (err) {
|
||
alert('Ошибка отправки. Попробуйте позже.');
|
||
}
|
||
});
|
||
|
||
// Fetch live agent statuses
|
||
fetch('/api/agents').then(r => r.json()).then(agents => {
|
||
document.getElementById('agents-count').textContent = agents.length;
|
||
}).catch(() => {});
|
||
</script>
|
||
</body>
|
||
</html>
|