Задача
Человеку нужно выбрать модель из большого каталога, понять, как проходит доставка, и оставить запрос. Компании нужно выглядеть уверенно и ярко среди однотипных сайтов автоимпорта.
VERDE AUTO
О проекте
Сайт компании по подбору, проверке, покупке и доставке автомобилей из Китая в Россию: BMW, Mercedes-Benz, Porsche, Li Auto, Voyah и Zeekr. Компания, цены, контакты и фотографии вымышлены, это демонстрационный проект.
Подход
Яркий зелёный цвет и крупные заголовки со вставками курсивом. У каждого автомобиля своя страница с тремя ракурсами, в каталоге поиск и фильтры, маршрут доставки показан на карте.
Что получилось
Сайт из 94 страниц на Vite и JavaScript: главная, каталог, бренды, услуги, доставка, компания, база, журнал, вопросы и контакты, плюс страницы 72 моделей.
Подробнее о проекте
Первый экран с фотографией и крупным заголовком «Доставка автомобилей из Китая», ниже веер автомобилей, который раскрывается при прокрутке, и логотипы шести брендов в движущейся ленте.
Каталог из 72 моделей и комплектаций: по 12 у каждого бренда, поиск, фильтры и постепенная подгрузка карточек. У автомобиля полноэкранная страница с тремя ракурсами, переключением клавишами и свайпом, описанием и характеристиками. Цены демонстрационные.
Карта Евразии показывает пример маршрута Пекин — Москва с этапами проверки, перевозки и выдачи. Отдельные страницы рассказывают о компании, услугах и базе. Форма запроса собирает черновик сообщения и ничего не отправляет.
Как мы собирали
- 01
Основа
Vite и JavaScript без фреймворка. Страницы собираются в отдельные HTML-файлы заранее, поэтому каждая открывается сразу, а ссылки между ними обычные. Шрифты Manrope, Unbounded, Cormorant Garamond и Caveat лежат на сайте.
- 02
Движение
Анимации на GSAP и Scrollcraft: веер автомобилей, закреплённые сцены, лента логотипов. Переходы между страницами делает браузер, а при настройке «уменьшить движение» они отключаются.
- 03
Карта
Карта Евразии рисуется из данных Natural Earth через d3-geo и topojson, автомобиль движется по маршруту Пекин — Москва.
- 04
Материалы
216 фотографий для каталога, по три ракурса на модель, видео и шесть визуализаций базы. Всё иллюстративное: цены и комплектации демонстрационные, контакты — заглушки.
