Описание

Клиент — компания, специализирующаяся на ремонте квартир и домов премиум-сегмента. Задача: разработать одностраничный сайт, который визуально транслирует высокий уровень услуг и вызывает доверие у платёжеспособной аудитории.

Основные требования:

— Дизайн должен ощущаться дорого и лаконично, без перегруженности элементами.
— Обязательна мобильная адаптация: на телефоне клиент должен видеть сразу полтора блока, чтобы интуитивно листать дальше
— Интерактивный калькулятор стоимости ремонта с выбором типа работ и дополнительных опций.
— Все кнопки должны быть рабочими и вести к целевому действию — открытию формы связи.
— Секции: преимущества, примеры работ, пакеты услуг с ценами, этапы работ, сроки, гарантии, отзывы клиентов и блок контактов.
— Быстрая загрузка

Решение

Спроектировал и полностью сверстал лендинг с нуля на чистом HTML, CSS и JavaScript — без фреймворков и лишних зависимостей, что обеспечивает мгновенную загрузку.

Дизайн: выбрал тёплую кремово-кофейную палитру (#F5F1EA, #1F1F1F, #4B3728, #B89D7A) и пару шрифтов Cormorant Garamond + Manrope — антиква для заголовков передаёт премиальность, гротеск для текста обеспечивает читаемость.

Hero-секция — полноэкранная с фото интерьера, многослойным тёмным градиентом и плавным растворением в светлый контент ниже. Добавил анимированный прелоадер с линейным бликом.

Мобильная версия: горизонтальная прокрутка со scroll-snap показывает 1.5 карточки, провоцируя дальнейшее пролистывание. Блок «Пакеты ремонта» выведен в три колонки даже на малых экранах.

Анимации: появление блоков при скролле через Intersection Observer, подъём карточек при ховере, Ken Burns-зум фото в Hero, световой блик на кнопках. Все эффекты отключаются при системной настройке prefers-reduced-motion.

Кнопки «Связаться», «Выбрать пакет», «Получить смету» открывают модальное окно с формой. «Смотреть все работы» и «Смотреть все отзывы» открывают свои панели-галереи. Instagram ведёт на внешний профиль.

Калькулятор пересчитывает стоимость и сроки в реальном времени.

Результат

Получился завершённый продуктовый лендинг, готовый к использованию для реального бизнеса:

— Время загрузки < 1 секунды (статика, нет зависимостей от внешних библиотек)
— Сайт адаптирован под любые экраны и корректно отображается в Chrome, Safari, Firefox
— Заказчик получает интерактивный калькулятор стоимости и форму заявки, которая собирает имя и телефон клиента для записи на бесплатный замер
— Готова интеграция формы с CRM-системой заказчика через webhook
— Блоки легко кастомизируются: замена фото, текстов, цветов и цен не требует знания кода
— всё вынесено в CSS-переменные и понятную разметку

Презентация проекта

Ссылки на примеры реализации