Корпоративный сайт торговой, логистической и таможенной компании из Ташкента
- UX/UI
- Next.js
- Анимация интерфейса
- Многоязычность
- SEO
- Торговля и логистика
- B2B-услуги
- В эксплуатации
- Next.js, React, TypeScript, Tailwind CSS, GSAP
- Узбекистан
О клиенте
ADAS TRADE работает в Ташкенте как торговая, логистическая и таможенная компания. Она перевозит грузы авиа, авто, железной дорогой и морем для клиентов в Узбекистане и за рубежом, оформляет их на таможне и ведёт оптовую торговлю от своего имени.
Задача
Объяснить семь связанных услуг, от закупки до пусконаладки, импортёрам и зарубежным поставщикам на трёх языках, в тоне, уместном для таможенного дела, и сделать так, чтобы позвонить или написать было легко.
Решение
- Главная страница, которая идёт по сделке по порядку: услуги, направления поставок, бренды, компания, вопросы, контакты
- Отдельная страница для каждой из семи услуг, с её шагами
- Русская, узбекская и английская версии каждой страницы
- Дизайн-система на основе прежних цветов компании: тёмно-синего, индиго и мятного
- Анимация по прокрутке, которая отключается для тех, кто просит меньше движения
- Метаданные и канонический адрес для каждой страницы, структурированная разметка, карта сайта, правила для ИИ-роботов, llms.txt и llms-full.txt
- Фирменная страница 404
Услуги в том порядке, в каком их встречает груз
Семь услуг перечислены в том порядке, в каком с ними встречается партия товара: закупка, сопровождение расчётов, финансовая логистика, перевозка, таможенное оформление, пусконаладка, оптовая торговля. Тонкая линия маршрута с узлом на каждую услугу заполняется по мере прокрутки, и сам порядок показывает посетителю, как идёт сделка.
Таможенная декларация, которая заполняется сама
На странице таможенного оформления образец грузовой таможенной декларации остаётся на экране рядом с четырьмя шагами работы. Пока посетитель читает, заполняются её поля, код товара набирается цифра за цифрой, документы отмечаются галочками, а на последнем шаге ставится штамп о выпуске.
Галерея поставок и стена брендов
Шесть постоянных направлений поставок, от автозапчастей до стабильных изотопов, собраны в галерею, которая движется вбок, пока страница стоит на месте. Ниже в два ряда через весь экран идут бренды автозапчастей и смазочных материалов, которые поставляет компания.
Три языка одной формы
Русский язык идёт по умолчанию, рядом узбекский и английский. У каждого языка свой файл содержания одной и той же формы, поэтому страница не может существовать на одном языке и отсутствовать на другом.
Анимация, которая не мешает
Вся анимация описана в одной таблице: раздел подключается к ней атрибутом и остаётся отрисованным на сервере. При включённом уменьшении движения ничего не анимируется, а галерея становится обычной боковой прокруткой. Содержание читается и без JavaScript.
Сделан так, чтобы его находили
У каждой страницы свои заголовок, описание и канонический адрес, а три её языковые версии связаны ссылками. Структурированная разметка описывает организацию, сайт, его услуги, вопросы и навигационную цепочку. Файл robots называет ИИ-роботов, которых он допускает, llms.txt и llms-full.txt дают ассистентам простое описание компании и её услуг, а изображение для соцсетей сайт создаёт сам.
Статический сайт, за которым ничего нет
Все 34 страницы создаются заранее и отдаются с Vercel. За сайтом нет ни CMS, ни базы данных, ни авторизации. Шрифты Jost и Golos Text отдаются с самого сайта как вариативные.
Итог
В эксплуатации на adas-trade.uz на трёх языках. Содержание лежит в одном реестре на каждый язык, поэтому новая услуга или направление поставок добавляется одной записью, а числа в карточке компании обновляются сами.
