Кейс
Сайт B2B-трейдера BIONOVACOM: три направления поставок и заявки вместо корзины
Корпоративный сайт международного трейдера: не магазин, а витрина номенклатуры, которая объясняет три направления поставок и собирает заявки с техническими требованиями.
Клиент
First Novacom FZCO, бренд BIONOVACOM (Дубай, ОАЭ)
Год
2026
Роль
Дизайн и арт-дирекция, Фронтенд-разработка, Контент-структура и SEO, Админ-панель, Сервер и деплой
Сайт
Задача
3
направления поставок в одной структуре
15
подкатегорий с номенклатурой и тегами
−92%
вес фотографий на мобильных: 5 МБ → 0,4 МБ
87
PageSpeed на мобильных после оптимизации
Технологии
Next.js 15
React 19
Lenis
Node.js 22
nginx + PM2
Cloudflare
01
Первый экран: видео уходит в расфокус, остаются цифры
Хиро закреплён: пока страница прокручивается, фоновое видео плавно расфокусируется, заголовок уходит вверх, а на его месте проявляются описание компании и четыре опорных факта — направления, модель работы, база в Дубае, охват поставок.
Так первый экран работает не одним кадром, а всей верхней третью страницы: посетитель успевает прочитать, кто это и чем торгует, ещё до первого клика.
Расфокус и смена слоёв привязаны к прокрутке, а не к таймеру
02
Три направления в одной прокрутке
Каждое направление — закреплённый заголовок и полноэкранное фото слева, нумерованный список подкатегорий справа на матовой панели. Активная строка раскрывается описанием и тегами товарных групп.
Фото меняется вместе с активной подкатегорией: пищевые ферменты, флотореагенты и витамины показаны своим кадром, а вёрстка при этом одна.
Смена активной подкатегории меняет и фон секции
03
У каждого направления — своя страница
Направления живут на отдельных страницах: свой хиро-кадр, свои подкатегории, свои отрасли применения и свой список документов. Разделение сделано и для читателя, и для поиска — под каждое направление свои запросы.
04
Подкатегории на весь экран
Внутри направления каждая подкатегория занимает целый экран: фото кросс-фейдится, а описание и теги продуктов выезжают снизу. Пять подкатегорий читаются как пять кадров, а не как таблица.
Рядом — блок документов: сертификаты, спецификации и требования страны назначения. Для трейдера это и есть товар — сделку закрывают документы, а не картинки.
05
Отрасли применения: где используются продукты
Отдельная страница отвечает на вопрос закупщика «а под мою задачу подойдёт?»: семь прикладных сценариев — от пищевого производства и пивоварения до обогащения руды, извлечения золота и водоподготовки.
Каждая строка при наведении показывает свой кадр и ведёт в нужное направление — это и навигация, и посадочные страницы под отраслевые запросы.
Семь отраслей связывают применение с направлением поставки
06
Заявка вместо корзины и админка вместо CMS
Вместо «купить» — форма запроса котировки: направление, товар, объём, страна назначения, сроки и вложения со спецификацией. Набор полей меняется в зависимости от выбранного направления.
Заявки складываются в админку и не теряются при обновлении сайта: они лежат вне кода, вместе с загруженными файлами. Там же правятся контакты, мета-теги страниц и заголовок главной — без разработчика.
Динамическая форма: поля зависят от направления поставки
Вложения — спецификации и техзадания прямо из формы
Заявки и контакты редактируются в своей админке
SEO-панель: title и description по всем страницам
07
Мобильная версия: та же логика в кармане
Закупщик открывает такой сайт с телефона в дороге, поэтому на мобильных отдельные облегчённые видео и фотографии, а меню и форма переработаны под узкий экран.
08
Скорость, индексация и собственный сервер
Весь контент отдаётся сервером и лежит в HTML: слайдеры и скролл-эффекты работают поверх готовой разметки, поэтому поиск видит и номенклатуру, и описания, а не пустой контейнер.
Фотографии переведены в WebP с отдельными мобильными версиями, видео пережато на аппаратном кодировщике. Сайт живёт на своём VPS: nginx, PM2, HTTPS с автопродлением и Cloudflare перед ним.
5 МБ → 0,4 МБ
фотографии направлений на мобильных
4,5 МБ → 2,35 МБ
фоновое видео первого экрана
100%
контента в HTML — для индексации
Вопросы
Что обычно спрашивают о таких проектах
Нужен такой же сайт для вашего бренда?
Расскажите о продукте — предложим решение, сроки и стоимость.
Подписаться на рассылку
Reut Art
Cookies
Мы используем файлы cookie для улучшения работы сайта, анализа трафика и персонализации контента. Нажимая «Принять», вы соглашаетесь с Cookie-политикой и обработкой данных согласно Политике конфиденциальности.