← На главную

● Live

Лаванда — лендинг студии массажа

Next.js + TypeScript: форма записи с заявками в Telegram, каталог услуг с ценами и абонементами, карта и мессенджеры. Полный цикл — вёрстка, API, деплой на VPS с SSL.

Лаванда — лендинг студии массажа — 1
Лаванда — лендинг студии массажа — 2
Лаванда — лендинг студии массажа — 3
Лаванда — лендинг студии массажа — 4
Лаванда — лендинг студии массажа — 5
Лаванда — лендинг студии массажа — 6

О проекте

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

Сайт: [lavanda-studio.ru](https://lavanda-studio.ru/)

Задача

  • Презентовать услуги (оздоровительный, детский, грудничковый массаж, консультации) с ценами и абонементами
  • Упростить запись без звонка в студию
  • Дать быстрый контакт: телефон, WhatsApp, Telegram, карта
  • Обеспечить стабильную работу на VPS в РФ (HTTPS, деплой, доставка заявок)

Что сделано

Структура и контент

  • Hero с акцией Welcome Visit (−20%)
  • Блок «О нас» и преимущества
  • Каталог услуг: описание, длительность, цены, абонементы, кнопка записи на каждую услугу
  • Блок «Наши специалисты» — команда с медицинским и педагогическим опытом
  • Акции, отзывы, FAQ
  • Контакты: адрес, режим работы, Яндекс.Карта, маршрут

Конверсия и заявки

  • Модальная форма записи (имя, телефон, email, выбор услуги)
  • Согласие на обработку данных
  • Отправка заявок в Telegram нескольким администраторам
  • Защита от спама (rate limit, валидация, фильтр подозрительных слов)
  • Нормализация российских номеров (8 (936)... → +7936...)
  • Плавающие кнопки: заявка, WhatsApp, звонок

Техническая часть

  • Адаптивная вёрстка (mobile-first)
  • Next.js App Router, API Route для backend без отдельного сервера
  • Обход блокировки api.telegram.org на российском VPS (HTTPS через IP + SNI)
  • Деплой: Node.js, PM2, Nginx, Let's Encrypt
  • Заголовки безопасности (HSTS, CSP, X-Frame-Options)

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

СлойТехнологии
FrontendNext.js 14, React 18, TypeScript
UITailwind CSS, Radix UI, shadcn/ui
BackendNext.js API Routes, Node.js https
ИнтеграцииTelegram Bot API, Яндекс.Карты, WhatsApp / tel-ссылки
ИнфраUbuntu VPS, PM2, Nginx, SSL (Let's Encrypt)

Результат

  • Сайт в продакшене с рабочим HTTPS
  • Заявки с формы приходят в Telegram в реальном времени
  • Запись доступна с любой секции: шапка, услуги, контакты, плавающая кнопка
  • Контент и медиа сохранены при обновлениях без простоя
Next.js 14React 18TypeScriptTailwind CSSshadcn/uiTelegram Bot APIPM2Nginx
#Next.js#TypeScript#лендинг#услуги#форма заявок#Telegram Bot#адаптив#VPS#Nginx#малый бизнес