Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт на Next.js · лендинг услуги

Лендинг стоматологии

Красивый лендинг без заявок — это визитка. Пациент стоматологии боится двух вещей: боли и того, что цена вырастет в кресле. Поэтому сайт здесь отвечает на эти страхи и сразу даёт действие: посчитать план лечения с платежом в месяц, пройти квиз за минуту, выбрать врача и время без звонка или спросить консультанта в чате. Всё, что делает посетитель, становится заявкой или целью аналитики, а первый экран проверяется A/B-тестом — так видно, какой заголовок приносит больше записей.

Сценарий: Стоматология «Эмаль» в Екатеринбурге — вымышленная: 25 услуг с ценами, пять врачей со своим расписанием, отзывы, частые вопросы и часы работы по местному времени.

Скриншот демо: Лендинг стоматологии

Открыть демо

Открыть сайт

Сайт адаптирован под телефон: откройте с мобильного — снизу появится панель «Позвонить / Записаться».

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • A/B-тест заголовка первого экрана: вариант выбирается на сервере до отрисовки и закрепляется в cookie, без мигания; итоги — со статистической значимостью

  • Прайс с вкладками и поиском, который понимает «чистка» и «нерв», и калькулятор плана лечения: итог, рассрочка 0% на 6–24 месяца, налоговый вычет и число визитов

  • Квиз из четырёх вопросов: рекомендация с врачом и ценами, запись к этому врачу или звонок администратора

  • Онлайн-запись: услуга, подходящий врач, 14 дней с его днями приёма, свободные и занятые слоты по времени Екатеринбурга

  • После записи — номер, файл .ics с напоминанием за 2 часа и ссылка в Google Календарь

  • ИИ-консультант в чате отвечает по прайсу, врачам, частым вопросам и часам работы, показывает источники и предлагает записаться

  • Ползунок оттенка по шкале VITA показывает результат отбеливания до и после для двух способов

  • Формы с маской телефона, проверкой на сервере, защитой от ботов и ограничением частоты; согласие по 152-ФЗ обязательно

  • Cookie-баннер: без согласия цели в Яндекс Метрику не отправляются

  • Микроразметка Dentist и FAQPage, Open Graph, индикатор «открыто сейчас», мобильное меню и нижняя панель на телефоне

  • Панель владельца: заявки с UTM-метками и статусами, выгрузка в Excel, цели аналитики, A/B-тест, Core Web Vitals и SEO-проверка страницы

Как попробовать

  1. Соберите план лечения

    В «Ценах» найдите «имплант» и добавьте его в план вместе с КТ. Переключите рассрочку на 24 месяца — платёж и налоговый вычет пересчитаются.

  2. Пройдите квиз

    «Подобрать лечение за минуту» → «Нет зуба» и ещё три ответа. Сайт порекомендует имплантолога и цены, оттуда можно сразу выбрать время.

  3. Запишитесь к врачу

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

  4. Спросите консультанта

    Кнопка чата справа внизу: «Сколько стоит имплант?», «Можно получить налоговый вычет?», «Работаете в воскресенье?». Под ответом — откуда он взят.

  5. Откройте панель владельца

    Кнопка в верхней полосе. Во вкладке «Заявки» — всё, что вы отправили, с UTM и вариантом A/B; в «Целях» — каждый клик; в «A/B» можно переключить заголовок первого экрана.

Без платных нейросетей

Платных запросов к нейросетям нет: консультант собирает ответ поиском по прайсу, врачам и частым вопросам сайта и показывает источники. Формы по-настоящему проверяются на сервере, но заявки не хранятся — они возвращаются в ваш браузер и видны только вам в «Панели владельца». Расписание врачей и итоги A/B-теста — демонстрационные.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Заявки и записи — в amoCRM, Битрикс24 или МИС клиники (IDENT, Medods), уведомление администратору в Telegram
  • Расписание и свободные слоты из МИС в реальном времени, SMS-напоминания и подтверждение записи
  • Консультант на языковой модели YandexGPT или GigaChat по той же базе: прайс, врачи, частые вопросы — с запретом выдумывать цены
  • Яндекс Метрика с целями и электронной коммерцией, A/B-тесты на сервере без мигания, отчёт по конверсии вариантов
  • Контент правится в админке (Payload, Strapi или WordPress как headless), сайт собирается статикой и открывается мгновенно

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Посетитель не уходит думать: за минуту он видит цену своего лечения с платежом в месяц и сам выбирает время у врача.
  • Каждая заявка приходит с источником, страницей и вариантом заголовка — видно, какая реклама и какой текст приводят пациентов.
  • Заголовок проверяется A/B-тестом на живом трафике, и решение принимается по цифрам, а не по вкусу.

