Лендинг и платформа онлайн-тестов для психолога

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

Второе тянет сильнее, чем кажется. В психологии первое обращение почти всегда происходит после долгого внутреннего колебания. Человек несколько недель ходит вокруг мысли "наверное, надо бы", но не готов сразу говорить об этом живому человеку. Если между "думаю" и "пишу" появляется промежуточная точка — короткий тест, честная интерпретация без диагноза, — сопротивление падает, и часть аудитории доходит до формы, которая иначе просто закрыла бы вкладку.

Из этой пары задач и родилось два независимых Next.js-приложения: продающий лендинг и отдельная платформа самодиагностики.

Логично было бы сложить всё в один проект и сделать тесты подразделом сайта. Мы сознательно этого не сделали.

Первое — жизненные циклы разные. Лендинг меняется медленно: раз в квартал новая формулировка, новая фотография, новый отзыв. Платформа тестов, наоборот, обречена расти. Сегодня четыре опросника, через полгода пятнадцать, с фильтрацией по темам и, возможно, платным разделом. Распутывать связанные релизные циклы через год дороже, чем развязать их в первый день.

Второе — доверие. Когда человек проходит тест на депрессию на том же домене, где висит кнопка "Записаться на сессию", у него закономерно возникает подозрение: а не увидит ли психолог, что я нажимал? Разные приложения на разных поддоменах снимают этот вопрос одной строкой в архитектуре: твои ответы не попадают в мою CRM, потому что моей CRM здесь физически нет.

Третье — про рост. Если однажды платформу тестов захочется отвязать от одного специалиста и превратить в самостоятельный продукт (встроить в чужие сайты через iframe, партнёриться с образовательными платформами) — это будет одно техническое решение, а не реархитектура.

Один экран — одно решение. Десять секций — первый экран, "Для кого", "Как устроена работа", "Обо мне", "Этапы", "Результаты", "Стоимость", FAQ, форма и отдельный CTA на тесты — ведут читателя от узнавания себя в описании тревог до формы контакта.

Стек — Next.js 15 App Router, React 19, Tailwind CSS v4, Framer Motion на скролл-анимациях. Framer здесь не декорирует, а работает: параллакс на портрете в первом экране, spring-физика реакции карточек, staggered появление аудиторных персон. По отдельности каждая деталь незаметна. В сумме они делают то, что не сделает ни один шаблон — ощущение аккуратного пространства.

Форма — React Hook Form плюс Zod. Пять обязательных чекбоксов (оферта, политика конфиденциальности, обработка данных, информированное согласие, добровольность участия) — не бюрократическая надстройка, а именно тот минимум, который для частной практики закрывает и 152-ФЗ, и профессиональную этику. После сабмита форма уходит на /api/contact и оттуда — прямиком в Telegram специалиста через Bot API. Без базы, без CRM, без промежуточных таблиц: пользователь пишет — специалист получает.

Четыре юридические страницы — оферта, политика конфиденциальности, информированное согласие, условия отмены — вынесены отдельно. Их часто откладывают на потом, но для психологии это часть продукта, а не хозяйственная пыль. Клиент читает информированное согласие ещё до сессии — и это работает и на доверие, и на профессиональные границы.

Палитра тёплая: молочный кремовый, глиняный, шалфейно-зелёный. Заголовки — Cormorant Garamond, корпус — Inter. Дизайн решает главную задачу первого экрана психолога: не выглядеть как клиника, но и не выглядеть как эзотерический блог.

На старте — четыре стандартизированных клинических опросника: HADS (тревога и депрессия), шкала тревоги Бека (BAI), шкала депрессии Бека (BDI-II). Не потому что "побольше", а потому что это тесты, которые действительно используются в практике, — а не собранные из интернета анкеты для развлечения.

Каждый тест — это TypeScript-объект, провалидированный Zod-схемой на этапе импорта. Схема требует уникальных идентификаторов вопросов, непересекающихся диапазонов в шкале интерпретации, согласованности между тарифом и ценой. Если что-то не сходится — приложение просто не собирается. Мы предпочли этот подход обратному: сборка прошла, а на проде пользователь встречает страницу "результат: undefined".

Реестр тестов — единственная точка правды. Чтобы добавить пятнадцатый тест, разработчик создаёт один файл и импортирует его в реестр. Всё остальное — каталог, роутинг, sitemap, OG-превью — подтягивается автоматически. Работа на десять минут, а не на день.

Прохождение — React Context плюс sessionStorage. Ответы живут только в текущей вкладке, между сессиями не переносятся, после генерации результата очищаются. Навигация — свайпы (Framer Motion drag, порог 80 пикселей), стрелки на клавиатуре, автопродвижение на single-select. Всё это уважает prefers-reduced-motion: если у пользователя в системе стоит запрет анимаций — платформа беззвучно снимает свайпы, параллакс и spring-эффекты. Не спорит с системными настройками, а слушается их.

Результат — не сухие "у вас 12 баллов", а трёхуровневая интерпретация: диапазон, человеческое описание, конкретная рекомендация и CTA (либо на страницу специалиста, либо на просветительский материал). Плюс кнопка "Скачать PDF" — генерируется прямо в браузере через @react-pdf/renderer, который подгружается лениво, только по клику. На сервер не уходит ни один байт.

Отдельно — про то, чего в архитектуре нет.

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

Это не пропуск — это архитектурное решение. Психологические опросники по 152-ФЗ — данные особой категории. Любой сервер, который их принимает и хранит, автоматически становится оператором персональных данных со всеми вытекающими: уведомление в Роскомнадзор, локализация на территории РФ, регулярный аудит. Для одного специалиста, который занимается практикой, а не платформенным продуктом, это несоразмерная нагрузка. Мы её просто убрали — спроектировали систему так, чтобы данные до сервера физически не доходили.

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

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

Продукт вышел компактным, а не "MVP, который стыдно показать". И масштабируется он не переписыванием, а добавлением файлов: новый тест — один файл, новая юридическая страница — один route, новая страница услуги на лендинге — одна секция. Каждое решение размером с день, а не со спринт рефакторинга.