admin/cherepovets-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Voda Landing (Cherepovets)

Browse Source
This commit is contained in:
admin
2026-04-30 10:55:23 +03:00
commit add947d64f
10 changed files with 3946 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+697
View File
@@ -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>
для МКД в&nbsp;Череповце
</h1>
<p class="lead">
Проектирование, капитальный ремонт и обслуживание общедомовых
инженерных систем. Работаем с&nbsp;УК, ТСЖ и&nbsp;застройщиками
Вологодской области.
</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>