Kukharenko/sozday-tz-dlya-sayta-po-prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2: стиль Казахтелеком, усилен акцент на покупателей

Browse Source
This commit is contained in:
Kukharenko 2026-09-16 09:54:11 +00:00
parent 29e0f2c138
commit c52a592981
1 changed files with 90 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ProdEstate — Производственная недвижимость</title>
<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">
@ -26,6 +26,8 @@
.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, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%); }
.kt-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--kt-ai-primary);color:var(--kt-ai-bg);border-radius:var(--kt-ai-radius-full);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium); }
</style>
</head>
<body>
@ -35,23 +37,27 @@
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<a class="kt-ai-brand" href="#">
<img src="design-system/brand/kt-ai-logo.png" alt="ProdEstate">
<strong>ProdEstate</strong>
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком">
<strong>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="#catalog">Каталог объектов</a>
<a class="kt-ai-btn" data-variant="ghost" href="#about">О компании</a>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Оставить заявку</a>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Получить консультацию</a>
</div>
</header>
<section class="kt-ai-hero" data-align="center">
<section class="kt-ai-hero hero-kt" data-align="center">
<div class="kt-ai-wrap">
<h1>Готовые производственные объекты для вашего бизнеса</h1>
<p class="kt-ai-hero-sub">Склады, цеха, ангары и земельные участки — всё с документами и коммуникациями. Подберём объект за 1 день.</p>
<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>Производственная недвижимость от национального телеком-оператора</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>
<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>
@ -59,8 +65,8 @@
<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>Каталог объектов</h2>
<p>Выберите подходящий объект по типу, площади и бюджету</p>
<h2>Доступные объекты</h2>
<p>Все объекты в собственности АО «Казахтелеком», готовы к сделке</p>
</div>
<div class="filters">
@ -93,39 +99,39 @@
<section class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Почему выбирают нас</h2>
<p>Полное сопровождение сделки и проверенные объекты</p>
<h2>Преимущества работы с АО «Казахтелеком»</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="#check-circle"></use></svg></div>
<h3>Документы готовы</h3>
<p>Все объекты оформлены, право собственности зарегистрировано</p>
<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>
<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="#clock"></use></svg></div>
<h3>Доступ 24/7</h3>
<p>Круглосуточный доступ к объектам, охраняемая территория</p>
<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="#lock"></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="#package"></use></svg></div>
<h3>Логистика</h3>
<p>Удобные подъездные пути, ж/д ветка, близость к трассам</p>
<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>
<h3>Сопровождение сделки</h3>
<p>Помощь в оформлении, юридическая поддержка на всех этапах</p>
</article>
</div>
</div>
@ -134,25 +140,22 @@
<section id="about" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>О компании</h2>
<p>Работаем на рынке производственной недвижимости с 2010 года</p>
<h2>АО «Казахтелеком» — национальный оператор</h2>
<p>Крупнейшая телекоммуникационная компания Казахстана с развитой инфраструктурой</p>
</div>
<div class="stats-grid">
<div class="stat-card reveal">
<div class="stat-number">14+</div>
<div class="stat-label">лет на рынке</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="stat-card reveal">
<div class="stat-number">250+</div>
<div class="stat-label">проданных объектов</div>
</div>
<div class="stat-card reveal">
<div class="stat-number">1.2 млн м²</div>
<div class="stat-label">общая площадь</div>
</div>
<div class="stat-card reveal">
<div class="stat-number">98%</div>
<div class="stat-label">довольных клиентов</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>
@ -160,9 +163,9 @@
<section id="contacts" class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Оставить заявку на просмотр</h2>
<p>Заполните форму — перезвоним в течение 15 минут и подберём объекты под ваши задачи</p>
<form action="https://formsubmit.co/example@email.com" method="POST" style="max-width:420px;margin:var(--kt-ai-space-6) auto">
<h2>Получить консультацию по объектам</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>
@ -171,22 +174,37 @@
<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>
<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-8);text-align:center">
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Или свяжитесь с нами напрямую:</p>
<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:+77771234567">
<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 (777) 123-45-67
+7 (727) 123-45-67
</a>
<a class="kt-ai-btn" data-variant="primary" href="https://wa.me/77771234567?text=Здравствуйте! Интересует производственная недвижимость">
<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
Написать в 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>
@ -194,20 +212,25 @@
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 ProdEstate. Все права защищены</span>
<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:20px;opacity:0.9">
<span style="color:var(--kt-ai-fg-muted)">© 2026 АО «Казахтелеком». Все права защищены</span>
</div>
<span class="kt-ai-spacer"></span>
<span style="color:var(--kt-ai-fg-muted)">г. Алматы, ул. Примерная, 100 | info@prodestate.kz</span>
<span style="color:var(--kt-ai-fg-muted)">г. Алматы, ул. Байтурсынова, 112А | +7 (727) 123-45-67</span>
</footer>
<script>
// Данные объектов (мок-данные для демонстрации)
const objects = [
{ id:1, type:'warehouse', title:'Складской комплекс 1200 м²', area:1200, price:450, city:'Алматы', image:'https://loremflickr.com/800/600/warehouse', status:'В продаже' },
{ id:2, type:'workshop', title:'Производственный цех 800 м²', area:800, price:320, city:'Астана', image:'https://loremflickr.com/800/600/factory', status:'В продаже' },
{ id:3, type:'hangar', title:'Ангар тёплый 2500 м²', 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:'Склад с офисом 650 м²', area:650, price:280, city:'Алматы', image:'https://loremflickr.com/800/600/storage', status:'В продаже' },
{ id:6, type:'workshop', title:'Цех металлообработки 1500 м²', area:1500, price:520, city:'Актау', image:'https://loremflickr.com/800/600/workshop', status:'Аренда' },
{ 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:'Участок' };