СтройГрупп — концепт-сайт строительной компании

Задача

Показать, как должен выглядеть сайт серьёзного загородного застройщика — не «прайс + телефон в подвале», а полноценная цифровая витрина с прозрачным процессом, живой сметой и сильным визуальным языком. Сайт должен сразу транслировать: фиксированная цена, сроки в договоре, гарантия 5 лет, свои бригады.

Концепция «Solid Construction»: дарк-тема как метафора надёжности и премиума, тёплый оранжевый акцент (#EC6A06) — энергия процесса и тепло законченного дома. Шрифты Manrope + Inter, контрастная сетка, ambient-тени с оранжевым подтоном на ховере.

Решение

Стартовая точка — собственная дизайн-система «Solid Construction»: палитра из шести surface-токенов (от bg #0d141d до surface-highest #2e353f), оранжевая шкала primary с глоу-вариантом, типографическая пара Manrope (заголовки до 64px) + Inter (текст), скругления 4–16px, ambient-тени с оранжевым подтоном. По системе спроектировано 4 концепт-экрана (главная, каталог, калькулятор, контакты). Затем — ручная сборка в один длинный одностраничник с расширенной анимацией и интерактивом.

Живой калькулятор стоимости

Не «оставьте телефон, мы перезвоним», а реальный пересчёт цены в реальном времени:

• Тип материала — кирпичный / газобетон / каркасный (мультипликаторы 1.0 / 0.85 / 0.7)
• Площадь — range-slider 50–350 м² с шагом 10
• Этажность — 1 / 2 / 3+ (мультипликаторы 1.0 / 1.15 / 1.3)
• Фундамент — ленточный / свайный / монолит (1.0 / 1.1 / 1.25)
• Отделка — черновая / чистовая / под ключ (0.75 / 1.0 / 1.35)
• Дополнительно — гараж / балкон / баня / терраса (фикс-добавки от 400 тыс до 1.1 млн)

Формула: area × 75000 ₽/м² × type × floors × foundation × finish + Σ extras. Любое изменение — мгновенный пересчёт через requestAnimationFrame. Sticky-панель результата прилипает справа при прокрутке.

Каталог с рабочими фильтрами

6 проектов с тремя параметрами (data-type, data-floors, data-price) и тремя селектами. Один обработчик change пересчитывает видимость карточек через classList.toggle('proj-hidden'). Если ничего не подходит — показывается заглушка «По выбранным фильтрам проектов нет».

Многослойная фоновая анимация

Главное отличие от типового сайта — каждая тёмная секция «дышит»:

• Глобальная сетка — fixed слой за всем контентом, оранжевые линии 60×60px, медленно дрейфует по диагонали (30 сек), затемнена radial-маской по краям
• Scan-beams в секциях Почему мы / Каталог / Отзывы — два диагональных световых луча вращаются с разной фазой (18 и 22 сек) — имитация прожектора стройплощадки
• Twinkling-dots в Этапы / Команда / FAQ — мерцающие оранжевые точки 14–22 шт. на секцию, каждая с собственным ритмом 3–7 сек
• Blob-pulse — в каждой тёмной секции 1–2 размытых цветовых пятна с blur(80px), пульсирующих с индивидуальной задержкой

Всё гасится через @media (prefers-reduced-motion: reduce).

Hero с расширенной хореографией

«Построим дом мечты» собирается побуквенно с задержкой 60 мс между символами и лёгким rotateZ(-8deg). «6 месяцев» — linear-gradient + background-position шиммер. За контентом — Ken Burns-фон с архитектурным рендером дома, 26 оранжевых частиц летят вверх с разной скоростью. Контент следует за курсором (mouse parallax ±16px). На CTA — pulse-glow keyframe с расширяющимся оранжевым ореолом.

Этапы работы 01–06

6 карточек с гигантскими номерными «бэйджами» в углу. Срок этапа выделен оранжевым (1 неделя → 2 недели). Сетка 3 колонки на десктопе, 1 на мобиле. Через scroll-reveal stagger карточки появляются с задержкой 90 мс друг за другом — естественный визуальный ритм.

Команда

Блок с фото бригады, гранд-цифры (42 сотрудника, 12 инженеров, 98% сдач в срок, 187 пунктов чек-листа приёмки) и плавающая карточка «СРО допуск № 2023-РВ-1142» с тенью — фишка дизайна, добавляющая доверие.

FAQ через нативный <details>

5 вопросов в <details>/<summary> — открываются без JS, accessibility «из коробки». Стрелка expand_more поворачивается на 180° через [open] CSS-селектор. Заголовок открытого вопроса подсвечивается оранжевым.

Форма выезда с реалистичными полями

Не «имя/телефон» в одну строку, а нормальная заявка: имя, телефон, email, тип проекта (готовый / индивидуальный / адаптация / замер), комментарий, удобная дата выезда инженера через <input type="date">. Submit морфит кнопку в «✓ Заявка отправлена — свяжемся в течение часа». Рядом — сайдбар с офисом и блок «Не любите формы?» с прямой кнопкой звонка.

Результат

Сайт развёрнут на поддомене stroy.nazarov-evgeniy.pro по HTTPS (Let’s Encrypt), отдаётся за миллисекунды (~75 KB на index.html). Бэкенд не подключён — это концепт-демо. Для продакшена достаточно: подключить форму к 1С или amoCRM, заменить фото домов на реальные объекты, прописать SEO под низкочастотные запросы («строительство дома под ключ Подмосковье», «дом из газобетона 150 м² цена»).

Архитектурно сайт готов к масштабированию: добавить раздел акций, страницы под конкретные проекты (/proekty/omega/, /proekty/alfa/), калькулятор с расширенными опциями (гараж на 2 машины, бассейн, мансарда) — структура и стили это допускают без рефакторинга.

Стек технологий

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (Ken Burns, blob pulse, letter reveal, shimmer, particle float-up, grid drift, scan beams, twinkle dots, pulse-glow), IntersectionObserver для scroll-reveal и счётчика статистики, easeOutCubic для счётчика
• Типографика: Manrope 500–900 (заголовки), Inter 400–700 (текст), Material Symbols (иконки)
• Изображения: AI-арт под цветовую палитру + Unsplash для дополнительных проектов и команды
• UX-паттерны: живой калькулятор с мультипликаторами, фильтры каталога без перезагрузки, sticky-панель результата, нативный <details> для FAQ, sticky header с pulse-glow CTA, многослойные фоновые анимации
• Дизайн-этап: собственная дизайн-система «Solid Construction» (палитра, типографика, тени, скругления, spacing-токены) под бренд-концепцию премиум-застройщика
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL