РемонтПро — концепт-сайт компании по ремонту квартир

Задача

Показать, как должен выглядеть сайт ремонтной компании среднего и премиум сегмента — не «оранжево-синий лендинг 2015-го с подсолнухами», а строгий минималистичный конструктор, который сразу транслирует профессионализм: фиксированная смета, рассрочка 0%, гарантия 3 года, свои бригады без субподрядчиков.

Концепция «Minimal Renovation»: тёплый off-white #fcf8f8 как фон чистоты, графитовый ink #1c1b1a для контраста и веса, slate-blue #515f74 для акцентов и CTA. Единственный шрифт — Inter, никаких серифов и декоративных элементов. Тон — спокойный, уверенный, без «продающего» давления.

Решение

Стартовая точка — собственная дизайн-система «Minimal Renovation»: семь surface-токенов от чистого белого #ffffff до тёплого серого #e5e2e1, графитовая основа ink с soft-вариантом, slate-blue accent со светлым accent-light для подсветки активных состояний, единственное семейство Inter 400–800, скругления 4–24px, тонкие тени с лёгким графитовым подтоном на ховере. Из четырёх концепт-экранов (главная, портфолио, калькулятор, контакты) — ручная сборка в один длинный одностраничник с расширенным интерактивом.

Живой калькулятор с разбивкой сметы

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

• Тип ремонта — Косметический 4 500 / Капитальный 8 500 / Дизайнерский 15 000 ₽/м²
• Площадь — range-slider 20–200 м² с шагом 5
• Комнаты — slider 1–5+ (для контекста)
• Опции — 4 чекбокса (сантехника, электрика, окна, натяжные потолки) с фиксированными добавками
• Срочный ремонт — кастомный toggle-переключатель с множителем ×1.2

Sticky-панель результата в тёмной заливке (контраст с лёгким фоном) показывает разбивку: базовая стоимость → материалы (~50% от базы) → доп. опции → итог. Форматирование через toLocaleString('ru-RU') для разделителей разрядов.

Уникальная фоновая анимация «Drafting Lines»

Главное отличие от типового сайта ремонтной компании — авторский визуальный язык, отсылающий к чертежам и измерениям. Никаких типовых «частиц» или «оранжевых шариков»:

• Mesh gradient drift — глобальный фоновый слой с тремя радиальными slate-blue градиентами, плавно перемещаются по экрану с 28-секундным циклом
• Floor plan SVG drawing — линии планировки квартиры в hero и контактах рисуются stroke-dasharray: 600 через stroke-dashoffset с задержками между путями (14-секундный цикл) — эффект архитектурного эскиза, который чертит себя сам
• Ruler tape lines — горизонтальные «измерительные линейки» с тонкими делениями (через CSS background-image из тонких градиентов) дрейфуют по сторонам секций Stats / Виды ремонта / Калькулятор / FAQ с разной скоростью (22 и 28 сек)
• Pencil sweep — диагональный «карандашный мазок» проходит по секциям Портфолио и Отзывы — линия плотного градиента 49–51% с прозрачными краями скользит за 9 сек
• Underline-draw в hero — после letter-reveal заголовка под «4 500 ₽/м²» прорастает горизонтальная линия слева направо (1.4 сек, cubic-bezier)

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

Портфолио с chip-фильтрами

6 завершённых объектов (Квартира в ЖК «Символ», Апартаменты «Нева Таурос», Студия на Патриарших, Двушка на Чистых прудах, Трёшка в Хамовниках, Семейная в Кунцево). Каждая карточка — фото 4:3 со scale-эффектом на hover, тип ремонта uppercase-капс, площадь и срок, цена и ссылка «Смотреть». Chip-фильтр (Все / Дизайнерский / Капитальный / Косметический) переключает видимость через proj-hidden.

3 типа ремонта с выделением «Хита»

Карточка «Капитальный» — единственная с border-2 border-ink и плашкой «Хит» вместо тонкой outline-обводки. Каждая карточка с фото 16:10, описанием, 3 пунктами включений с зелёными чекмарками, ценой за м² и ссылкой «Рассчитать →» на калькулятор.

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

6 карточек с гигантскими номерными бэйджами (absolute -top-5 -left-5 w-14 h-14) в чёрной заливке. Срок этапа выделен slate-blue (2 дня → 4–6 недель). Сетка 3 колонки на десктопе, 1 на мобиле. Scroll-reveal stagger 100 мс.

Stats как тёмный «инверс-блок»

Между Hero и Видами ремонта — чёрный блок с белым текстом и инвертированной линейкой-рулеткой в фоне (filter: invert(1)). Цифры считаются от 0: 1500+ объектов / 12 лет / 3 года гарантии / 0% рассрочка. Контраст разбивает страницу на чёткие визуальные зоны.

Контакты с мини-формой замера

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

Результат

Сайт развёрнут на поддомене remontpro.nazarov-evgeniy.pro по HTTPS (Let’s Encrypt), отдаётся за миллисекунды (~64 KB на index.html). Бэкенд не подключён — это концепт-демо. Для продакшена достаточно: подключить форму к amoCRM или Битрикс24, интегрировать ChatBot для квалификации, добавить полноценное портфолио с галереей фото до/после.

Архитектурно сайт готов к масштабированию: страницы под конкретные типы (/dizajn-proekt/, /kapitalnyj-remont-pod-kluch/), личный кабинет клиента с прогрессом ремонта в реальном времени, разделы про материалы и партнёров — структура и стили это допускают без рефакторинга.

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

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (Ken Burns, mesh drift, SVG floorplan draw via stroke-dasharray, ruler drift, pencil sweep, underline draw, letter reveal), IntersectionObserver для scroll-reveal и счётчиков, easeOutCubic для счётчика, кастомный toggle-переключатель
• Типографика: Inter 400–800 как единственный шрифт (заголовки + текст), Material Symbols (иконки)
• Изображения: Unsplash для портфолио и hero, SVG для планировок и анимаций фона
• UX-паттерны: живой калькулятор с toggle «Срочный», chip-фильтры портфолио без перезагрузки, sticky-панель результата с разбивкой сметы, мини-форма замера прямо в основной форме контактов
• Дизайн-этап: собственная дизайн-система «Minimal Renovation» (off-white + графит + slate-blue, единственный шрифт Inter, тени, скругления, spacing-токены) под бренд-концепцию ремонтной компании среднего и премиум сегмента
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL