ВАЗИЯТ ГРУПП — сайт доставки авто из-за рубежа
ВАЗИЯТ ГРУПП · доставка авто из-за рубежа, Беларусь
ВАЗИЯТ ГРУПП пригоняет автомобили под заказ из Кыргызстана, США, Китая и Южной Кореи — с подбором, выкупом, растаможкой и доставкой по всей Беларуси. Нужен был не просто сайт, а премиальная витрина, которая с первого экрана внушает доверие к дорогой покупке и ведёт к заявке. Мы спроектировали и собрали лендинг с нуля на Next.js — с 3D-фоном, интерактивной картой маршрутов и живым каталогом авто.
Задача
- Заявки шли из соцсетей и переписки, а сама услуга — покупка авто за рубежом на десятки тысяч долларов — держится на доверии, которого прежний формат не давал. Нужна была премиальная площадка, которая объясняет процесс, снимает страхи (растаможка, риски, сроки) и превращает интерес в заявку.
Что сделали
- Спроектировали структуру премиум-лендинга: герой, процесс работы, интерактивная карта маршрутов, каталог авто, проверка, растаможка, отзывы и FAQ.
- Собрали на Next.js 16 + React 19 + TypeScript в тёмной премиум-эстетике (oklch-токены, брендовый оранжевый акцент).
- Оживили ключевые блоки: WebGL-фон на Three.js, анимированный герой с печатью и ротацией стран, интерактивная карта мира с маршрутами.
- Сделали живой каталог авто с ценами и характеристиками и блок «рентген»-проверки автомобиля по точкам.
- Добавили плавный скролл (Lenis), форму заявки, отзывы, калькулятор растаможки и полную адаптивность (mobile-first).
Результат
- Премиальная витрина, которая с первого экрана продаёт доверие к дорогой услуге.
- Понятный процесс «под ключ»: от подбора до передачи ключей — без страха перед растаможкой и рисками.
- Заявки собираются на сайте, а не теряются в переписке; сайт готов к рекламе и продвижению.
Почему лендинг, а не многостраничный сайт
Покупка автомобиля за рубежом — это одна услуга с длинным объяснением, а не каталог разных предложений. Человек, который впервые задумался пригнать машину из Кореи, задаёт подряд одни и те же вопросы: как она поедет, кто её проверит, во что обойдётся растаможка и что будет, если что-то пойдёт не так. Разносить ответы по отдельным страницам — значит терять читателя на каждом переходе.
Поэтому структура собрана как один сценарий чтения: герой, процесс работы, карта маршрутов, каталог, проверка, растаможка, отзывы и FAQ. Посетитель проходит путь от «интересно» до «оставлю заявку» не пользуясь меню, а форма доступна с любого экрана.
Карта маршрутов вместо списка стран
Четыре направления — Кыргызстан, США, Китай и Южная Корея — в обычной вёрстке превращаются в четыре строчки списка. Список не отвечает на вопрос, который на самом деле занимает покупателя: где будет его машина и сколько ей ехать.
Вместо перечисления сделана интерактивная карта мира с прочерченными маршрутами — направление выбирается на самой карте, и путь автомобиля виден целиком. Это тот случай, когда анимация не украшение, а способ объяснить услугу быстрее, чем это сделает абзац текста.
Три блока, которые снимают страх перед сделкой
Сделка на десятки тысяч долларов с незнакомой компанией держится на доверии, и собирать его приходится по частям. Первый блок — «рентген»-проверка автомобиля по точкам: видно, что именно смотрят перед покупкой. Второй — калькулятор растаможки: цифра появляется сразу, а не после звонка менеджеру. Третий — живой каталог с ценами и характеристиками: предложение конкретное, а не «привезём что скажете».
Вместе они закрывают три главных возражения — «вдруг подсунут битую», «вдруг вылезут скрытые платежи» и «а что вы вообще можете привезти».
Тяжёлая графика и мобильные экраны
Премиальная подача построена на WebGL-фоне и анимациях — самой дорогой части страницы по ресурсам. Ключевое решение здесь архитектурное: текст остаётся текстом в разметке, а не собирается скриптами, поэтому заголовки, описание услуги и содержимое блоков доступны и поисковому роботу, и человеку с медленным интернетом независимо от того, как отработала графика.
Вёрстка собиралась mobile-first — от узкого экрана к широкому, а не обрезанием десктопа. Для лендинга, куда приходят в основном с телефона по рекламе, это не косметика, а условие работоспособности.
Как это выглядит
