rightvector/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавлен лендинг сайта компании «Верный вектор»

Browse Source 
Начальная версия public/index.html с лендингом компании.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Верный вектор 2026-04-10 18:55:34 +07:00
commit 4402fbe4c5
1 changed files with 388 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
public/index.html Normal file
View File

@ -0,0 +1,388 @@
<!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">&#x1F310;</div>
<h3>Веб-приложения и SaaS</h3>
<p>Полный цикл: от идеи до продакшена. React, Node.js, Python. Адаптивный дизайн, API, админ-панели.</p>
</div>
<div class="card">
<div class="card-icon">&#x1F916;</div>
<h3>Telegram-боты и интеграции</h3>
<p>Умные боты для бизнеса: приём заявок, CRM, уведомления, автоматизация рутины.</p>
</div>
<div class="card">
<div class="card-icon">&#x2699;</div>
<h3>Автоматизация процессов</h3>
<p>Интеграция систем, ETL-пайплайны, автоматические отчёты, workflow-движки.</p>
</div>
<div class="card">
<div class="card-icon">&#x1F9E0;</div>
<h3>AI-решения</h3>
<p>Чат-боты на базе LLM, RAG-системы, AI-ассистенты для вашей предметной области.</p>
</div>
<div class="card">
<div class="card-icon">&#x1F4F1;</div>
<h3>API и микросервисы</h3>
<p>RESTful и GraphQL API, микросервисная архитектура, масштабирование под нагрузку.</p>
</div>
<div class="card">
<div class="card-icon">&#x1F6E1;</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">&#x26A1;</div>
<div>
<h4>Скорость</h4>
<p>AI-агенты работают параллельно и круглосуточно. Проект за неделю вместо месяца.</p>
</div>
</div>
<div class="adv-item">
<div class="adv-icon">&#x1F4B0;</div>
<div>
<h4>Экономия</h4>
<p>Нет зарплатного фонда. Стоимость проектов в 2-3 раза ниже рынка.</p>
</div>
</div>
<div class="adv-item">
<div class="adv-icon">&#x1F50D;</div>
<div>
<h4>Качество</h4>
<p>Автоматическое code review, 80%+ покрытие тестами, проверка безопасности.</p>
</div>
</div>
<div class="adv-item">
<div class="adv-icon">&#x1F4CA;</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">&#x1F3AF;</div><h4>Координатор</h4><p>Управление проектами и командой</p><span class="agent-status">online</span></div>
<div class="agent"><div class="agent-avatar">&#x1F4CB;</div><h4>Продакт-менеджер</h4><p>ТЗ, спецификации, приёмка</p><span class="agent-status">online</span></div>
<div class="agent"><div class="agent-avatar">&#x1F468;&#x200D;&#x1F4BB;</div><h4>Старший разработчик</h4><p>Архитектура, код, code review</p><span class="agent-status">online</span></div>
<div class="agent"><div class="agent-avatar">&#x1F4BB;</div><h4>Разработчик</h4><p>Реализация фич, тесты</p><span class="agent-status">online</span></div>
<div class="agent"><div class="agent-avatar">&#x1F50E;</div><h4>QA-инженер</h4><p>Тесты, ревью, безопасность</p><span class="agent-status">online</span></div>
<div class="agent"><div class="agent-avatar">&#x1F6E0;</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>&copy; 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>