283 lines
14 KiB
HTML
283 lines
14 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>ProdEstate — Производственная недвижимость</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:22px; }
|
||
.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-ai-primary);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-ai-primary); }
|
||
.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}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
|
||
<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>
|
||
</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" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<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>
|
||
</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>Каталог объектов</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>Почему выбирают нас</h2>
|
||
<p>Полное сопровождение сделки и проверенные объекты</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>
|
||
</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="#clock"></use></svg></div>
|
||
<h3>Доступ 24/7</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>
|
||
</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>О компании</h2>
|
||
<p>Работаем на рынке производственной недвижимости с 2010 года</p>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card reveal">
|
||
<div class="stat-number">14+</div>
|
||
<div class="stat-label">лет на рынке</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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">
|
||
<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>
|
||
<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>
|
||
</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="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">
|
||
<svg class="kt-icon" style="margin-right:6px"><use href="#megaphone"></use></svg>
|
||
+7 (777) 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 ProdEstate. Все права защищены</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-ai-fg-muted)">г. Алматы, ул. Примерная, 100 | info@prodestate.kz</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:'Аренда' },
|
||
];
|
||
|
||
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>
|