ARROW — лендинг логистической компании
Сделали для ARROW лендинг логистической компании на трёх языках: отслеживание и расчёт груза в первом экране, услуги, этапы работы и ответы на частые вопросы. Лендинг запустили через пять дней после брифа, а Lighthouse оценил его в 98 баллов из 100.
Задача
ARROW — логистическая компания, которая берёт на себя грузоперевозки и доставку «под ключ» и позиционирует себя как премиальный сервис. На сайте она представляет три направления: международные перевозки авиа-, морским и наземным транспортом, логистику для интернет-магазинов и доставку от двери до двери.
ARROW занимается грузоперевозками и доставкой «под ключ», и ей был нужен лендинг логистической компании, который за минуту объясняет главное: какие грузы компания берёт в работу, каким транспортом и на каких условиях. В логистике клиент доверяет не красивой картинке, а ощущению контроля, поэтому страница должна была с первого экрана показывать масштаб и порядок, а не общие слова о надёжности.
У посетителей разные цели. Одному нужно узнать, где сейчас его груз, другому — получить расчёт новой отправки, третьему — спросить про таможню или страховку. Если свести всё это к одной кнопке «Связаться», часть людей уйдёт искать ответ у конкурентов, так и не оставив заявку.
Клиенты ARROW читают по-русски, по-узбекски и по-английски. Каждой версии нужен был свой адрес, чтобы поисковики показывали человеку страницу на его языке. При этом тексты услуг, шаги работы и ответы на вопросы должны были совпадать во всех трёх версиях до детали.
Визуальная задача — кинематографичная подача: крупные кадры грузовиков и судов, видео и анимации при прокрутке. Такие сцены легко перегружают страницу и мешают на телефоне, а срок был жёстким — пять дней от брифа до запуска. Нужно было совместить эффектную картинку со скоростью и не потерять по дороге ни одной заявки.
Решение
Мы выстроили лендинг как маршрут груза. Первый экран сразу предлагает действие — отследить отправку или запросить расчёт, дальше идут манифест компании, три услуги, сцена с контейнером, преимущества, отзывы, четыре шага работы и блок, где частые вопросы стоят рядом с формой заявки.
Каждый сценарий получил свою точку входа. Виджет в первом экране принимает номер отслеживания или идентификатор отправки, форма внизу — вопрос с контактами. Все три канала записывают заявки в Google Таблицы через Apps Script, каждый на свой лист и с пометкой языка, а скрытое поле-ловушка и ограничение частоты отправки отсекают спам без капчи.
Лендинг собран как SPA на React и TypeScript, сборщик — Vite. Сцены при прокрутке сделаны на GSAP ScrollTrigger и учитывают системную настройку «уменьшить движение». Каждая из трёх языковых версий открывается по своему адресу с разметкой hreflang, а сам сайт размещён на Vercel.
Отслеживание и расчёт в первом экране
Виджет в первом экране работает в двух вкладках: отследить заказ по номеру или отправить идентификатор груза для расчёта стоимости. Запрос сразу фиксируется, и команда присылает детали, а кнопки App Store и Google Play честно сообщают, что мобильное приложение готовится к выходу.
Три услуги — три сцены
Международные перевозки авиа-, морским и наземным транспортом, логистика для интернет-магазинов и доставка от двери до двери получили по пронумерованной сцене с крупной фотографией, коротким описанием и кнопкой действия. Посетитель сразу видит, какая из трёх подходит его грузу.
Контейнер на крюке крана
При прокрутке брендированный контейнер поднимается на крюке крана: сцена закреплена на экране и связана с прокруткой через GSAP. Рядом — видеотизер о компании, который открывается в модальном окне и не уводит посетителя со страницы.
Процесс и преимущества коротко
Четыре шага — от запроса расчёта до доставки к двери — показаны с фотографиями и переключателем этапов. Аккордеон отличий укладывает в четыре пункта логистику от двери до двери, доставку к точному времени, таможенное оформление и персонального менеджера.
Вопросы и форма рядом
Семь частых вопросов — о видах грузов, сроках, таможне, отслеживании, повреждениях, экологичных вариантах и времени забора — стоят рядом с формой из имени, телефона, email и сообщения. Форма просит хотя бы один контакт и объясняет каждую ошибку простыми словами.
Заявки сразу в Google Таблицы
Запросы на отслеживание, расчёты и сообщения попадают на отдельные листы одной таблицы с пометкой языка сайта. Скрытое поле-ловушка и лимит на повторную отправку отсекают ботов, а при сбое сети посетитель видит понятное сообщение, а не молчаливую ошибку.
Результаты
Главные итоги проекта в цифрах.
- 3Языковые версии
Отдельные адреса для RU, UZ и EN помогают поисковикам показывать людям нужную версию.
- 98/100Оценка Lighthouse
Тяжёлые сцены с анимацией не помешали странице получить 98 баллов из 100 в Lighthouse.
- 5 днейОт брифа до запуска
Путь от брифа до опубликованного лендинга занял пять дней.
- 3Канала заявок
Отслеживание, расчёт и вопросы попадают на отдельные листы в таблице команды.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- TypeScript
- React
- GSAP
- Vite
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.