Портфолио

Услуги

О нас

Блог

Контакты

Кейс

Сайт B2B-трейдера BIONOVACOM: три направления поставок и заявки вместо корзины

Корпоративный сайт международного трейдера: не магазин, а витрина номенклатуры, которая объясняет три направления поставок и собирает заявки с техническими требованиями.

First Novacom FZCO, бренд BIONOVACOM (Дубай, ОАЭ)Дизайн и арт-дирекция · Фронтенд-разработка · Контент-структура и SEO · Админ-панель · Сервер и деплой2026

Задача

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

Нужен корпоративный сайт на английском для закупщиков, дистрибьюторов и заводов. Без цен и корзины: модель trade-only, стоимость всегда считается под конкретную поставку и страну назначения.

Три направления нельзя визуально смешивать — у них разные аудитории и разные требования к документам. При этом сайт должен читаться как одна компания, а не три разных.

Смотреть вживую

bionovacom.com

↗

направления поставок в одной структуре

подкатегорий с номенклатурой и тегами

−92%

вес фотографий на мобильных: 5 МБ → 0,4 МБ

PageSpeed на мобильных после оптимизации

Первый экран: видео уходит в расфокус, остаются цифры

Хиро закреплён: пока страница прокручивается, фоновое видео плавно расфокусируется, заголовок уходит вверх, а на его месте проявляются описание компании и четыре опорных факта — направления, модель работы, база в Дубае, охват поставок.

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

Расфокус и смена слоёв привязаны к прокрутке, а не к таймеру

Три направления в одной прокрутке

Каждое направление — закреплённый заголовок и полноэкранное фото слева, нумерованный список подкатегорий справа на матовой панели. Активная строка раскрывается описанием и тегами товарных групп.

Фото меняется вместе с активной подкатегорией: пищевые ферменты, флотореагенты и витамины показаны своим кадром, а вёрстка при этом одна.

Смена активной подкатегории меняет и фон секции

Подкатегории на весь экран

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

Рядом — блок документов: сертификаты, спецификации и требования страны назначения. Для трейдера это и есть товар — сделку закрывают документы, а не картинки.

Отрасли применения: где используются продукты

Отдельная страница отвечает на вопрос закупщика «а под мою задачу подойдёт?»: семь прикладных сценариев — от пищевого производства и пивоварения до обогащения руды, извлечения золота и водоподготовки.

Каждая строка при наведении показывает свой кадр и ведёт в нужное направление — это и навигация, и посадочные страницы под отраслевые запросы.

Семь отраслей связывают применение с направлением поставки

Заявка вместо корзины и админка вместо CMS

Вместо «купить» — форма запроса котировки: направление, товар, объём, страна назначения, сроки и вложения со спецификацией. Набор полей меняется в зависимости от выбранного направления.

Заявки складываются в админку и не теряются при обновлении сайта: они лежат вне кода, вместе с загруженными файлами. Там же правятся контакты, мета-теги страниц и заголовок главной — без разработчика.

Динамическая форма: поля зависят от направления поставки

Вложения — спецификации и техзадания прямо из формы

Заявки и контакты редактируются в своей админке

SEO-панель: title и description по всем страницам

Мобильная версия: та же логика в кармане

Закупщик открывает такой сайт с телефона в дороге, поэтому на мобильных отдельные облегчённые видео и фотографии, а меню и форма переработаны под узкий экран.

Скорость, индексация и собственный сервер

Весь контент отдаётся сервером и лежит в HTML: слайдеры и скролл-эффекты работают поверх готовой разметки, поэтому поиск видит и номенклатуру, и описания, а не пустой контейнер.

Фотографии переведены в WebP с отдельными мобильными версиями, видео пережато на аппаратном кодировщике. Сайт живёт на своём VPS: nginx, PM2, HTTPS с автопродлением и Cloudflare перед ним.

5 МБ → 0,4 МБ

фотографии направлений на мобильных

4,5 МБ → 2,35 МБ

фоновое видео первого экрана

100%

контента в HTML — для индексации

Стек

Next.js 15

React 19

Lenis

Node.js 22

nginx + PM2

Cloudflare

вопросы

Спрашивают чаще всего

Почему на сайте нет цен и корзины?

Компания работает по модели trade-only: цена зависит от объёма, страны назначения и требований к документам. Поэтому вместо корзины — форма запроса котировки, где закупщик указывает продукт, объём и назначение, а ответ приходит расчётом.

На каком языке сделан сайт?

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

Куда попадают заявки с сайта?

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

Кто может менять тексты и мета-теги?

Клиент. В админке есть разделы для контактов, заголовка главной и SEO-полей каждой страницы — правки применяются сразу на всём сайте, разработчик для этого не нужен.

другие работы