РостЛайнЛогистик

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

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

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

Подход

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

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

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

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

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

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

Визуальную часть мы построили вокруг техники и процесса перевозки. На первом экране используется анимация, связанная с прокруткой: последовательность кадров показывает груз, а графические элементы объясняют габариты. Для устройств с ограниченными ресурсами предусмотрены облегчённые кадры; настройка уменьшения движения учитывается отдельно. Фотографии перевозок и визуализации выполняют разные задачи, и мы сохранили это различие в подписях.

Особое внимание мы уделили обращению после расчёта. В заявку передаются тип груза, масса, размеры, маршрут, месяц, диапазон цены и версия ставок. Логист получает исходные данные разговора. Рекламные метки и страница обращения добавляют контекст источника, а интерфейс обработки заявок помогает продолжить работу с клиентом.

Стек

Публичную часть мы разработали на Astro с TypeScript и собственными стилями CSS. Страницы собираются в готовый HTML. Для интерактивных элементов используются браузерные сценарии, а анимация первого экрана реализована через Canvas и SVG. Такой состав технологий соответствует структуре проекта: содержательные страницы дополняются калькулятором, формами и отдельными визуальными сценами.

Для управления мы использовали Payload CMS на Next.js и React, с базой PostgreSQL. В админке доступны ставки, виды техники, контакты, акции, медиа, кейсы и статьи. Изменения конфигурации публикуются для сайта, после чего запускается пересборка статической версии. Редактор может обновлять рабочие сведения через CMS, сохраняя единый источник данных для страниц и калькулятора.

Обработка заявок вынесена в отдельный сервис на Node.js. Он проверяет поступившие данные, сохраняет обращение и передаёт его в CMS. Устойчивая очередь и повторные попытки доставки предусмотрены на случай временной недоступности зависимых сервисов. Проверка идентификатора запроса помогает избежать повторного создания одного обращения при повторной отправке формы.

В CMS мы реализовали статусы заявок, назначение ответственного, заметки, историю действий и контроль дальнейшей работы. Права доступа разделены по ролям. Предусмотрены интеграции уведомлений через Telegram, MAX и электронную почту. Их использование зависит от настроенных каналов и получателей; сама возможность доставки встроена в процесс обработки обращения.

Для аналитики подготовлены интеграция Яндекс Метрики, события калькулятора и форм, отслеживание кликов по контактам и сохранение рекламной атрибуции. Реализована возможность передачи офлайн-конверсий после изменения статуса сделки. Техническая основа SEO включает canonical, sitemap, robots, Open Graph и структурированные данные. Развёртывание организовано через Docker Compose, nginx и Caddy; предусмотрены проверки состояния сервисов, атомарная публикация сайта и зашифрованные резервные копии.

Результат

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

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

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