419 lines
19 KiB
HTML
419 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>Казахтелеком — Цифровой Казахстан</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">
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<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%);
|
||
}
|
||
.service-card {
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
.service-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
|
||
}
|
||
.stat-number {
|
||
font-size: var(--kt-ai-text-3xl);
|
||
font-weight: var(--kt-ai-weight-bold);
|
||
color: var(--kt-ai-primary);
|
||
}
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: var(--kt-ai-space-10);
|
||
}
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--kt-ai-border);
|
||
}
|
||
.timeline-item::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -5px;
|
||
top: var(--kt-ai-space-1);
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-primary);
|
||
}
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.reveal.in {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
.theme-toggle {
|
||
position: fixed;
|
||
bottom: var(--kt-ai-space-4);
|
||
right: var(--kt-ai-space-4);
|
||
z-index: 100;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="hero-bg">
|
||
|
||
<span class="kt-ai-chip" data-tone="orange" style="position:fixed;top:var(--kt-ai-space-2);right:var(--kt-ai-space-2);z-index:99">Демо-данные</span>
|
||
|
||
<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">
|
||
<strong>Казахтелеком</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#services">Услуги</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О компании</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Подключить</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1 class="reveal">Цифровой Казахстан — будущее уже здесь</h1>
|
||
<p class="kt-ai-hero-sub reveal">Ведущий телекоммуникационный оператор. Высокоскоростной интернет, цифровые сервисы и инновации для каждого жителя Казахстана.</p>
|
||
<div class="kt-ai-hero-actions reveal">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#services">Выбрать тариф</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#about">Узнать больше</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="services" 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 service-card reveal" data-service="fiber">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#rocket"></use></svg></div>
|
||
<h3>Домашний интернет</h3>
|
||
<p>Оптоволоконный доступ до 1 Гбит/с. Стабильное соединение для работы и развлечений.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">от 3 990 ₸/мес</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile service-card reveal" data-service="tv">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#play"></use></svg></div>
|
||
<h3>IP Телевидение</h3>
|
||
<p>Более 200 каналов в высоком качестве. Интерактивное ТВ с функцией паузы и записи.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">от 2 490 ₸/мес</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile service-card reveal" data-service="mobile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div>
|
||
<h3>Мобильная связь</h3>
|
||
<p>Безлимитные тарифы с покрытием по всему Казахстану. 5G в крупных городах.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">от 4 990 ₸/мес</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile service-card reveal" data-service="business">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#building"></use></svg></div>
|
||
<h3>Для бизнеса</h3>
|
||
<p>Корпоративные решения: облачные сервисы, виртуальная АТС, защита от DDoS.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">индивидуально</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile service-card reveal" data-service="cloud">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#layers"></use></svg></div>
|
||
<h3>Облачные сервисы</h3>
|
||
<p>Виртуальные серверы, облачное хранение данных, резервное копирование.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">от 5 990 ₸/мес</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile service-card reveal" data-service="security">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#lock"></use></svg></div>
|
||
<h3>Кибербезопасность</h3>
|
||
<p>Комплексная защита периметра сети, антивирус, родительский контроль.</p>
|
||
<div style="margin-top:var(--kt-ai-space-4)">
|
||
<span class="kt-ai-chip">от 1 990 ₸/мес</span>
|
||
</div>
|
||
</article>
|
||
</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-kpi-strip" style="margin-top:var(--kt-ai-space-9)">
|
||
<div class="kt-ai-kpi reveal">
|
||
<div class="value">12M+</div>
|
||
<div class="label">Абонентов</div>
|
||
<div class="hint">по всему Казахстану</div>
|
||
</div>
|
||
<div class="kt-ai-kpi reveal">
|
||
<div class="value">98%</div>
|
||
<div class="label">Покрытие</div>
|
||
<div class="hint">населённых пунктов</div>
|
||
</div>
|
||
<div class="kt-ai-kpi reveal">
|
||
<div class="value">25+</div>
|
||
<div class="label">Лет работы</div>
|
||
<div class="hint">с 1997 года</div>
|
||
</div>
|
||
<div class="kt-ai-kpi reveal">
|
||
<div class="value">4.8</div>
|
||
<div class="label">Рейтинг</div>
|
||
<div class="hint">в приложениях</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" 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="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kt-ai-space-8);margin-top:var(--kt-ai-space-9)">
|
||
<div class="reveal">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-4)">Наша миссия</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Обеспечение качественного и доступного телекоммуникационного сервиса для каждого жителя Казахстана. Мы строим цифровую инфраструктуру будущего.</p>
|
||
<div style="margin-top:var(--kt-ai-space-6">
|
||
<div class="timeline-item" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<strong>1997</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-1)">Основание компании</p>
|
||
</div>
|
||
<div class="timeline-item" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<strong>2010</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-1)">Запуск 4G сети</p>
|
||
</div>
|
||
<div class="timeline-item" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<strong>2020</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-1)">Цифровая трансформация</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>2026</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-1)">Развитие 5G и IoT</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<img src="https://picsum.photos/seed/kt-office/600/400" alt="Офис Казахтелеком" style="width:100%;border-radius:var(--kt-ai-radius-3xl);box-shadow:0 8px 16px rgba(0,0,0,0.1)">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--kt-ai-space-4);margin-top:var(--kt-ai-space-4)">
|
||
<img src="https://picsum.photos/seed/kt-team/280/200" alt="Команда" style="width:100%;border-radius:var(--kt-ai-radius-xl)">
|
||
<img src="https://picsum.photos/seed/kt-tech/280/200" alt="Технологии" style="width:100%;border-radius:var(--kt-ai-radius-xl)">
|
||
</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-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<div style="display:flex;align-items:flex-start;gap:var(--kt-ai-space-4)">
|
||
<div style="padding:var(--kt-ai-space-2);background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-lg)">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary)"><use href="#rocket"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Высокая скорость</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Собственная оптоволоконная сеть по всему Казахстану. Гарантированная скорость по договору.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<div style="display:flex;align-items:flex-start;gap:var(--kt-ai-space-4)">
|
||
<div style="padding:var(--kt-ai-space-2);background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-lg)">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary)"><use href="#check-circle"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Надёжность</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Резервирование каналов, круглосуточный мониторинг. Стабильная работа 24/7.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<div style="display:flex;align-items:flex-start;gap:var(--kt-ai-space-4)">
|
||
<div style="padding:var(--kt-ai-space-2);background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-lg)">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary)"><use href="#users"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Поддержка</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Техподдержка 24/7, выезд специалистов в день обращения. Онлайн-кабинет.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<div style="display:flex;align-items:flex-start;gap:var(--kt-ai-space-4)">
|
||
<div style="padding:var(--kt-ai-space-2);background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-lg)">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-primary)"><use href="#sparkles"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Инновации</h3>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Постоянное обновление оборудования. Внедрение новых технологий и сервисов.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Подключиться просто</h2>
|
||
<p style="max-width:600px;margin:var(--kt-ai-space-4) auto">Оставьте заявку — мы перезвоним в течение 15 минут и подберём оптимальный тариф. Подключение в день обращения.</p>
|
||
<form id="contactForm" style="max-width:420px;margin:var(--kt-ai-space-6) auto" onsubmit="handleSubmit(event)">
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Иван Иванов" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<label>Телефон</label>
|
||
<input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<label>Интересующая услуга</label>
|
||
<select class="kt-ai-select" name="service">
|
||
<option value="fiber">Домашний интернет</option>
|
||
<option value="tv">IP Телевидение</option>
|
||
<option value="mobile">Мобильная связь</option>
|
||
<option value="business">Для бизнеса</option>
|
||
</select>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить заявку</button>
|
||
</form>
|
||
<div id="formSuccess" style="display:none;text-align:center;padding:var(--kt-ai-space-6)">
|
||
<svg class="kt-icon kt-icon-lg" style="color:var(--kt-ai-chart-green);margin-bottom:var(--kt-ai-space-3)"><use href="#check-circle"></use></svg>
|
||
<h3>Заявка отправлена!</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Менеджер свяжется с вами в ближайшее время.</p>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="resetForm()" style="margin-top:var(--kt-ai-space-4)">Отправить ещё одну</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" height="22">
|
||
<span>© 2026 АО «Казахтелеком»</span>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div style="display:flex;gap:var(--kt-ai-space-6)">
|
||
<a class="kt-ai-link" href="#">Политика конфиденциальности</a>
|
||
<a class="kt-ai-link" href="#">Публичная оферта</a>
|
||
<a class="kt-ai-link" href="#">Контакты</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<button class="kt-ai-btn theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">
|
||
<svg class="kt-icon" id="themeIcon"><use href="#moon"></use></svg>
|
||
</button>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
// Плавное появление при скролле
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('in');
|
||
}
|
||
});
|
||
}, { threshold: 0.15 });
|
||
|
||
document.querySelectorAll('.reveal').forEach(function(el) {
|
||
io.observe(el);
|
||
});
|
||
|
||
// Переключатель темы
|
||
function toggleTheme() {
|
||
var html = document.documentElement;
|
||
var current = html.getAttribute('data-theme');
|
||
var next = current === 'light' ? 'dark' : 'light';
|
||
html.setAttribute('data-theme', next);
|
||
localStorage.setItem('kt-theme', next);
|
||
updateThemeIcon(next);
|
||
}
|
||
|
||
function updateThemeIcon(theme) {
|
||
var icon = document.getElementById('themeIcon');
|
||
if (icon) {
|
||
icon.innerHTML = '<use href="#' + (theme === 'light' ? 'moon' : 'sun') + '"></use>';
|
||
}
|
||
}
|
||
|
||
// Инициализация темы
|
||
var savedTheme = localStorage.getItem('kt-theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
updateThemeIcon(savedTheme);
|
||
|
||
// Обработка формы
|
||
function handleSubmit(e) {
|
||
e.preventDefault();
|
||
var form = document.getElementById('contactForm');
|
||
var formData = new FormData(form);
|
||
var data = {
|
||
name: formData.get('name'),
|
||
phone: formData.get('phone'),
|
||
service: formData.get('service'),
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
// Сохранение в localStorage
|
||
var submissions = JSON.parse(localStorage.getItem('kt-submissions') || '[]');
|
||
submissions.push(data);
|
||
localStorage.setItem('kt-submissions', JSON.stringify(submissions));
|
||
|
||
// Показ успеха
|
||
form.style.display = 'none';
|
||
document.getElementById('formSuccess').style.display = 'block';
|
||
|
||
console.log('Заявка сохранена:', data);
|
||
console.log('Всего заявок:', submissions.length);
|
||
}
|
||
|
||
function resetForm() {
|
||
document.getElementById('contactForm').reset();
|
||
document.getElementById('contactForm').style.display = 'block';
|
||
document.getElementById('formSuccess').style.display = 'none';
|
||
}
|
||
|
||
// Клик по карточкам услуг
|
||
document.querySelectorAll('.service-card').forEach(function(card) {
|
||
card.addEventListener('click', function() {
|
||
var service = this.getAttribute('data-service');
|
||
var select = document.querySelector('select[name="service"]');
|
||
if (select) {
|
||
select.value = service;
|
||
}
|
||
document.getElementById('contacts').scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
});
|
||
|
||
console.log('Казахтелеком лендинг загружен. Тема:', savedTheme);
|
||
console.log('Сохранённые заявки:', JSON.parse(localStorage.getItem('kt-submissions') || '[]').length);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|