Для разработчиков

  • Next.js 16 App Router: вариант A/B выбирается в proxy.ts до рендера и передаётся странице через cookie запроса — без мигания и без клиентского JS.
  • Формы — Server Actions с общей схемой проверки, honeypot и ограничением частоты; маска и нормализация телефона покрыты тестами.
  • Расписание, план лечения, календарный файл и поиск консультанта — чистые функции с тестами, а основные сценарии проходит браузерный смоук-тест.

Советы

  • Совет 01

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

  • Совет 02

    Не включайте Метрику до согласия на cookie: это требование 152-ФЗ, и баннер с «Разрешить» почти не снижает конверсию.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · B2B, многостраничный

    работает

    Сайт производственной компании

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · ИИ-перевод, SEO по языкам

    работает

    Экспортный сайт на четырёх языках

    Сайт экспортёра алтайского мёда на русском, английском, китайском и арабском: переведённые адреса страниц, SEO по языкам, калькулятор оптовой цены с доставкой и студия перевода, которая проверяет черновик нейросети по глоссарию.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · кабинет, ИИ-помощник, Telegram

    работает

    Личный кабинет клиента

    Кабинет клиента типографии: заказы с этапами производства, согласование макета с правками прямо на макете, счета с оплатой по СБП, документы с электронной подписью, новый заказ с расчётом цены, чат с ИИ-помощником и менеджером, уведомления в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

    Онлайн-школа аналитики: лендинг с задачей на Python, которая проверяется прямо в браузере, тест уровня с персональной программой, рассрочка с расчётом налогового вычета, кабинет ученика с домашними заданиями и ИИ-ревью, ИИ-наставник по материалам курса и сертификат с проверкой по QR-коду.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

    Сайт юрфирмы: ситуация своими словами прямо в шапке, ИИ-разбор с оценкой перспектив, претензия в Word, госпошлина, неустойка и срок давности, чек-лист документов, ход дела в личном кабинете, конструктор цены и запись к юристу.

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт ресторана на Next.js · меню, бронь, доставка

    работает

    Ресторан с доставкой

    Сайт ресторана с доставкой: меню с фильтрами по аллергенам и диетам, ИИ-подбор ужина по обычной фразе, бронь стола по схеме зала со свободными столами на выбранное время, корзина с зонами доставки, минимальным заказом и промокодами, отслеживание заказа с курьером на карте.

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

    Сайт фитнес-студии малых групп: расписание на неделю с местами и записью в два клика, лист ожидания с автоматическим переносом в группу, абонементы с заморозкой из кабинета, ИИ-план тренировок на 4 недели по пяти вопросам и личный кабинет со статистикой посещений.

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

    Сайт двухдневной конференции: программа по залам и трекам с личным расписанием, ИИ-подбор докладов без пересечений по роли и свободному тексту, билеты волнами с промокодами и скидкой команде, QR-код на каждого участника с проверкой на входе и нетворкинг с подбором собеседников и встречами в перерывах.

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

    Корпоративный сайт транспортной компании: калькулятор, который сразу сравнивает сборный груз и отдельную машину, отслеживание груза с машиной на карте, ИИ-разбор заявки из письма или накладной с подсветкой пропущенных полей, карта складов и терминалов с расчётом хранения, анкета перевозчика с проверкой допуска и реквизиты с проверкой контрольных сумм.

    • Next.js
    • React
    • TypeScript