ARLINE GROUP — сайт строительной компании «дома под ключ»
Многостраничный сайт строительной компании «дома под ключ» в тёмном editorial-стиле: каталог проектов, пошаговый калькулятор сметы и ипотечный калькулятор, прямые каналы связи. Это превью-сборка на поддомене молоко/ (molokogroup.ru/sites/stroimdom), не на клиентском домене.
Открыть сайт вживую →
Задача
Нужен был сайт для строительной компании, который объясняет ценность (фикс-цена, поэтапная оплата, гарантия), показывает каталог готовых проектов домов и сразу даёт посетителю прикинуть бюджет — со сметой и с ипотекой — а затем выводит на быстрый контакт без формы-анкеты.
Решение
Собрали многостраничный лендинг (главная, цены, проекты, страница проекта) на чистом HTML/CSS/JS без CMS и тяжёлых фреймворков — быстрый и легко правится. Стиль — тёмный editorial: фон espresso, латунно-терракотовый акцент, шрифты Playfair Display + Prata + Jost. Сделали интерактив: пошаговый квиз-калькулятор сметы (площадь/этажность/материал → ориентир цены), отдельный ипотечный калькулятор с расчётом ежемесячного платежа (аннуитет), фильтр каталога проектов по материалу, FAQ-аккордеон, маску ввода телефона. Навигация адаптивная — бургер-дроуэр, плавающие кнопки WhatsApp/Telegram и нижний мобильный бар. Связь реализована прямыми ссылками: tel:, wa.me, t.me — посетитель звонит/пишет в один тап (форма для лида присутствует визуально, но отправка лида на бэкенд не подключена — это превью-сборка). Контент защищён от сбоев JS: блоки с анимацией появления имеют failsafe, чтобы текст не пропадал.
Технологии
Чистый HTML / CSS / JavaScript (без CMS и фронтенд-фреймворков). Шрифты Playfair Display, Prata, Jost (Google Fonts). Скролл и анимации — Lenis + GSAP/ScrollTrigger. Интерактив на ванильном JS (квиз-калькулятор сметы, ипотечный калькулятор, фильтр каталога, FAQ-аккордеон, маска телефона, дроуэр).
Что сделали
- ✓ Многостраничная структура: главная, цены/расчёт, каталог проектов, страница отдельного проекта
- ✓ Тёмный editorial-дизайн (фон espresso, латунно-терракотовый акцент)
- ✓ Адаптивная вёрстка: бургер-меню, плавающие кнопки WhatsApp/Telegram, нижний мобильный бар
- ✓ Пошаговый квиз-калькулятор сметы (площадь, этажность, материал → ориентир цены)
- ✓ Ипотечный калькулятор с расчётом ежемесячного платежа
- ✓ Каталог проектов домов с фильтром по материалу
- ✓ Блок технологий строительства с ценой за м² (газобетон, ракушечник, каркас, монолит-каркас)
- ✓ Блок этапов работ (от заявки до сдачи и гарантии)
- ✓ FAQ-аккордеон
- ✓ Прямые каналы связи в один тап: телефон (tel:), WhatsApp (wa.me), Telegram (t.me), MAX
- ✓ Маска ввода телефона для РФ
- ✓ Анимации появления блоков с failsafe — контент не пропадает при сбое JS
Соберём ваш проект за дни
Напишите в Telegram — разберём задачу и скажем честно, что нужно, а что лишнее.
Обсудить проект