310 lines
19 KiB
HTML
310 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>KazTelecom Estate — Производственная недвижимость от АО «Казахтелеком»</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; }
|
||
.kt-ai-brand { display:flex;align-items:center;gap:var(--kt-ai-space-3); }
|
||
.kt-ai-brand img { height:28px; }
|
||
.object-card { display:flex;flex-direction:column;gap:var(--kt-ai-space-3); }
|
||
.object-card img { width:100%;height:200px;object-fit:cover;border-radius:var(--kt-ai-radius-3xl); }
|
||
.object-meta { display:flex;gap:var(--kt-ai-space-2);flex-wrap:wrap; }
|
||
.object-chip { font-size:var(--kt-ai-text-sm);padding:2px 8px;border-radius:var(--kt-ai-radius-md);background:var(--kt-ai-bg-soft);color:var(--kt-ai-fg-muted); }
|
||
.object-price { font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold);color:var(--kt-blue-600);margin-top:auto; }
|
||
.filters { display:flex;gap:var(--kt-ai-space-3);flex-wrap:wrap;margin-bottom:var(--kt-ai-space-6); }
|
||
.filters select, .filters input { padding:8px 12px;border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-md);background:var(--kt-ai-bg);color:var(--kt-ai-fg); }
|
||
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--kt-ai-space-6); }
|
||
.stat-card { text-align:center;padding:var(--kt-ai-space-6);background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-2xl); }
|
||
.stat-number { font-size:var(--kt-ai-text-4xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-blue-600); }
|
||
.stat-label { color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2); }
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
.hero-kt { background:linear-gradient(135deg, rgba(132,197,240,0.15) 0%, var(--kt-snow) 100%); }
|
||
.kt-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--kt-blue-600);color:var(--kt-white);border-radius:var(--kt-ai-radius-full);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium); }
|
||
.kt-kt-logo { width:48px;height:48px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
|
||
<header class="kt-ai-pagehead" style="background:var(--kt-snow);border-bottom:1px solid var(--kt-blue-200)">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<a class="kt-ai-brand" href="#">
|
||
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком">
|
||
<strong style="color:var(--kt-blue-600)">KazTelecom Estate</strong>
|
||
</a>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#catalog">Каталог объектов</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 hero-kt" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<div style="display:flex;justify-content:center;margin-bottom:var(--kt-ai-space-5)">
|
||
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" style="height:56px">
|
||
</div>
|
||
<div class="kt-badge" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<svg class="kt-icon"><use href="#building"></use></svg>
|
||
<span>АО «Казахтелеком»</span>
|
||
</div>
|
||
<h1 style="color:var(--kt-blue-600)">Производственная недвижимость от национального телеком-оператора</h1>
|
||
<p class="kt-ai-hero-sub">Здания АТС, склады, цеха и земельные участки с документами. Надёжность государственного партнёра. Подберём и покажем объект за 1 день.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Выбрать объект</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#contacts">Получить консультацию</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2 style="color:var(--kt-blue-600)">Доступные объекты</h2>
|
||
<p>Все объекты в собственности АО «Казахтелеком», готовы к сделке</p>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<select id="filter-type">
|
||
<option value="">Все типы</option>
|
||
<option value="warehouse">Склады</option>
|
||
<option value="workshop">Цеха</option>
|
||
<option value="hangar">Ангары</option>
|
||
<option value="land">Земельные участки</option>
|
||
</select>
|
||
<select id="filter-city">
|
||
<option value="">Все города</option>
|
||
<option value="Алматы">Алматы</option>
|
||
<option value="Астана">Астана</option>
|
||
<option value="Шымкент">Шымкент</option>
|
||
<option value="Караганда">Караганда</option>
|
||
<option value="Актау">Актау</option>
|
||
</select>
|
||
<input type="number" id="filter-area" placeholder="Площадь до, м²" style="width:180px">
|
||
<input type="number" id="filter-price" placeholder="Цена до, млн ₸" style="width:180px">
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="resetFilters()">Сбросить</button>
|
||
</div>
|
||
|
||
<div class="kt-ai-grid" id="objects-grid" style="margin-top:var(--kt-ai-space-6)">
|
||
<!-- Объекты загружаются через JS -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2 style="color:var(--kt-blue-600)">Преимущества работы с АО «Казахтелеком»</h2>
|
||
<p>Государственный партнёр с 150-летней историей</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#building"></use></svg></div>
|
||
<h3>Государственная компания</h3>
|
||
<p>100% государство в акционерах — прозрачность и надёжность каждой сделки</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#file"></use></svg></div>
|
||
<h3>Все документы готовы</h3>
|
||
<p>Право собственности зарегистрировано, обременений нет</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div>
|
||
<h3>Инфраструктура</h3>
|
||
<p>Электричество, вода, канализация, оптоволокно — всё подключено</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#layers"></use></svg></div>
|
||
<h3>Охрана и мониторинг</h3>
|
||
<p>Видеонаблюдение, датчики, военизированная охрана — объекты под контролем</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#chart"></use></svg></div>
|
||
<h3>Прозрачная цена</h3>
|
||
<p>Рыночная оценка, никаких скрытых комиссий и доплат</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#users"></use></svg></div>
|
||
<h3>Сопровождение сделки</h3>
|
||
<p>Помощь в оформлении, юридическая поддержка на всех этапах</p>
|
||
</article>
|
||
</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 style="color:var(--kt-blue-600)">АО «Казахтелеком» — национальный оператор</h2>
|
||
<p>Крупнейшая телекоммуникационная компания Казахстана с развитой инфраструктурой</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-6)">
|
||
<div class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<h3 style="margin:0 0 var(--kt-ai-space-3)">О компании</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">АО «Казахтелеком» — крупнейший телекоммуникационный оператор Казахстана. Работаем с 1995 года, предоставляем услуги связи, ИТ и инфраструктурные решения. В собственности компании — развитая сеть производственных объектов по всему Казахстану.</p>
|
||
</div>
|
||
<div class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
|
||
<h3 style="margin:0 0 var(--kt-ai-space-3)">Преимущества для покупателей</h3>
|
||
<ul style="margin:0;padding-left:var(--kt-ai-space-5);color:var(--kt-ai-fg-muted);line-height:1.8">
|
||
<li>Прямая продажа от собственника — без посредников</li>
|
||
<li>Готовые документы — право собственности зарегистрировано</li>
|
||
<li>Инфраструктура — электричество, вода, оптоволокно</li>
|
||
<li>Гибкие условия — рассрочка, лизинг, индивидуальные условия</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta" style="background:linear-gradient(135deg, var(--kt-blue-50) 0%, var(--kt-snow) 100%)">
|
||
<div class="kt-ai-wrap">
|
||
<h2 style="color:var(--kt-blue-600)">Получить консультацию по объектам</h2>
|
||
<p>Оставьте заявку — специалист по недвижимости перезвонит в течение 15 минут, ответит на вопросы и согласует время просмотра</p>
|
||
<form action="https://formsubmit.co/realty@kazakhtelecom.kz" method="POST" style="max-width:420px;margin:var(--kt-ai-space-6) auto">
|
||
<div class="kt-ai-field">
|
||
<label>Имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Телефон</label>
|
||
<input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Какой объект интересует?</label>
|
||
<select class="kt-ai-select" name="object-type">
|
||
<option value="">Выберите тип объекта</option>
|
||
<option value="warehouse">Склад</option>
|
||
<option value="workshop">Производственный цех</option>
|
||
<option value="hangar">Ангар</option>
|
||
<option value="land">Земельный участок</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Комментарий</label>
|
||
<textarea class="kt-ai-textarea" name="comment" placeholder="Площадь, локация, дополнительные пожелания" rows="3"></textarea>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить заявку</button>
|
||
<p style="font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted);text-align:center;margin-top:var(--kt-ai-space-3)">Нажимая кнопку, вы соглашаетесь на обработку персональных данных</p>
|
||
</form>
|
||
<div style="margin-top:var(--kt-ai-space-10);text-align:center">
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-4)">Департамент по работе с недвижимостью</p>
|
||
<div style="display:flex;gap:var(--kt-ai-space-4);justify-content:center;flex-wrap:wrap">
|
||
<a class="kt-ai-btn" data-variant="ghost" href="tel:+77271234567">
|
||
<svg class="kt-icon" style="margin-right:6px"><use href="#megaphone"></use></svg>
|
||
+7 (727) 123-45-67
|
||
</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="https://wa.me/77771234567?text=Здравствуйте! Интересует производственная недвижимость от Казахтелеком">
|
||
<svg class="kt-icon" style="margin-right:6px"><use href="#chat"></use></svg>
|
||
Написать в WhatsApp
|
||
</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="mailto:realty@kazakhtelecom.kz">
|
||
<svg class="kt-icon" style="margin-right:6px"><use href="#mail"></use></svg>
|
||
realty@kazakhtelecom.kz
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="background:var(--kt-blue-700)">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);width:100%">
|
||
<img src="design-system/brand/kazakhtelecom-logo-white.png" alt="Казахтелеком" style="height:24px">
|
||
<span style="color:var(--kt-white)">© 2026 АО «Казахтелеком». Все права защищены</span>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-gray-300)">г. Алматы, ул. Байтурсынова, 112А | +7 (727) 123-45-67</span>
|
||
</footer>
|
||
|
||
<script>
|
||
// Данные объектов (мок-данные для демонстрации)
|
||
const objects = [
|
||
{ id:1, type:'warehouse', title:'Складской комплекс, ул. Райымбек', area:1200, price:450, city:'Алматы', image:'https://loremflickr.com/800/600/warehouse', status:'В продаже' },
|
||
{ id:2, type:'workshop', title:'Производственный цех с кран-балкой', area:800, price:320, city:'Астана', image:'https://loremflickr.com/800/600/factory', status:'В продаже' },
|
||
{ id:3, type:'hangar', title:'Тёплый ангар, трасса Алматы-Бишкек', area:2500, price:680, city:'Алматы', image:'https://loremflickr.com/800/600/industrial', status:'В продаже' },
|
||
{ id:4, type:'land', title:'Участок под производство, 1.2 га', area:12000, price:180, city:'Караганда', image:'https://loremflickr.com/800/600/land', status:'В продаже' },
|
||
{ id:5, type:'warehouse', title:'Склад с офисом и КПП', area:650, price:280, city:'Алматы', image:'https://loremflickr.com/800/600/storage', status:'В продаже' },
|
||
{ id:6, type:'workshop', title:'Цех металлообработки, ж/д ветка', area:1500, price:520, city:'Актау', image:'https://loremflickr.com/800/600/workshop', status:'В продаже' },
|
||
{ id:7, type:'warehouse', title:'Логистический центр, ворота 6 шт', area:3200, price:890, city:'Шымкент', image:'https://loremflickr.com/800/600/warehouse', status:'В продаже' },
|
||
{ id:8, type:'land', title:'Промышленная зона, все коммуникации', area:8500, price:125, city:'Павлодар', image:'https://loremflickr.com/800/600/industrial', status:'В продаже' },
|
||
];
|
||
|
||
const typeLabels = { warehouse:'Склад', workshop:'Цех', hangar:'Ангар', land:'Участок' };
|
||
|
||
function renderObjects(filtered) {
|
||
const grid = document.getElementById('objects-grid');
|
||
grid.innerHTML = filtered.map(obj => `
|
||
<article class="kt-ai-card object-card reveal" data-id="${obj.id}">
|
||
<img src="${obj.image}" alt="${obj.title}" loading="lazy">
|
||
<div>
|
||
<h3 style="margin:0">${obj.title}</h3>
|
||
<div class="object-meta" style="margin-top:8px">
|
||
<span class="object-chip">${typeLabels[obj.type]}</span>
|
||
<span class="object-chip">${obj.area} м²</span>
|
||
<span class="object-chip">${obj.city}</span>
|
||
<span class="object-chip" style="background:var(--kt-ai-primary);color:var(--kt-ai-bg)">${obj.status}</span>
|
||
</div>
|
||
<div class="object-price">${obj.price} млн ₸</div>
|
||
</div>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Оставить заявку</a>
|
||
</article>
|
||
`).join('');
|
||
|
||
// Re-init reveal animation
|
||
document.querySelectorAll('.reveal').forEach(el => {
|
||
el.classList.remove('in');
|
||
io.observe(el);
|
||
});
|
||
}
|
||
|
||
function filterObjects() {
|
||
const type = document.getElementById('filter-type').value;
|
||
const city = document.getElementById('filter-city').value;
|
||
const area = document.getElementById('filter-area').value;
|
||
const price = document.getElementById('filter-price').value;
|
||
|
||
let filtered = objects;
|
||
if (type) filtered = filtered.filter(o => o.type === type);
|
||
if (city) filtered = filtered.filter(o => o.city === city);
|
||
if (area) filtered = filtered.filter(o => o.area <= parseInt(area));
|
||
if (price) filtered = filtered.filter(o => o.price <= parseInt(price));
|
||
|
||
renderObjects(filtered);
|
||
}
|
||
|
||
function resetFilters() {
|
||
document.getElementById('filter-type').value = '';
|
||
document.getElementById('filter-city').value = '';
|
||
document.getElementById('filter-area').value = '';
|
||
document.getElementById('filter-price').value = '';
|
||
renderObjects(objects);
|
||
}
|
||
|
||
// Intersection Observer для анимации появления
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); });
|
||
}, { threshold: 0.15 });
|
||
|
||
// Инициализация
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
renderObjects(objects);
|
||
|
||
// Навешиваем обработчики на фильтры
|
||
['filter-type', 'filter-city', 'filter-area', 'filter-price'].forEach(id => {
|
||
document.getElementById(id).addEventListener('input', filterObjects);
|
||
document.getElementById(id).addEventListener('change', filterObjects);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|