v3: бело-голубая гамма Казахтелеком, логотип в Hero

This commit is contained in:
Kukharenko 2026-09-16 09:56:20 +00:00
parent c52a592981
commit 99036662a7

View File

@ -12,33 +12,34 @@
<style> <style>
a.kt-ai-btn { text-decoration: none; } a.kt-ai-btn { text-decoration: none; }
.kt-ai-brand { display:flex;align-items:center;gap:var(--kt-ai-space-3); } .kt-ai-brand { display:flex;align-items:center;gap:var(--kt-ai-space-3); }
.kt-ai-brand img { height:22px; } .kt-ai-brand img { height:28px; }
.object-card { display:flex;flex-direction:column;gap:var(--kt-ai-space-3); } .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-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-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-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-ai-primary);margin-top:auto; } .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 { 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); } .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); } .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-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-ai-primary); } .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); } .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%); } .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 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); } .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> </style>
</head> </head>
<body> <body>
<script src="design-system/icons/kt-ai-icons.js"></script> <script src="design-system/icons/kt-ai-icons.js"></script>
<header class="kt-ai-pagehead"> <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"> <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/kazakhtelecom-logo.png" alt="Казахтелеком"> <img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком">
<strong>KazTelecom Estate</strong> <strong style="color:var(--kt-blue-600)">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>
@ -49,11 +50,14 @@
<section class="kt-ai-hero hero-kt" data-align="center"> <section class="kt-ai-hero hero-kt" data-align="center">
<div class="kt-ai-wrap"> <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)"> <div class="kt-badge" style="margin-bottom:var(--kt-ai-space-4)">
<svg class="kt-icon"><use href="#building"></use></svg> <svg class="kt-icon"><use href="#building"></use></svg>
<span>От АО «Казахтелеком»</span> <span>АО «Казахтелеком»</span>
</div> </div>
<h1>Производственная недвижимость от национального телеком-оператора</h1> <h1 style="color:var(--kt-blue-600)">Производственная недвижимость от национального телеком-оператора</h1>
<p class="kt-ai-hero-sub">Склады, цеха и земельные участки с документами. Надёжность государственного партнёра. Подберём и покажем объект за 1 день.</p> <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>
@ -65,7 +69,7 @@
<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 style="color:var(--kt-blue-600)">Доступные объекты</h2>
<p>Все объекты в собственности АО «Казахтелеком», готовы к сделке</p> <p>Все объекты в собственности АО «Казахтелеком», готовы к сделке</p>
</div> </div>
@ -99,7 +103,7 @@
<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 style="color:var(--kt-blue-600)">Преимущества работы с АО «Казахтелеком»</h2>
<p>Государственный партнёр с 150-летней историей</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)">
@ -140,7 +144,7 @@
<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 style="color:var(--kt-blue-600)">АО «Казахтелеком» — национальный оператор</h2>
<p>Крупнейшая телекоммуникационная компания Казахстана с развитой инфраструктурой</p> <p>Крупнейшая телекоммуникационная компания Казахстана с развитой инфраструктурой</p>
</div> </div>
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-6)"> <div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-6)">
@ -161,9 +165,9 @@
</div> </div>
</section> </section>
<section id="contacts" class="kt-ai-cta"> <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"> <div class="kt-ai-wrap">
<h2>Получить консультацию по объектам</h2> <h2 style="color:var(--kt-blue-600)">Получить консультацию по объектам</h2>
<p>Оставьте заявку — специалист по недвижимости перезвонит в течение 15 минут, ответит на вопросы и согласует время просмотра</p> <p>Оставьте заявку — специалист по недвижимости перезвонит в течение 15 минут, ответит на вопросы и согласует время просмотра</p>
<form action="https://formsubmit.co/realty@kazakhtelecom.kz" 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">
@ -211,13 +215,13 @@
</div> </div>
</section> </section>
<footer class="kt-ai-wrap kt-ai-pagefoot"> <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%"> <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"> <img src="design-system/brand/kazakhtelecom-logo-white.png" alt="Казахтелеком" style="height:24px">
<span style="color:var(--kt-ai-fg-muted)">© 2026 АО «Казахтелеком». Все права защищены</span> <span style="color:var(--kt-white)">© 2026 АО «Казахтелеком». Все права защищены</span>
</div> </div>
<span class="kt-ai-spacer"></span> <span class="kt-ai-spacer"></span>
<span style="color:var(--kt-ai-fg-muted)">г. Алматы, ул. Байтурсынова, 112А | +7 (727) 123-45-67</span> <span style="color:var(--kt-gray-300)">г. Алматы, ул. Байтурсынова, 112А | +7 (727) 123-45-67</span>
</footer> </footer>
<script> <script>