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






О проекте
Коммерческий одностраничный сайт для студии массажа «Лаванда» в Зеленограде. Задача — не просто визитка, а рабочий инструмент продаж: показать услуги и цены, снять возражения, довести до записи через форму, звонок или мессенджеры.
Сайт: [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)
Стек технологий
| Слой | Технологии |
|---|---|
| Frontend | Next.js 14, React 18, TypeScript |
| UI | Tailwind CSS, Radix UI, shadcn/ui |
| Backend | Next.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#малый бизнес