Лендинг для B2B-продаж: кейс «Цифровой Рай»

«Цифровому Раю» нужен был не шаблонный сайт-визитка, а имиджевый B2B-лендинг для оптовых покупателей. На одной странице нужно было показать ассортимент аксессуаров для мобильной техники, условия пробной закупки, преимущества сотрудничества, доставку по Москве, России и СНГ, сертификаты и точки контакта.

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

Разработали индивидуальный дизайн под технологичный образ компании. 3D-фотографии помогают уйти от стандартной витрины и показать аксессуары как часть современной визуальной системы.

Интерфейс построен вокруг крупных экранов, коротких сообщений и динамики прокрутки: от позиционирования и пробного заказа до товаров, калькулятора, сертификатов, доставки и контактов.

Сайт разработан на WordPress с кастомной темой. Контент главной страницы вынесен в ACF-поля и репитеры: товары, хиты продаж, сертификаты, адреса, галерея, кнопки, popup и email для заявок.

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

В блок «Калькулятор прибыли» встроили интерактив на Vue 2. Пользователь задает объем закупки, издержки и наценку, а сайт сразу показывает чистую прибыль и прогноз за 12 месяцев. Кнопка «хочу такую прибыль» ведет к форме обратного звонка, поэтому калькулятор работает как мост между интересом пользователя и заявкой.
Для динамики использовали GSAP и ScrollTrigger. Анимации завязаны на прокрутку: текстовый тикер на десктопе, каскадное появление преимуществ, движение декоративных элементов в блоках пробного заказа, хитов и калькулятора. Анимации создают ощущение масштаба и технологичности, но не закрывают собой содержание: товары, условия, цифры, сертификаты и кнопки действия остаются на первом месте.

Для карточек, сертификатов, адресов и галереи использовали Swiper и Fancybox. Сертификаты можно показать лентой, адреса шоурумов связать с визуальным блоком, а галерею открыть в лайтбоксе без ухода со страницы. Заявки открываются в inline-модалке Fancybox и отправляются через кастомный AJAX-обработчик WordPress. Форма валидирует имя, телефон и согласие с политикой, возвращает JSON-ответ и не требует перезагрузки.

Тяжелый контент не загружается сразу: YouTube-видео в hero использует отложенную подстановку `src`, до загрузки показывается WebP-обложка, а сертификаты и фотографии контактов подгружаются лениво. Верстка адаптирована под ключевые брейкпоинты, а скрипты пересчитывают CSS-переменные viewport для корректной высоты на мобильных устройствах.