Кейс «Кроха и Я» — лендинг для детского массажа

Задача

Что нужно было сделать

Заказчик — специалист по детскому массажу с частной практикой. Был сайт на конструкторе, который медленно грузился, плохо отображался на телефонах и не индексировался поисковиками. Нужно было создать быстрый, современный лендинг, который будет привлекать клиентов через поиск и соцсети.

Требования:

Простая и понятная структура — за 10 секунд посетитель понимает, кто, что делает и сколько стоит
Форма записи на массаж с уведомлениями в Telegram
Адаптивность — 70% клиентов заходят с телефонов
Быстрая загрузка — не терять трафик из-за тормозов
SEO-база — чтобы сайт находили по запросам «детский массаж [город]»
Возможность самостоятельно менять тексты и фото без программиста

Решение

Как делал

1. Структура и тексты

Сначала спроектировал структуру лендинга. Главный экран с фото специалиста и УТП, блок услуг с ценами, информация о методике, отзывы родителей, форма записи и контакты. Помог заказчику с текстами — сформулировал чёткие заголовки и описания.

2. Дизайн

Выбрал спокойную, доверительную цветовую гамму. Мягкие оттенки, приглушённые акценты, много воздуха. Дизайн должен ассоциироваться с заботой и профессионализмом, а не с навязчивым маркетингом.

3. Верстка

Ручная вёрстка HTML/CSS/JS без фреймворков и конструкторов. Mobile-first подход — сначала мобильная версия, потом десктоп. Использовал CSS Grid и Flexbox, CSS-переменные для единообразия.

4. Анимации

Плавные появления блоков при скролле, hover-эффекты на кнопках и карточках. Без тяжёлых библиотек — только CSS transitions и лёгкий JS. Сайт работает плавно даже на бюджетных телефонах.

5. Форма записи

Простая форма: имя ребёнка, возраст, контакт родителя, выбор услуги. Данные приходят в Telegram-бот и на email. Валидация полей, маска телефона, сообщение об успешной отправке.

6. SEO

Правильная структура заголовков (H1-H3), meta description, Open Graph, Schema.org, sitemap.xml. Технически сайт готов к индексации.

7. Запуск

Деплой на хостинг, подключение домена baby-massage05.ru, настройка SSL, тестирование на реальных устройствах.

Результаты

Что получилось

Технические результаты

Сайт загружается менее чем за 2 секунды на десктопе
Корректное отображение на всех устройствах — от iPhone SE до 27" мониторов
Валидная HTML5/CSS3 разметка — проходит валидацию W3C
Форма записи работает стабильно, уведомления приходят в Telegram и на email
Сайт проиндексирован Google и Яндексом
Базовая SEO-оптимизация настроена, sitemap.xml подключён

Примечание: Проект запущен недавно, коммерческие результаты (количество заявок, конверсия) ещё накапливаются. Технические показатели — корректная индексация, скорость загрузки, мобильная адаптивность — соответствуют заявленным.

«Кроха и Я» — лендинг для детского массажа