Корпоративный сайт для поставщика фитингов ROKE

Главное о кейсе

ROKE Swiss - производитель высокоточной трубной арматуры из нерж. стали 316L. Мы собрали опыт инженера и закупщика в одном месте: строгий каталог, быстрый фильтр, четкие карточки, мгновенный запрос КП. Мультиязычность (EN/DE/FR/IT), стек Nuxt + Directus, аккуратные микро-анимации.

Как проект изменил жизнь пользователей

Инженеры: фильтруют по давлению/диаметру/материалу за секунды, видят совместимость (Swagelok/Parker/Hy-Lok), скачивают спецификации без регистрации.

Закупщики: собирают корзину из разных серий, отправляют единый запрос КП, мгновенно получают спецификацию в PDF/почту.

Отдел продаж: заявки структурированы; в заявке — список SKU, атрибуты, язык, контакт. Меньше переписок, быстрее ответ.

Бизнес-задача и ее решение

Задача: выстроить международный канал лидогенерации, убрать хаос из прайсов и спецификаций, сократить путь до запроса предложения.
Решение:

Плоская ИА: Главная → Каталог → Категория → Товар + “Запрос КП” в 1–2 клика.

Единое контент-ядро в Directus для 4 языков, синхронное обновление цен и описаний.

“Доверительные” блоки: отрасли, стандарты, совместимость, сертификаты - рост конверсии без агрессивных CTA.

Крафт (мастерство), реализация, технические детали

Фронт: Nuxt 3 (SSR/ISR), GSAP-микроанимации, lazy-hydrate карточек, опт. изображения (nuxt/image).

Каталог/фильтр: атрибуты (серия, тип соединения, диаметр, давление, материал, резьбы), debounce-поиск, серверная фильтрация, сохранение состояния в URL.

Карточка товара: вариативные SKU, таблицы размеров/давлений, сопутствующие компоненты, “добавить в запрос”, PDF-лист.

Админка: Directus коллекции — products, series, attributes, attr_values, compat_standards, documents, languages.

Флоу в Directus: авто-генерация комбинаций вариаций, валидация дубликатов SKU, массовые прайс-апдейты, webhooks на пересборку фронта.

i18n: переводные поля + fallback, единый слаг с локалью, авто-редирект по языку браузера.

SEO/перф: семантическая разметка (Product/Offer), мета/OG из CMS, хлебные крошки, пререндер горячих категорий, кэш API, TTFB/CLS в зелёной зоне.

Безопасность/надёжность: роль-модель Directus, валидаторы файлов (PDF/черчежи), резервные копии, Cloud/Edge-кэш.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Гипотеза 1: инженерам важнее таблицы и совместимость, чем маркетинг → усилили техблоки, сократили декоративные элементы — глубина просмотра ↑.

Гипотеза 2: мультизаявка по сериям снизит трение закупок → корзина “Запрос КП” на уровне каталога — конверсия в заявку выросла.

Инсайт: ключевой триггер доверия — соответствие стандартам и совместимость с лидерами рынка; вынесли выше линии сгиба.

Процесс: интервью с продажами и техспецами → прототипирование сценариев (инженер/закупщик) → библиотека блоков → дизайн-система → разработка с короткими итерациями и демо каждые 1–2 недели.

Контент-операции: миграция из XLSX/прайсов в Directus через шаблоны, гайд по заполнению атрибутов, чек-листы для новых серий.

Дальше: план AB-тестов (порядок атрибутов, позиция CTA, быстрые пресеты фильтра), экспорт котировок в PDF с брендированием, личный кабинет партнёра.

Текущая доступность работы

https://rokeswiss.com/

Скриншоты