Описание

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

Цели проекта:
— Показать услуги салона по породам с понятной ценовой навигацией
— Дать возможность записаться онлайн без звонка (форма + интерактивный календарь)
— Представить мастеров и их опыт, чтобы снять тревогу у новых клиентов
— Продемонстрировать результаты работы через блок «До и после»
— Обеспечить адаптивность под все устройства — от мобильных до десктопа
— Создать эстетику, передающую тепло, уют и заботу о питомцах

Решение

Разработал одностраничный лендинг с нуля на чистом HTML, CSS и JavaScript без фреймворков — это обеспечивает мгновенную загрузку и простоту поддержки.

Что реализовал:

— Продуманная структура из 10 смысловых блоков: герой, услуги по породам, прайс, до/после, онлайн-запись, мастера, абонемент, дополнительный уход, отзывы, футер с контактами
— Интерактивный слайдер «До и после» с ручным перетаскиванием
— Рабочий календарь записи с навигацией по месяцам и форма бронирования
— Модальные окна для детальной информации (полный прайс, все мастера, политика данных, FAQ)
— SVG-иконки через спрайт
— ноль внешних запросов на иконочные шрифты
— Кастомная цветовая палитра (терракота + слоновая кость) через CSS-переменные
— легко перенастроить под любой бренд
— Полная адаптивность: 4 точки перехода (1024, 860, 560, 380px), мобильное меню, карусель отзывов на мобильных

Результат

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

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

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

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