Демо-проект
Лендинг для ремонта квартир: СметаФикс
Калькулятор сметы по метражу, таймлайн этапов, заявки с согласием на обработку данных.
дизайн и вёрстка · HTML · CSS · JS
калькуляторвилка цены: метраж, 3 типа, 6 допов
11 секцийот оффера в hero до формы заявки
6 этаповтаймлайн от заявки до ключей, с фото
16 фотогалерея работ и фото каждого этапа
4 страницылендинг, спасибо, политика, дисклеймер

Задача
«СметаФикс» - московская компания, которая делает ремонт квартир по фиксированной смете. Демо-проект: компания вымышленная, задача настоящая. Заказчик в этой нише боится трёх вещей: смета вырастет в полтора раза, ремонт затянется, бригада исчезнет с предоплатой. Страница должна снять эти страхи аргументами и довести посетителя до заявки на бесплатный замер.
Решение
- Визуальный язык «инженерный чертёж»: видимые границы 1px, фон-миллиметровка, размерные линии у ключевых цифр, номера секций 01/, 02/. Цены набраны моноширинным JetBrains Mono - «сметный» характер вместо стоковых фото в касках.
- Hero разделён: слева оффер, справа калькулятор в рамке-«штампе» чертежа. Расчёт доступен без скролла - это главный сценарий ниши.
- Калькулятор считает вилку стоимости прямо в браузере: площадь, тип ремонта, шесть допов. Ничего не уходит на сервер, страница честно об этом пишет.
- Перед вёрсткой тексты прошли ревизию: 19 находок, из них 8 критичных - числовые противоречия между секциями, обещания, невыполнимые на статике, юридические риски вроде передачи чужих контактов.
Детали, которые легко не заметить
- Формы не отправляются без обязательного чекбокса согласия на обработку персональных данных; страница политики лежит рядом с лендингом.
- Маска телефона подстраивается под язык браузера: +7 для русскоязычных, +1 для остальных.
- Все числа на странице сведены в один реестр и сверены между собой: 540 объектов за 11 лет, 97% в срок и 16 выплат неустойки не противоречат друг другу.
- Реквизиты вымышленные, в футере и на отдельной странице - прямое указание, что это демо. Страница не выдаёт себя за настоящую компанию.
- Сборки нет: лендинг открывается с диска. Картинки - WebP с JPG-фолбэком, до трёх ширин, lazy-loading ниже первого экрана, анимации уважают prefers-reduced-motion.
Цифры
Все цифры на плитках выше сверяемы по исходникам демо: страницы и секции - по разметке, этапы и фото - по файлам галереи, опции калькулятора - по коду страницы. Картинки грузятся лениво и в ширине под конкретный экран.
Скриншоты




