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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <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-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.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-components.css">
@ -26,6 +26,8 @@
.stat-label { color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2); } .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{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none} .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> </style>
</head> </head>
<body> <body>
@ -35,23 +37,27 @@
<header class="kt-ai-pagehead"> <header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in"> <div class="kt-ai-wrap kt-ai-pagehead-in">
<a class="kt-ai-brand" href="#"> <a class="kt-ai-brand" href="#">
<img src="design-system/brand/kt-ai-logo.png" alt="ProdEstate"> <img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком">
<strong>ProdEstate</strong> <strong>KazTelecom Estate</strong>
</a> </a>
<span class="kt-ai-spacer"></span> <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="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> </div>
</header> </header>
<section class="kt-ai-hero" data-align="center"> <section class="kt-ai-hero hero-kt" data-align="center">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<h1>Готовые производственные объекты для вашего бизнеса</h1> <div class="kt-badge" style="margin-bottom:var(--kt-ai-space-4)">
<p class="kt-ai-hero-sub">Склады, цеха, ангары и земельные участки — всё с документами и коммуникациями. Подберём объект за 1 день.</p> <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"> <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-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-size="lg" href="#contacts">Получить консультацию</a>
</div> </div>
</div> </div>
</section> </section>
@ -59,8 +65,8 @@
<section id="catalog" class="kt-ai-section" data-divider="true"> <section id="catalog" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide"> <div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head"> <div class="kt-ai-section-head">
<h2>Каталог объектов</h2> <h2>Доступные объекты</h2>
<p>Выберите подходящий объект по типу, площади и бюджету</p> <p>Все объекты в собственности АО «Казахтелеком», готовы к сделке</p>
</div> </div>
<div class="filters"> <div class="filters">
@ -93,39 +99,39 @@
<section class="kt-ai-section" data-divider="true"> <section class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<div class="kt-ai-section-head"> <div class="kt-ai-section-head">
<h2>Почему выбирают нас</h2> <h2>Преимущества работы с АО «Казахтелеком»</h2>
<p>Полное сопровождение сделки и проверенные объекты</p> <p>Государственный партнёр с 150-летней историей</p>
</div> </div>
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)"> <div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal"> <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> <div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#building"></use></svg></div>
<h3>Документы готовы</h3> <h3>Государственная компания</h3>
<p>Все объекты оформлены, право собственности зарегистрировано</p> <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>
<article class="kt-ai-tile reveal"> <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> <div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div>
<h3>Коммуникации</h3> <h3>Инфраструктура</h3>
<p>Электричество, вода, отопление — всё подключено и работает</p> <p>Электричество, вода, канализация, оптоволокно — всё подключено</p>
</article> </article>
<article class="kt-ai-tile reveal"> <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> <div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#layers"></use></svg></div>
<h3>Доступ 24/7</h3> <h3>Охрана и мониторинг</h3>
<p>Круглосуточный доступ к объектам, охраняемая территория</p> <p>Видеонаблюдение, датчики, военизированная охрана — объекты под контролем</p>
</article> </article>
<article class="kt-ai-tile reveal"> <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> <div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#chart"></use></svg></div>
<h3>Охрана</h3> <h3>Прозрачная цена</h3>
<p>Видеонаблюдение, военизированная охрана, КПП</p> <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>
</article> </article>
<article class="kt-ai-tile reveal"> <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> <div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#users"></use></svg></div>
<h3>Сопровождение</h3> <h3>Сопровождение сделки</h3>
<p>Помощь в оформлении, юридическая поддержка, гарантия</p> <p>Помощь в оформлении, юридическая поддержка на всех этапах</p>
</article> </article>
</div> </div>
</div> </div>
@ -134,25 +140,22 @@
<section id="about" class="kt-ai-section" data-divider="true"> <section id="about" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<div class="kt-ai-section-head"> <div class="kt-ai-section-head">
<h2>О компании</h2> <h2>АО «Казахтелеком» — национальный оператор</h2>
<p>Работаем на рынке производственной недвижимости с 2010 года</p> <p>Крупнейшая телекоммуникационная компания Казахстана с развитой инфраструктурой</p>
</div> </div>
<div class="stats-grid"> <div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-6)">
<div class="stat-card reveal"> <div class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
<div class="stat-number">14+</div> <h3 style="margin:0 0 var(--kt-ai-space-3)">О компании</h3>
<div class="stat-label">лет на рынке</div> <p style="color:var(--kt-ai-fg-muted)">АО «Казахтелеком» — крупнейший телекоммуникационный оператор Казахстана. Работаем с 1995 года, предоставляем услуги связи, ИТ и инфраструктурные решения. В собственности компании — развитая сеть производственных объектов по всему Казахстану.</p>
</div> </div>
<div class="stat-card reveal"> <div class="kt-ai-card reveal" style="padding:var(--kt-ai-space-6)">
<div class="stat-number">250+</div> <h3 style="margin:0 0 var(--kt-ai-space-3)">Преимущества для покупателей</h3>
<div class="stat-label">проданных объектов</div> <ul style="margin:0;padding-left:var(--kt-ai-space-5);color:var(--kt-ai-fg-muted);line-height:1.8">
</div> <li>Прямая продажа от собственника — без посредников</li>
<div class="stat-card reveal"> <li>Готовые документы — право собственности зарегистрировано</li>
<div class="stat-number">1.2 млн м²</div> <li>Инфраструктура — электричество, вода, оптоволокно</li>
<div class="stat-label">общая площадь</div> <li>Гибкие условия — рассрочка, лизинг, индивидуальные условия</li>
</div> </ul>
<div class="stat-card reveal">
<div class="stat-number">98%</div>
<div class="stat-label">довольных клиентов</div>
</div> </div>
</div> </div>
</div> </div>
@ -160,9 +163,9 @@
<section id="contacts" class="kt-ai-cta"> <section id="contacts" class="kt-ai-cta">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<h2>Оставить заявку на просмотр</h2> <h2>Получить консультацию по объектам</h2>
<p>Заполните форму — перезвоним в течение 15 минут и подберём объекты под ваши задачи</p> <p>Оставьте заявку — специалист по недвижимости перезвонит в течение 15 минут, ответит на вопросы и согласует время просмотра</p>
<form action="https://formsubmit.co/example@email.com" method="POST" style="max-width:420px;margin:var(--kt-ai-space-6) auto"> <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"> <div class="kt-ai-field">
<label>Имя</label> <label>Имя</label>
<input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required> <input class="kt-ai-input" name="name" placeholder="Как к вам обращаться" required>
@ -171,22 +174,37 @@
<label>Телефон</label> <label>Телефон</label>
<input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required> <input class="kt-ai-input" name="phone" placeholder="+7 (___) ___-__-__" required>
</div> </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"> <div class="kt-ai-field">
<label>Комментарий</label> <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> </div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">Отправить заявку</button> <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> </form>
<div style="margin-top:var(--kt-ai-space-8);text-align:center"> <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-3)">Или свяжитесь с нами напрямую:</p> <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"> <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> <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>
<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> <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> </a>
</div> </div>
</div> </div>
@ -194,20 +212,25 @@
</section> </section>
<footer class="kt-ai-wrap kt-ai-pagefoot"> <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 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> </footer>
<script> <script>
// Данные объектов (мок-данные для демонстрации) // Данные объектов (мок-данные для демонстрации)
const objects = [ const objects = [
{ id:1, type:'warehouse', title:'Складской комплекс 1200 м²', area:1200, price:450, city:'Алматы', image:'https://loremflickr.com/800/600/warehouse', status:'В продаже' }, { id:1, type:'warehouse', title:'Складской комплекс, ул. Райымбек', 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:2, type:'workshop', title:'Производственный цех с кран-балкой', 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: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: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:5, type:'warehouse', title:'Склад с офисом и КПП', 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: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:'Участок' }; const typeLabels = { warehouse:'Склад', workshop:'Цех', hangar:'Ангар', land:'Участок' };