Лендинг

ARLINE GROUP — сайт строительной компании «дома под ключ»

Многостраничный сайт строительной компании «дома под ключ» в тёмном editorial-стиле: каталог проектов, пошаговый калькулятор сметы и ипотечный калькулятор, прямые каналы связи. Это превью-сборка на поддомене молоко/ (molokogroup.ru/sites/stroimdom), не на клиентском домене.

Открыть сайт вживую

Клиент

ARLINE GROUP

Срок

по запросу

Услуга

Разработка под ключ

ARLINE GROUP — сайт строительной компании «дома под ключ»

Задача

Нужен был сайт для строительной компании, который объясняет ценность (фикс-цена, поэтапная оплата, гарантия), показывает каталог готовых проектов домов и сразу даёт посетителю прикинуть бюджет — со сметой и с ипотекой — а затем выводит на быстрый контакт без формы-анкеты.

Решение

Собрали многостраничный лендинг (главная, цены, проекты, страница проекта) на чистом 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