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

Задача

Сделать понятный сайт для записи

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

Что должно было быть на странице

Первый экран, на котором сразу видно, какие услуги предлагает специалист, сколько они стоят и как записаться
Форма записи на массаж с уведомлениями в Telegram
Адаптивная версия с приоритетом мобильного просмотра
Быстрая загрузка страницы
Базовая SEO-подготовка под запросы о детском массаже

Решение

Собрал страницу вокруг пути к записи

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

Разбил лендинг на экраны с понятной задачей: первый знакомит со специалистом, услуги и цены помогают сориентироваться, блок о методике отвечает на частые вопросы, а форма и контакты ведут к записи. Помог с текстами, чтобы заголовки и описания читались без лишних объяснений.

2. Дизайн

Выбрал спокойную цветовую гамму, мягкие оттенки и много свободного места. Такой дизайн не отвлекает от информации о специалисте, услугах и записи.

3. Верстка

Сверстал сайт на HTML, CSS и JavaScript без фреймворков и конструкторов. Сначала собрал мобильную версию, затем адаптировал её для больших экранов. Для сетки использовал CSS Grid и Flexbox. Единые настройки стилей задал через CSS-переменные.

4. Анимации

Добавил плавное появление блоков при прокрутке и состояния наведения для кнопок и карточек. Для этого использовал CSS transitions и небольшой JavaScript без тяжёлых библиотек.

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

В форме родитель указывает имя и возраст ребёнка, свой контакт и услугу. Заявка уходит через Formspree и дублируется в Telegram. Поля проверяются перед отправкой, после неё появляется сообщение.

6. SEO

Добавил структуру заголовков H1–H3, meta description, sitemap.xml, robots.txt и Schema.org. Open Graph настроил отдельно, чтобы ссылка на сайт аккуратно выглядела в соцсетях и мессенджерах.