Лендинг сервисной компании B.G. Boutique

B.G. Boutique из Петах-Тиквы помогает русскоязычным жителям Израиля с документами, переводами и нотариальным заверением, путешествиями, финансированием и открытием бизнеса. Компании нужен был лендинг, который понятно рассказывает о каждом направлении и собирает обращения. Дизайн-макет у клиента уже был.

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

Структура страницы

Лендинг состоит из первого экрана, блока услуг, раздела «Процесс», информации о компании с анимированными цифрами, отзывов, ленты партнёров, ответов на частые вопросы и формы обратной связи. В разделе «Процесс» для каждого направления расписаны шаги. Для переводов это анализ документов, согласование сроков и оплаты, оформление, перевод и легализация, передача документов клиенту. Посетитель заранее понимает, как пройдёт работа, и приходит с меньшим числом вопросов.

Вёрстка и анимации

Сайт написан на Next.js 16 и React 19 со стилями на Tailwind CSS и компонентами shadcn/ui. Отзывы и партнёры прокручиваются в каруселях Embla с автопрокруткой, появление блоков и счётчики анимированы через Framer Motion. Изображения отдаются в формате WebP, шрифт подключён локально, а форма обратной связи загружается отдельно от основной страницы, поэтому первый экран открывается быстрее.

Заявки на почту

Форма собирает имя, телефон и сообщение и проверяет номер перед отправкой. Обращение уходит через серверный маршрут Next.js и Nodemailer на почту компании в виде свёрстанного HTML-письма в фирменных цветах, где поля заявки собраны в таблицу. После отправки посетитель видит окно с благодарностью.

Поисковая оптимизация

Для поисковых систем настроены карта сайта, robots.txt и разметка Schema.org с типом ProfessionalService и адресом компании. Для ссылок в мессенджерах и соцсетях подготовлено изображение Open Graph, подключена Google Analytics. Отдельно сделаны страница 404 в стиле сайта, политика конфиденциальности и условия использования.

Запуск на сервере

Сайт упакован в Docker и развёрнут на VPS через docker-compose. Обновление или перенос на другой сервер не требуют ручной настройки окружения.

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

Технологии: Next.js 16, React 19, TypeScript, Tailwind CSS, shadcn/ui, Embla Carousel, Framer Motion, Nodemailer, Docker.