Initial commit: Voda Landing (Cherepovets)
This commit is contained in:
admin
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -0,0 +1,697 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Инженерные системы МКД — Череповец | Водоснабжение и канализация</title>
|
||||
<meta name="description" content="Проектирование, капитальный ремонт и обслуживание систем водоснабжения и канализации для многоквартирных домов в Череповце">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top bar with contacts -->
|
||||
<div class="top-bar">
|
||||
<div class="container top-bar-inner">
|
||||
<div class="top-bar-left">
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:4px"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Череповец, Вологодская обл.</span>
|
||||
<span class="top-bar-divider">|</span>
|
||||
<span>Пн-Пт: 8:00 - 18:00</span>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<a href="mailto:info@ingener-mkd.ru"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:4px"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg>info@ingener-mkd.ru</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav id="nav">
|
||||
<div class="container">
|
||||
<div class="nav-content">
|
||||
<div class="logo">
|
||||
<div class="logo-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
|
||||
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<span class="logo-name">ИнженерСистемы</span>
|
||||
<span class="logo-desc">МКД Череповец</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="#services">Услуги</a>
|
||||
<a href="#benefits">Преимущества</a>
|
||||
<a href="#projects">Проекты</a>
|
||||
<a href="#contact">Контакты</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-phone">
|
||||
<a href="tel:+79001234567" class="phone-link">
|
||||
<span class="phone-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>
|
||||
<div class="phone-info">
|
||||
<span class="phone-number">+7 (900) 123-45-67</span>
|
||||
<span class="phone-label">Бесплатная консультация</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#contact" class="btn-primary btn-nav">Получить КП</a>
|
||||
</div>
|
||||
|
||||
<button class="burger" id="burger" aria-label="Меню">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile menu (fullscreen) -->
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<div class="mobile-menu-inner">
|
||||
<a href="#services" class="mobile-link">
|
||||
<span>Услуги</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
<a href="#benefits" class="mobile-link">
|
||||
<span>Преимущества</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
<a href="#projects" class="mobile-link">
|
||||
<span>Проекты</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
<a href="#contact" class="mobile-link">
|
||||
<span>Контакты</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
<div class="mobile-menu-bottom">
|
||||
<a href="tel:+79001234567" class="mobile-phone-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
+7 (900) 123-45-67
|
||||
</a>
|
||||
<a href="#contact" class="btn-primary btn-lg btn-full mobile-cta-link" style="text-decoration:none;">Получить КП</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating mobile CTA -->
|
||||
<div class="mobile-float-cta" id="floatCta">
|
||||
<a href="#contact" class="btn-primary btn-float">
|
||||
Получить КП
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-grid-pattern"></div>
|
||||
<div class="hero-glow hero-glow-1"></div>
|
||||
<div class="hero-glow hero-glow-2"></div>
|
||||
<div class="hero-lines"></div>
|
||||
</div>
|
||||
|
||||
<div class="container hero-container">
|
||||
<div class="hero-content">
|
||||
<div class="badge">
|
||||
<span class="pulse"></span>
|
||||
Работаем только с МКД
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
Инженерные системы<br>
|
||||
<span class="gradient-text">водоснабжения и канализации</span><br>
|
||||
для МКД в Череповце
|
||||
</h1>
|
||||
|
||||
<p class="lead">
|
||||
Проектирование, капитальный ремонт и обслуживание общедомовых
|
||||
инженерных систем. Работаем с УК, ТСЖ и застройщиками
|
||||
Вологодской области.
|
||||
</p>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<a href="#contact" class="btn-primary btn-lg">
|
||||
Получить КП за 24 часа
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="tel:+79001234567" class="btn-secondary btn-lg">
|
||||
<span class="btn-icon-phone"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span> Выезд специалиста
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-trust">
|
||||
<div class="trust-item">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Работа по договору
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Прозрачная смета
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Гарантия 5 лет
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-stats-panel">
|
||||
<div class="stats-card">
|
||||
<div class="stat-item-new">
|
||||
<div class="stat-number-new" data-target="12">12+</div>
|
||||
<div class="stat-label-new">лет на рынке</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item-new">
|
||||
<div class="stat-number-new" data-target="87">87+</div>
|
||||
<div class="stat-label-new">объектов МКД</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item-new">
|
||||
<div class="stat-number-new" data-target="24">24+</div>
|
||||
<div class="stat-label-new">партнёра УК/ТСЖ</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item-new">
|
||||
<div class="stat-number-new" data-target="0">0</div>
|
||||
<div class="stat-label-new">аварий после ремонта</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section class="services" id="services">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<div class="section-badge">УСЛУГИ</div>
|
||||
<h2>Профессиональные решения<br>для <span class="gradient-text">общедомовых систем</span></h2>
|
||||
<p class="section-subtitle">Полный цикл работ по инженерным системам МКД — от проекта до сдачи</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||||
</div>
|
||||
<h3>Проектирование систем МКД</h3>
|
||||
<p>Разработка проектной документации по СНиП и ГОСТ. Согласование с надзорными органами.</p>
|
||||
<a href="#contact" class="service-link">Подробнее →</a>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
</div>
|
||||
<h3>Капитальный ремонт ХВС/ГВС</h3>
|
||||
<p>Полная замена изношенных коммуникаций. Минимальное время отключения воды.</p>
|
||||
<a href="#contact" class="service-link">Подробнее →</a>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
|
||||
</div>
|
||||
<h3>Замена стояков водоснабжения</h3>
|
||||
<p>Работы в действующих домах с поэтапным отключением по стоякам.</p>
|
||||
<a href="#contact" class="service-link">Подробнее →</a>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div>
|
||||
<h3>Модернизация инженерных сетей</h3>
|
||||
<p>Повышение надёжности, снижение аварийности и эксплуатационных расходов.</p>
|
||||
<a href="#contact" class="service-link">Подробнее →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits -->
|
||||
<section class="benefits" id="benefits">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<div class="section-badge">ПРЕИМУЩЕСТВА</div>
|
||||
<h2>Почему нам доверяют<br><span class="gradient-text">УК и ТСЖ Череповца</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 9 7 12 7s5-3 7.5-3a2.5 2.5 0 0 1 0 5H18"/><path d="M18 9v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9"/><path d="M12 7v14"/></svg></div>
|
||||
<div class="benefit-text"><h3>12+ лет в МКД</h3>
|
||||
<p>Специализируемся исключительно на многоквартирных домах — знаем специфику</p></div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
|
||||
<div class="benefit-text"><h3>Соблюдение сроков</h3>
|
||||
<p>Штрафные санкции в договоре за нарушение сроков выполнения работ</p></div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></svg></div>
|
||||
<div class="benefit-text"><h3>Прозрачная смета</h3>
|
||||
<p>Подробная детализация всех материалов и работ — без скрытых платежей</p></div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
|
||||
<div class="benefit-text"><h3>Работа по договору</h3>
|
||||
<p>Полный пакет документов: договор, акты, исполнительная документация</p></div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg></div>
|
||||
<div class="benefit-text"><h3>Гарантия 5 лет</h3>
|
||||
<p>Гарантийное обслуживание и оперативное реагирование на обращения</p></div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg></div>
|
||||
<div class="benefit-text"><h3>Минимум отключений</h3>
|
||||
<p>Поэтажное отключение — жители других этажей не остаются без воды</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects -->
|
||||
<section class="projects" id="projects">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<div class="section-badge">ПОРТФОЛИО</div>
|
||||
<h2>Реализованные <span class="gradient-text">объекты в Череповце</span></h2>
|
||||
<p class="section-subtitle">Каждый проект — это работа в действующем жилом доме с жильцами</p>
|
||||
</div>
|
||||
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<div class="project-img">
|
||||
<div class="project-overlay">
|
||||
<span class="project-tag">Капремонт</span>
|
||||
</div>
|
||||
<div class="project-icon-bg">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="rgba(59,130,246,0.3)" stroke-width="1"><rect x="1" y="6" width="22" height="15" rx="2"/><path d="M1 10h22M8 6V2M16 6V2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Замена стояков ХВС и ГВС</h3>
|
||||
<p class="project-address">ул. Ленина, д. 42 — 9-этажный МКД</p>
|
||||
<div class="project-stats">
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>152 квартиры</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>28 дней</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M20 6L9 17l-5-5"/></svg>Сдано</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div class="project-img">
|
||||
<div class="project-overlay">
|
||||
<span class="project-tag">Канализация</span>
|
||||
</div>
|
||||
<div class="project-icon-bg">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="rgba(59,130,246,0.3)" stroke-width="1"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Капремонт канализации</h3>
|
||||
<p class="project-address">ул. Металлургов, д. 15 — 5-этажный МКД</p>
|
||||
<div class="project-stats">
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>80 квартир</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>21 день</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M20 6L9 17l-5-5"/></svg>Сдано</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div class="project-img">
|
||||
<div class="project-overlay">
|
||||
<span class="project-tag">Модернизация</span>
|
||||
</div>
|
||||
<div class="project-icon-bg">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="rgba(59,130,246,0.3)" stroke-width="1"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Модернизация узлов водоснабжения</h3>
|
||||
<p class="project-address">мкр. Зашекснинский — комплекс из 3 домов</p>
|
||||
<div class="project-stats">
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>240 квартир</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>45 дней</span>
|
||||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" style="vertical-align:-2px;margin-right:3px"><path d="M20 6L9 17l-5-5"/></svg>Сдано</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Work Process -->
|
||||
<section class="process light-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<div class="section-badge">КАК МЫ РАБОТАЕМ</div>
|
||||
<h2 style="color:var(--text-dark)">Прозрачный процесс —<br><span class="gradient-text">от осмотра до сдачи</span></h2>
|
||||
<p class="section-subtitle">Чёткая последовательность этапов, понятная для УК и ТСЖ</p>
|
||||
</div>
|
||||
|
||||
<div class="process-grid">
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="process-num">1</div>
|
||||
<div>
|
||||
<h3>Осмотр объекта</h3>
|
||||
<p>Бесплатный выезд инженера, фиксация состояния систем, фотоотчёт</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="process-num">2</div>
|
||||
<div>
|
||||
<h3>Техническое решение</h3>
|
||||
<p>Проектирование оптимального варианта с учётом особенностей дома</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="process-num">3</div>
|
||||
<div>
|
||||
<h3>Коммерческое предложение</h3>
|
||||
<p>Детальная смета с расшифровкой материалов и работ за 24 часа</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="process-num">4</div>
|
||||
<div>
|
||||
<h3>Договор</h3>
|
||||
<p>Фиксированная цена, сроки, гарантии и штрафные санкции</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="process-num">5</div>
|
||||
<div>
|
||||
<h3>Выполнение и сдача</h3>
|
||||
<p>Работы по графику, акты КС-2/КС-3, гарантия 5 лет</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta" id="contact">
|
||||
<div class="container">
|
||||
<div class="cta-box">
|
||||
<div class="cta-left">
|
||||
<h2>Получите расчёт стоимости<br><span class="gradient-text">для вашего МКД</span></h2>
|
||||
<p>Подготовим коммерческое предложение с техническим решением и сметой за 24 часа</p>
|
||||
<div class="cta-features">
|
||||
<div class="cta-feature">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Бесплатный выезд специалиста
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
КП готово за 24 часа
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1E6BFF" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Без обязательств
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" id="leadForm" onsubmit="submitLead(event)">
|
||||
<input type="text" id="f-company" placeholder="Название организации (УК / ТСЖ)" required autocomplete="organization">
|
||||
<div class="form-row">
|
||||
<input type="text" id="f-name" placeholder="Ваше имя" required autocomplete="name">
|
||||
<input type="tel" id="f-phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel" inputmode="tel">
|
||||
</div>
|
||||
<textarea id="f-message" placeholder="Адрес дома, этажность, что нужно сделать" rows="3"></textarea>
|
||||
<button type="submit" class="btn-primary btn-lg btn-full" id="submitBtn">
|
||||
Отправить заявку
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
<p class="form-disclaimer">Нажимая кнопку, вы соглашаетесь с обработкой персональных данных</p>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none;text-align:center;padding:2rem;background:rgba(30,107,255,.06);border:1px solid rgba(30,107,255,.15);border-radius:12px;color:#1E6BFF;font-weight:600;font-size:1.05rem">
|
||||
✓ Заявка отправлена!<br><span style="font-weight:400;font-size:.9rem;color:#64748B">Мы свяжемся с вами в ближайшее время</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bottom CTA -->
|
||||
<section class="bottom-cta">
|
||||
<div class="container">
|
||||
<h2>Получите расчёт для вашего дома<br><span class="gradient-text">в Череповце</span></h2>
|
||||
<p>Бесплатный выезд инженера и коммерческое предложение за 24 часа — без обязательств</p>
|
||||
<a href="#contact" class="btn-primary btn-lg">
|
||||
Получить коммерческое предложение
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<div class="logo" style="margin-bottom: 1rem;">
|
||||
<div class="logo-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
|
||||
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<span class="logo-name">ИнженерСистемы</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Проектирование, ремонт и обслуживание инженерных систем для многоквартирных домов Череповца</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Контакты</h4>
|
||||
<p><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" style="vertical-align:-2px;margin-right:4px"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg><a href="tel:+79001234567" style="color:#94a3b8;">+7 (900) 123-45-67</a></p>
|
||||
<p><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" style="vertical-align:-2px;margin-right:4px"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg><a href="mailto:info@ingener-mkd.ru" style="color:#94a3b8;">info@ingener-mkd.ru</a></p>
|
||||
<p><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" style="vertical-align:-2px;margin-right:4px"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>г. Череповец, Вологодская обл.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Документы</h4>
|
||||
<p>ИНН: XXXXXXXXXX</p>
|
||||
<p>ОГРН: XXXXXXXXXXXXX</p>
|
||||
<p>СРО: Членство в саморегулируемой организации</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
© 2026 ИнженерСистемы. Все права защищены.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Sticky nav + hide top bar + floating CTA
|
||||
const topBar = document.querySelector('.top-bar');
|
||||
const floatCta = document.getElementById('floatCta');
|
||||
let lastScrollY = 0;
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('nav');
|
||||
const y = window.scrollY;
|
||||
if (y > 50) {
|
||||
nav.classList.add('scrolled');
|
||||
if (topBar) topBar.classList.add('hidden');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
if (topBar) topBar.classList.remove('hidden');
|
||||
}
|
||||
// Show floating CTA after hero, hide near form
|
||||
if (floatCta) {
|
||||
const contactSection = document.getElementById('contact');
|
||||
const contactTop = contactSection ? contactSection.getBoundingClientRect().top : 9999;
|
||||
if (y > 500 && contactTop > 300) {
|
||||
floatCta.classList.add('visible');
|
||||
} else {
|
||||
floatCta.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
lastScrollY = y;
|
||||
});
|
||||
|
||||
// Burger menu
|
||||
const burger = document.getElementById('burger');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
burger.addEventListener('click', () => {
|
||||
burger.classList.toggle('active');
|
||||
mobileMenu.classList.toggle('open');
|
||||
document.body.classList.toggle('menu-open');
|
||||
});
|
||||
|
||||
// Close mobile menu on link click
|
||||
document.querySelectorAll('.mobile-link, .mobile-cta-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
burger.classList.remove('active');
|
||||
mobileMenu.classList.remove('open');
|
||||
document.body.classList.remove('menu-open');
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.service-card, .benefit-card, .project-card, .stat-item-new, .process-step').forEach(el => {
|
||||
el.classList.add('animate-on-scroll');
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Counter animation
|
||||
const counterObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const counters = entry.target.querySelectorAll('.stat-number-new');
|
||||
counters.forEach(counter => {
|
||||
const target = parseInt(counter.getAttribute('data-target'));
|
||||
const suffix = counter.textContent.includes('+') ? '+' : '';
|
||||
let current = 0;
|
||||
const step = Math.max(1, Math.ceil(target / 40));
|
||||
const timer = setInterval(() => {
|
||||
current += step;
|
||||
if (current >= target) {
|
||||
current = target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
counter.textContent = current + suffix;
|
||||
}, 30);
|
||||
});
|
||||
counterObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
const statsCard = document.querySelector('.stats-card');
|
||||
if (statsCard) counterObserver.observe(statsCard);
|
||||
|
||||
// === Mobile Carousels ===
|
||||
function initCarousel(gridSelector, autoplayMs) {
|
||||
const grid = document.querySelector(gridSelector);
|
||||
if (!grid || window.innerWidth > 639) return;
|
||||
|
||||
const cards = grid.children;
|
||||
if (cards.length < 2) return;
|
||||
|
||||
function getCardWidth() {
|
||||
return cards[0].offsetWidth + 14; // card width + gap
|
||||
}
|
||||
|
||||
function scrollToIdx(idx) {
|
||||
grid.scrollTo({ left: idx * getCardWidth(), behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Create dots
|
||||
const dotsWrap = document.createElement('div');
|
||||
dotsWrap.className = 'carousel-dots';
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
|
||||
dot.addEventListener('click', () => scrollToIdx(i));
|
||||
dotsWrap.appendChild(dot);
|
||||
}
|
||||
grid.parentNode.insertBefore(dotsWrap, grid.nextSibling);
|
||||
|
||||
// Update dots on scroll
|
||||
let currentIdx = 0;
|
||||
grid.addEventListener('scroll', () => {
|
||||
const idx = Math.round(grid.scrollLeft / getCardWidth());
|
||||
if (idx !== currentIdx && idx >= 0 && idx < cards.length) {
|
||||
currentIdx = idx;
|
||||
dotsWrap.querySelectorAll('.carousel-dot').forEach((d, i) => {
|
||||
d.classList.toggle('active', i === idx);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Autoplay
|
||||
let autoTimer;
|
||||
let paused = false;
|
||||
|
||||
function startAuto() {
|
||||
autoTimer = setInterval(() => {
|
||||
if (paused) return;
|
||||
currentIdx = (currentIdx + 1) % cards.length;
|
||||
scrollToIdx(currentIdx);
|
||||
}, autoplayMs);
|
||||
}
|
||||
|
||||
// Pause on touch
|
||||
grid.addEventListener('touchstart', () => { paused = true; });
|
||||
grid.addEventListener('touchend', () => {
|
||||
paused = false;
|
||||
clearInterval(autoTimer);
|
||||
startAuto();
|
||||
});
|
||||
|
||||
startAuto();
|
||||
}
|
||||
|
||||
initCarousel('.services-grid', 4000);
|
||||
initCarousel('.benefits-grid', 3500);
|
||||
initCarousel('.projects-grid', 5000);
|
||||
|
||||
// === Submit lead form ===
|
||||
async function submitLead(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('submitBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Отправка...';
|
||||
try {
|
||||
const r = await fetch('/api/submit-lead', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
company: document.getElementById('f-company').value,
|
||||
name: document.getElementById('f-name').value,
|
||||
phone: document.getElementById('f-phone').value,
|
||||
message: document.getElementById('f-message').value,
|
||||
})
|
||||
});
|
||||
if (r.ok) {
|
||||
document.getElementById('leadForm').style.display = 'none';
|
||||
document.getElementById('formSuccess').style.display = 'block';
|
||||
}
|
||||
} catch(err) {
|
||||
alert('Ошибка отправки, попробуйте позвонить нам');
|
||||
}
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Отправить заявку';
|
||||
}
|
||||
// === Phone mask ===
|
||||
const phoneInput = document.getElementById('f-phone');
|
||||
if (phoneInput) {
|
||||
phoneInput.addEventListener('input', function(e) {
|
||||
let v = this.value.replace(/\D/g, '');
|
||||
if (v.startsWith('8')) v = '7' + v.slice(1);
|
||||
if (v.startsWith('7')) v = v.slice(1);
|
||||
let r = '+7';
|
||||
if (v.length > 0) r += ' (' + v.substring(0,3);
|
||||
if (v.length >= 3) r += ') ' + v.substring(3,6);
|
||||
if (v.length >= 6) r += '-' + v.substring(6,8);
|
||||
if (v.length >= 8) r += '-' + v.substring(8,10);
|
||||
this.value = r;
|
||||
});
|
||||
phoneInput.addEventListener('focus', function() {
|
||||
if (!this.value) this.value = '+7 (';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1098
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user