Людмила Мираева

Задача

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

Результат

• —Готовый лендинг под ключ: портретное фото, 6 направлений работы, услуги с ценами, блок «как проходит работа», реальные кликабельные контакты.
• —Заявки с формы автоматически приходят на почту специалиста в реальном времени — не нужно вручную мониторить сайт.
• —Страница SEO-готова с нуля: структурированные данные и OG-теги для корректной индексации и красивых сниппетов при шеринге.
• —Полностью адаптивная вёрстка (десктоп/мобайл), готова к продакшен-деплою на Vercel без доработок.

Решение

• —Next.js (App Router) + React + TypeScript; весь контент сайта (услуги, направления работы, этапы, контакты, цифры) вынесен в единый типизированный модуль content.ts — секции рендерятся из данных, а не хардкодятся в JSX.
• —Дизайн-система на CSS Modules без UI-фреймворка: кастомные шрифты через next/font (Cormorant Garamond + Mulish), адаптивная сетка, собственные SVG-иконки под тематику направлений.
• —Форма обратной связи на серверном Route Handler (/api/contact): сервер валидирует данные и отправляет письмо через SMTP Яндекса (Nodemailer) напрямую на почту специалиста, credentials — через переменные окружения.
• —SEO из коробки: структурированные данные JSON-LD (ProfessionalService + Person), метатеги и Open Graph через Next.js Metadata API, оптимизация изображений next/image.