B&H Outdoor
Сайт для компании по обслуживанию рекламных конструкций и продаже Зип-Лок застёжек и скроллерной бумаги в Москве. Кастомная WordPress-тема с нуля: 14 страниц, 7 уникальных шаблонов, AJAX-калькулятор бумаги, анимированный скроллер в hero, glass-morphism UI. Тёмная индустриальная эстетика с жёлтым акцентом.
Кастомная тема
Dark Design
AJAX-калькулятор
Yoast SEO
Schema.org
Адаптив
Задача
B&H Outdoor работает с 2015 года в сфере наружной рекламы в Москве и МО. Три направления бизнеса: обслуживание и ремонт рекламных конструкций (скроллеры, сити-форматы, щиты), продажа застёжек Зип-Лок для крепления постеров, и поставка французской скроллерной бумаги FR-Premium.
Предыдущий сайт был на конструкторе uKit — ограниченный функционал, невозможность SEO-продвижения, устаревший дизайн. Нужен полноценный сайт на WordPress с каталогом товаров и услуг, онлайн-калькулятором, формами заявок, и визуально выделяющимся тёмным дизайном, подчёркивающим промышленную специфику.
Что сделали
- Кастомная WordPress-тема bh-outdoor-theme — 61 файл, 5000+ строк чистого кода. PHP + CSS + JS без конструкторов и фреймворков. Чистая тёмная тема с нуля
- 7 уникальных шаблонов страниц — каждая страница с индивидуальным дизайном: mega-блоки услуг с номерами 01/02/03, Apple-style страница бумаги с FAQ-аккордеоном, Зип-Лок с price-карточками, timeline на странице О компании, split-layout контактов
- Dark industrial дизайн — glass-morphism карточки с backdrop-filter, анимированная сетка в hero, conic-gradient вокруг скроллера, stagger-анимации при скролле, parallax, gradient-текст в ценах
- Анимированный скроллер в hero — стилизованный рекламный сити-формат с 3 SVG-постерами, сменяющимися через CSS @keyframes. Жёлтый glow по периметру как реальная подсветка конструкции
- AJAX-калькулятор скроллерной бумаги — preset-ы конструкций (сити-формат, сити-борд, пиллар), debounce 300ms, live-расчёт метража и цены, кнопка заказа с pre-fill формы
- 3 продуктовых каталога — Зип-Лок застёжки (ЗИПЛОК-100/800 с ценами), бумага 1.27м и 2.85м с характеристиками, оптовые цены с тарифной сеткой
- AJAX-формы с защитой — honeypot от ботов, rate-limit 3 заявки/час по IP, маска телефона +7, серверная валидация, отправка на 2 email, логирование в WP
- Полный SEO-стек — Yoast SEO, уникальные title/description на 14 страницах, Schema.org LocalBusiness JSON-LD, OpenGraph + Twitter Cards, robots.txt, XML sitemap, canonical, gzip, browser caching, security headers
- Миграция с uKit — перенос DNS с uKit NS на Beget, сохранение почтовых записей (MX, SPF, DKIM), верификация mail.ru домена, SSL Let's Encrypt
Результаты
Особенности проекта
Миграция с uKit
Домен был привязан к конструктору uKit через NS-серверы и прокси. Переключили DNS на Beget, сохранив все почтовые записи (MX, SPF, DKIM для mail.ru). Координировали с поддержкой Beget для отключения uKit-прокси.
Калькулятор бумаги
Интерактивный расчёт стоимости скроллерной бумаги: выбор типа конструкции автоматически подставляет размеры, пересчёт в реальном времени через AJAX, учёт запаса на намотку, округление до 0.5 м, расчёт количества рулонов.
Каждая страница уникальна
Ни одна страница не повторяет другую: mega-блоки с числами 01/02/03 на услугах, Apple-style секции на бумаге, price-карточки на Зип-Лок, вертикальный timeline на О компании, split-layout с картой на контактах, masonry-grid на производстве.