355 lines
19 KiB
HTML
355 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Töre — Интеллектуальная платформа интервьюирования</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-bg {
|
||
background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%);
|
||
}
|
||
.feature-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
background: var(--kt-ai-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: var(--kt-ai-space-5);
|
||
}
|
||
.feature-icon svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
stroke: white;
|
||
}
|
||
.step-number {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-primary);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
flex-shrink: 0;
|
||
}
|
||
.logo-text {
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
font-size: var(--kt-ai-text-lg);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<span class="logo-text">Töre AI</span>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#features">Возможности</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contact">Попробовать</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero hero-bg" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>ИИ-интервьюер для объективной оценки кандидатов</h1>
|
||
<p class="kt-ai-hero-sub" style="max-width:640px;margin:0 auto var(--kt-ai-space-8)">
|
||
Töre проводит структурированные интервью на основе ИИ, анализирует ответы и формирует подробный отчёт по каждому кандидату. Экономьте до 70% времени на первичном отборе.
|
||
</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contact">Запустить демо</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#how-it-works">Как это работает</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Возможности платформы</h2>
|
||
<p>Всё необходимое для современного процесса найма</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
|
||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||
<line x1="12" x2="12" y1="19" y2="22"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Автоматизация интервью</h3>
|
||
<p>ИИ проводит интервью 24/7, задавая релевантные вопросы и адаптируясь под ответы кандидата.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<line x1="16" x2="8" y1="13" y2="13"/>
|
||
<line x1="16" x2="8" y1="17" y2="17"/>
|
||
<line x1="10" x2="8" y1="9" y2="9"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Детальные отчёты</h3>
|
||
<p>Полный анализ ответов с оценкой компетенций, сильных сторон и зон развития.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2"/>
|
||
<line x1="16" x2="16" y1="2" y2="6"/>
|
||
<line x1="8" x2="8" y1="2" y2="6"/>
|
||
<line x1="3" x2="21" y1="10" y2="10"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Гибкая настройка</h3>
|
||
<p>Создавайте свои сценарии интервью под конкретные вакансии и требования.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="9" cy="7" r="4"/>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Оценка Soft Skills</h3>
|
||
<p>Анализ коммуникативных навыков, мотивации и культурного соответствия.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" x2="12" y1="3" y2="15"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Экспорт данных</h3>
|
||
<p>Выгрузка результатов в удобных форматах для интеграции с вашей ATS.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect width="20" height="16" x="2" y="4" rx="2"/>
|
||
<path d="m22 19-4.35-4.35a2 2 0 0 0-2.83 0L6 23"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Без предвзятости</h3>
|
||
<p>Объективная оценка по единым критериям для всех кандидатов.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="how-it-works" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Как это работает</h2>
|
||
<p>Три простых шага к эффективному найму</p>
|
||
</div>
|
||
<div style="margin-top:var(--kt-ai-space-10);display:grid;gap:var(--kt-ai-space-8)">
|
||
<div style="display:flex;gap:var(--kt-ai-space-5);align-items:flex-start">
|
||
<div class="step-number">1</div>
|
||
<div>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Настройте сценарий</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);max-width:560px">
|
||
Выберите шаблон интервью или создайте свой: укажите должность, ключевые компетенции,
|
||
обязательные вопросы и критерии оценки. Сохраните как шаблон для повторного использования.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:var(--kt-ai-space-5);align-items:flex-start">
|
||
<div class="step-number">2</div>
|
||
<div>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Пригласите кандидата</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);max-width:560px">
|
||
Отправьте ссылку на интервью кандидату. Он пройдёт его в удобное время с любого устройства.
|
||
Средняя длительность — 15-20 минут.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:var(--kt-ai-space-5);align-items:flex-start">
|
||
<div class="step-number">3</div>
|
||
<div>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Получите отчёт</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);max-width:560px">
|
||
Сразу после завершения ИИ сформирует детальный отчёт: транскрипт, оценку по компетенциям,
|
||
рекомендации по дальнейшим шагам. Сравните кандидатов в единой таблице.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Результаты интервью</h2>
|
||
<p>Пример того, что вы получаете после каждого интервью</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="margin-top:var(--kt-ai-space-8);padding:var(--kt-ai-space-8)">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kt-ai-space-6);margin-bottom:var(--kt-ai-space-8)">
|
||
<div class="kt-ai-kpi">
|
||
<div class="value" style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-fg)">87%</div>
|
||
<div class="label" style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Общая оценка</div>
|
||
<div class="hint" style="color:var(--kt-ai-fg-faint);font-size:var(--kt-ai-text-xs)">из 100%</div>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<div class="value" style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-fg)">18 мин</div>
|
||
<div class="label" style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Длительность</div>
|
||
<div class="hint" style="color:var(--kt-ai-fg-faint);font-size:var(--kt-ai-text-xs)">время интервью</div>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<div class="value" style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-chart-green)">Высокий</div>
|
||
<div class="label" style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Рекомендация</div>
|
||
<div class="hint" style="color:var(--kt-ai-fg-faint);font-size:var(--kt-ai-text-xs)">к найму</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kt-ai-space-6)">
|
||
<div>
|
||
<h4 style="margin-bottom:var(--kt-ai-space-4)">Оценка компетенций</h4>
|
||
<div style="display:grid;gap:var(--kt-ai-space-3)">
|
||
<div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:var(--kt-ai-space-1)">
|
||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Коммуникация</span>
|
||
<span style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">92%</span>
|
||
</div>
|
||
<div style="height:8px;background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-full);overflow:hidden">
|
||
<div style="width:92%;height:100%;background:var(--kt-ai-chart-blue);border-radius:var(--kt-ai-radius-full)"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:var(--kt-ai-space-1)">
|
||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Технические навыки</span>
|
||
<span style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">85%</span>
|
||
</div>
|
||
<div style="height:8px;background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-full);overflow:hidden">
|
||
<div style="width:85%;height:100%;background:var(--kt-ai-chart-green);border-radius:var(--kt-ai-radius-full)"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:var(--kt-ai-space-1)">
|
||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Лидерство</span>
|
||
<span style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">78%</span>
|
||
</div>
|
||
<div style="height:8px;background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-full);overflow:hidden">
|
||
<div style="width:78%;height:100%;background:var(--kt-ai-chart-orange);border-radius:var(--kt-ai-radius-full)"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:var(--kt-ai-space-1)">
|
||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Адаптивность</span>
|
||
<span style="font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)">88%</span>
|
||
</div>
|
||
<div style="height:8px;background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-full);overflow:hidden">
|
||
<div style="width:88%;height:100%;background:var(--kt-ai-chart-pink);border-radius:var(--kt-ai-radius-full)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:var(--kt-ai-space-4)">Ключевые выводы</h4>
|
||
<ul style="display:grid;gap:var(--kt-ai-space-3);padding-left:var(--kt-ai-space-5)">
|
||
<li style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">
|
||
<strong style="color:var(--kt-ai-fg)">Сильные стороны:</strong> Отлично структурирует мысли, приводит конкретные примеры из опыта
|
||
</li>
|
||
<li style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">
|
||
<strong style="color:var(--kt-ai-fg)">Зоны развития:</strong> Может детальнее раскрывать опыт управления командой
|
||
</li>
|
||
<li style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">
|
||
<strong style="color:var(--kt-ai-fg)">Культурное соответствие:</strong> Разделяет ценности компании, мотивирован на результат
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Попробуйте Töre уже сегодня</h2>
|
||
<p style="max-width:560px;margin:0 auto var(--kt-ai-space-8);color:var(--kt-ai-fg-muted)">
|
||
Заполните форму — мы свяжемся с вами для демонстрации платформы и обсуждения ваших задач.
|
||
</p>
|
||
<form id="demoForm" style="max-width:480px;margin:0 auto;display:grid;gap:var(--kt-ai-space-5)">
|
||
<div class="kt-ai-field">
|
||
<label for="name" style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-2)">Ваше имя</label>
|
||
<input type="text" id="name" class="kt-ai-input" placeholder="Иван Петров" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="email" style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-2)">Рабочий email</label>
|
||
<input type="email" id="email" class="kt-ai-input" placeholder="ivan@company.kz" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="company" style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-2)">Компания</label>
|
||
<input type="text" id="company" class="kt-ai-input" placeholder="Название компании">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="message" style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-2)">Комментарий</label>
|
||
<textarea id="message" class="kt-ai-textarea" rows="4" placeholder="Расскажите о ваших задачах..."></textarea>
|
||
</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg" style="width:100%">Отправить заявку</button>
|
||
<p id="formStatus" style="text-align:center;font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);display:none"></p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">© 2026 Töre AI, Казахстан</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Интеллектуальная платформа интервьюирования</span>
|
||
</footer>
|
||
|
||
<script>
|
||
const STORAGE_KEY = 'tore_demo_leads';
|
||
const form = document.getElementById('demoForm');
|
||
const formStatus = document.getElementById('formStatus');
|
||
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const lead = {
|
||
name: document.getElementById('name').value,
|
||
email: document.getElementById('email').value,
|
||
company: document.getElementById('company').value,
|
||
message: document.getElementById('message').value,
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
const leads = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
|
||
leads.push(lead);
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(leads));
|
||
form.reset();
|
||
formStatus.textContent = 'Заявка отправлена! Мы свяжемся с вами в ближайшее время.';
|
||
formStatus.style.color = 'var(--kt-ai-chart-green)';
|
||
formStatus.style.display = 'block';
|
||
setTimeout(() => { formStatus.style.display = 'none'; }, 5000);
|
||
});
|
||
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId !== '#') {
|
||
e.preventDefault();
|
||
document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|