03 · B2B · ФАСАДЫ · ПРОИЗВОДСТВОСвободен

Alukom

Многоэкранный B2B-лендинг для производителя композитных фасадных панелей. Video-scrubbing в hero, pinned scroll-storytelling, калькулятор дилерской маржи и 4-шаговый квиз.

Этот концепт продаётся один раз. Покупатель получает все исходники и эксклюзив: после старта проекта мы убираем работу с витрины и не используем её в других сайтах.

— ОБЗОР СКРОЛЛА
— РАЗБОР ПО СЕКЦИЯМ

Какустроен сайт.

Hero — H1 «Завод композитных панелей от Калининграда до Владивостока», KPI снизу
01 · Hero

Video-scrubbing на фоне: скролл двигает кадры pingpong 0→1→0. H1 с медным акцентом, бэйдж «лицензия и аккредитация», четыре KPI с count-up по скроллу.

ScrollStory — pinned 500vh, четыре фазы «материал → лаборатория → производство → объект»
02 · ScrollStory

Pinned-секция на 500vh: 25% прогресса = одна фаза. Cross-fade фоновых изображений и заголовка. Скриншот пойман на фазе 2 — «фасад, который стоит 25 лет».

Продукция — пять линеек панелей с фильтром по классу горючести
03 · Продукция

Карточки пяти продуктов: АКП PE, АКП A2, СКП, СКП A2, 3D-кассета. Фильтр по классу горючести и толщине, тех-параметры в моно-шрифте.

Цвета — 12 коллекций на CSS-градиентах вместо тяжёлых фото
04 · Цвета

Двенадцать цветовых коллекций сделаны не фотографиями, а CSS-градиентами + SVG-оверлеями. Облегчает страницу на 4–6 МБ против фото-палитры.

Портфолио — 340+ объектов, девять карточек на первом экране
05 · Портфолио

Девять реализованных объектов в асимметричной сетке: ТРЦ, БЦ, аэропорт, спорт-арена, музей, школа. Метраж и заказчик у каждого. PDF-каталог как CTA.

Калькулятор — смета с дилерской маржой, pure React
06 · Калькулятор

Слайдер площади, переключатель материала, коллекции и объёма. На правой панели — отпускная цена за м², итог по партии и расчётная маржа дилера.

Квиз дилера — четыре шага на dark-фоне
07 · Квиз дилера

Четырёхшаговый квиз заявки дилера: регион, оборот, опыт работы с фасадами, контакт. Прогресс-бар сверху, состояние «отправлено» в финале. Honeypot против ботов.

Скриншоты не передают анимацию и скролл-режиссуру. Откройте живое демо в новой вкладке.

— О КОНЦЕПТЕ

Концепт под завод или дилерский холдинг в стройке: композитные алюминиевые панели, фасадные кассеты, инженерные металлоконструкции. Восемнадцать секций в журнальном ритме: hero со scrubbing-видео и счётчиком четырёх KPI, trust-полоса застройщиков, pinned ScrollStory на 500vh из четырёх фаз, каталог продукции с фильтром по классу горючести, интерактивная палитра 12 цветовых коллекций на CSS-градиентах, портфолио из 340+ объектов, калькулятор сметы с дилерской маржой, драгабельный «до/после», 4-шаговый квиз заявки дилера. Палитра — тёплый offwhite, медь как единственный акцент, графитовый dark для banner-секций. Шрифты Unbounded display и Manrope body. Все скролл-анимации на framer-motion useScroll/useTransform — 60fps без ручных rAF.

— ДЛЯ КОГО
Производитель композитных или фасадных панелей, ищущий дилеров по регионам
Завод инженерных металлоконструкций или вентилируемых фасадных систем
Дилерский холдинг в стройке, выходящий на B2B-привлечение через сайт
Производитель строительной химии или клеёв, продающий через дилерскую сеть
— ЧТО ИНТЕРЕСНОГО
→Video-scrubbing в hero без библиотек: скролл двигает кадры видео в pingpong-режиме 0→1→0, файл перекодирован с keyframe в каждом кадре для мгновенного seek
→Pinned ScrollStory на 500vh из четырёх фаз — cross-fade между «материал → лаборатория → производство → объект», по 25% прогресса на фазу
→Счётчик-up на четырёх KPI hero (1.2 млн м², 200+ цветов, 47 регионов, 10 лет) через useTransform от scrollYProgress
→Каталог из пяти продуктов с фильтром по классу горючести (PE / А2 / 3D-кассета), цветовая палитра 12 коллекций на CSS-градиентах + SVG-оверлеях вместо тяжёлых фото
→Калькулятор сметы с дилерской маржой — pure React, без бэка: площадь × материал × коллекция × объём → отпускная цена и маржа дилера
→Драгабельный «до/после» слайдер на CaseStory, 4-шаговый квиз заявки дилера с локальным state и mock-submit
→Четыре полноэкранных banner-секции с каскадным параллаксом через CascadeItem с delay по index
→output: "export" — статика, готова к rsync на Nic.ru или Cloudflare Pages. Lighthouse Perf 90+ desktop, 85+ mobile
— ЧТО ВХОДИТ ПРИ ПОКУПКЕ
✓Адаптация всех восемнадцати секций под ваш бренд, цвета, фотографии и УТП
✓Замена видео-scrubbing на ваш материал: перекодировка с keyframe в каждом кадре, целевой вес 3–5 МБ
✓Заполнение каталога продукции, цветовой палитры, портфолио и сертификатов из ваших материалов
✓Калькулятор сметы под вашу матрицу цен и условия дилерской программы
✓Подключение домена (.ru / .com), SSL, robots, sitemap, IndexNow, OG-image 1200×630
✓Форма заявки дилера на ваш email, AmoCRM, Bitrix24 или Telegram-бот (на выбор)
✓Юр-страницы: политика обработки ПДн, согласие на ПДн, оферта дилерского сотрудничества
✓Schema.org Organization + Product для каталога панелей, рич-сниппет в Я.Поиск
✓Подключение Я.Метрики с целями на submit квиза, скачивание каталога, клик по телефону
✓Эксклюзив: после старта проекта концепт уходит с витрины, не используем его в других сайтах

Забрать
«Alukom» себе.

↗ Живое демоalukom-composite-panels.vercel.app
— ДРУГИЕ КОНЦЕПТЫ