Описание задачи и цели клиента:
Компания «Панорама» — производитель окон (пластик, дерево, дерево-алюминий, алюминий) и остекления в Астрахани с собственным производством. Клиент обратился с задачей создать современный корпоративный сайт, который заменил бы устаревший ресурс и стал основным каналом привлечения заявок.
Ключевые цели клиента:
Генерация лидов — максимум звонков и заявок через сайт. Основной инструмент — форма вызова замерщика (бесплатный выезд), размещённая на каждой странице.
Квиз-калькулятор — вовлечь посетителя в интерактивный подбор окна: тип конструкции, материал, профиль, стеклопакет, цвет. По итогу квиза пользователь оставляет контакт для расчёта стоимости.
Каталог продукции — отдельные страницы под каждый тип продукта (пластиковые, деревянные, алюминиевые окна, остекление, жалюзи и рольшторы) с описанием преимуществ, характеристик и технологий производства.
Витрина товаров — страница с карточками товаров, ценами, описанием, условиями доставки и оплаты.
Доверие и репутация — блоки с портфолио выполненных работ, отзывами клиентов, информацией о компании и гарантиях.
SEO — каждая страница с уникальными title/description, серверный рендеринг через Next.js для индексации поисковиками.
Административная панель — возможность управлять категориями и товарами без привлечения разработчика.
Воронка продаж выстроена по схеме: баннер с призывом → квиз (вовлечение) → форма заявки → звонок менеджера.
Разработал многостраничный корпоративный сайт на Next.js 14 с серверным рендерингом (SSR) для SEO-оптимизации. Каждая страница получила уникальные мета-теги (title, description), что обеспечивает правильную индексацию по целевым запросам.
Структура и архитектура:
Сайт разбит на отдельные страницы под каждый продукт: пластиковые окна, деревянные окна, алюминиевые конструкции, остекление, жалюзи и рольшторы. Это позволяет каждой странице ранжироваться по своим ключевым запросам. Компонентная архитектура построена по принципу разделения ответственности: контейнеры управляют данными и состоянием, UI-компоненты отвечают только за отображение.
Воронка лидогенерации:
Реализована трёхступенчатая воронка. Баннер на главной с призывом «Узнать стоимость за 2 минуты» ведёт на квиз. Квиз-калькулятор — интерактивный 4-шаговый опросник: тип конструкции (7 вариантов), материал (4 типа), технические параметры (профиль, стеклопакет, цвет — уникальные наборы под каждый материал), финальная форма с отправкой заявки. Управление состоянием квиза реализовано через собственный редьюсер (useReducer). Форма вызова замерщика с маской телефона (+7) размещена на каждой странице сайта.
Отправка заявок:
Интеграция с Nodemailer — заявки из форм приходят напрямую на email компании. Реализовано два эндпоинта Next.js API: для формы квиза и для формы замерщика. После отправки пользователь видит подтверждение без перезагрузки страницы.
Витрина товаров:
Страница с карточками товаров: фото, название, цена, описание, технические характеристики, условия доставки и оплаты. Реализована навигация по категориям через API с возможностью управления из административной панели.
Портфолио и социальное доказательство:
Галерея выполненных работ на базе Swiper — двухуровневый слайдер с основными изображениями и вертикальной панелью миниатюр для быстрого переключения. Блок отзывов клиентов. Секция преимуществ компании.
Административная панель:
Закрытая страница /admin для управления категориями и продуктами — добавление, редактирование, удаление без вмешательства разработчика.
UI и адаптивность:
Вёрстка выполнена на styled-components с поддержкой адаптивного дизайна до 480px. Разработана собственная библиотека UI-компонентов: кнопки, инпуты, селекты, чекбоксы, контейнеры — для единообразия интерфейса. Реализован прелоадер изображений и кнопка прокрутки наверх. Глобальные стили шрифтов и Swiper вынесены в отдельные SCSS-файлы.
Сдан готовый к продакшену корпоративный сайт, полностью закрывающий потребности компании в онлайн-присутствии и привлечении клиентов.
Что получилось:
Многостраничный сайт с 9 публичными страницами под каждое направление бизнеса. Все страницы проиндексированы поисковиками благодаря SSR — Next.js отдаёт полностью сформированный HTML, что критично для продвижения в нише «окна Астрахань».
Квиз-калькулятор вовлекает посетителя в диалог вместо пассивного просмотра: пользователь проходит 4 шага и в финале оставляет контакт. Это снижает порог входа по сравнению с обычной формой — человек уже вложил время и получает персонализированное предложение.
Заявки из всех форм приходят напрямую на email менеджеров компании в реальном времени — никаких сторонних CRM или ручного обхода кабинетов. Форма замерщика размещена на каждой странице, что сокращает путь от интереса до заявки до одного клика.
Витрина товаров с карточками позволяет компании представить ассортимент с ценами и характеристиками — фактически интернет-магазин без корзины, заточенный под звонок или заявку.
Административная панель позволяет менеджеру самостоятельно обновлять категории и товары без обращения к разработчику — снижает операционную зависимость от техподдержки.
Как используется на практике:
Сайт является основным маркетинговым инструментом компании: рекламные кампании в Яндекс.Директ и ВКонтакте ведут трафик на конкретные посадочные страницы (пластик, дерево, остекление). Каждая страница оптимизирована под свой кластер запросов. Квиз используется как прогревающий инструмент в связке с таргетированной рекламой.