Сайт производителя запчастей Wagnermaier

О проекте

WagnerMaier («Вагнермайер») — российский производитель полуприцепов, созданный в рамках совместного производства с европейскими партнёрами. Сборка ведётся в особой экономической зоне «Алабуга» (Республика Татарстан) на высокотехнологичном оборудовании с применением европейских стандартов качества.

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

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

Задачи

– Создать полноценный каталог полуприцепов с карточками товаров и техническими характеристиками

– Реализовать двуязычный сайт (RU / DE) с автоопределением региона пользователя: СНГ → русский, остальные → немецкий

– Разработать интерактивный логотип-одометр, анимирующийся при скролле

– Обеспечить высокую производительность: все метрики Google PageSpeed Insights — в зелёной зоне

– Подключить пять аналитических систем и настроить цели конверсии

– Реализовать адаптивный дизайн от 280 px до 1920 px без горизонтального скроллинга

Технический стек

CMS

WordPress / 1С-Битрикс (опционально)

Хостинг

Таймвеб

Шрифты

RADIOTECHNIKA (заголовки), Montserrat (текст)

Стандарты

HTML5, CSS3, JavaScript (ES6+)

Форматы графики

SVG, WebP (сжатие ≥ 75%)

Микроразметка

Schema.org, OpenGraph

Аналитика

Яндекс Метрика, Google Analytics, Google Tag Manager, Top Mail, Roistat

Разрешение

Статичное, центрированное; min 280 px — max 1920 px

Кодировка

UTF-8

ЧПУ

Все страницы

Валидация

W3C-совместимая

Интерактивный логотип-одометр

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

Каталог и карточка товара

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

На странице товара реализована секция «Комплектация»: раскрывающиеся вкладки FIX-комплектации и опционального «Бонуса» с иллюстрациями.

Двуязычность RU / DE

При первом заходе сайт определяет страну пользователя по IP: для СНГ отображается русскоязычная версия, для европейских стран — немецкая. Переключение языка доступно вручную в шапке. Все SEO-метаданные, Schema.org-разметка и OpenGraph-теги локализованы под оба языка.

Ховер-интерактивность

На главной: карточки полуприцепов в каталоге открывают всплывающий слой с ключевыми характеристиками. Анонсы новостей раскрываются при наведении. Видеослайдер показывает оверлей при ховере, кроме кнопки воспроизведения.

На странице «О компании»: список компонентов сборки интерактивно подсвечивает элементы на схеме полуприцепа. Карточки вакансий открывают описание при наведении и ведут на детальную страницу вакансии.

Производительность

Все изображения конвертированы в WebP со степенью сжатия ≥ 75%. Шрифт RADIOTECHNIKA подключён в WOFF2. Скрипты аналитики загружаются асинхронно через GTM. Результат — оценка PageSpeed Insights 90+ по всем страницам на десктопе и мобильных устройствах.

Аналитика и конверсии

Настроены цели в Яндекс Метрике, Google Analytics и Top Mail: отправка формы, клик по номеру телефона, клик по email. Roistat подключён для сквозной аналитики рекламных источников. Google Tag Manager используется как единая точка управления всеми пикселями.

Сайт wagnermaier.com соответствует требованиям поисковых систем по техническому SEO: валидный HTML5-код, микроразметка Schema.org и OpenGraph, ЧПУ-адреса, отсутствие горизонтального скроллинга на любом разрешении.

Менеджмент компании получил удобную CMS-панель для самостоятельного управления каталогом товаров, новостями и вакансиями без привлечения разработчика.

Двуязычная архитектура позволяет WagnerMaier одновременно работать с российскими грузоперевозчиками и выходить на европейский рынок без необходимости поддерживать отдельные домены.