Контекст и задача
«ОСНОВА БЕТОН» — демо-проект корпоративного B2B-сайта для производителя и поставщика товарного бетона в Москве и Московской области.
Задача проекта — показать, как может выглядеть современный сайт для промышленной компании: без шаблонной подачи, с акцентом на производство, логистику, каталог смесей, заявки на расчёт и закрытую клиентскую зону.
Сайт проектировался как полноценный портфолио-кейс: от визуальной концепции и вёрстки до интеграции в 1С-Битрикс, бэкенд-логики, миграций базы данных и локального Docker-окружения.
Решение
Я собрал структуру корпоративного сайта вокруг ключевых B2B-сценариев: быстро понять возможности поставщика, выбрать нужную смесь, рассчитать ориентировочный объём, отправить заявку и получить доступ к закрытому каталогу с ценами и остатками.
В публичной части реализованы главная страница, раздел «О компании», каталог продукции, карточки смесей, новости, объекты поставок и детальные страницы кейсов. Для клиентов добавлена отдельная зона авторизации с закрытым каталогом, фильтрами, сортировкой, статусами наличия и складскими остатками.
Дизайн
Визуальная система построена в индустриальном стиле: тёмные секции, тёплый бумажный фон, крупная типографика и оранжевый акцент для действий.
Вместо универсального лендинга был выбран более редакционный подход: крупные заголовки, секции с метриками, карточки объектов, фотографии производства, лаборатории, автопарка и заливок.
Основные элементы интерфейса:
- фиксированная шапка с автоскрытием при скролле;
- мобильное slide-in меню;
- модальное окно заявки;
- кастомные селекты и range-слайдеры;
- карточки с hover-анимацией изображений;
- адаптивные фильтры в закрытом каталоге;
- отдельная 404-страница с крупной типографикой.
Также учтены базовые требования доступности: aria-атрибуты, focus-visible, prefers-reduced-motion и honeypot-защита формы.
Публичный каталог и калькулятор
В каталоге реализованы три категории продукции: товарный бетон, растворы и спецсмеси. Для каждой позиции предусмотрены характеристики: ГОСТ, класс прочности, подвижность, морозостойкость и другие параметры.
На карточке продукта добавлен калькулятор объёма смеси. Пользователь может выбрать тип конструкции, задать размеры, указать запас и отметить необходимость доставки. Расчёт выполняется на фронтенде, а данные можно сразу передать в форму заявки.
Лид-форма
Заявка работает через AJAX на базе Bitrix Engine. В форме предусмотрены поля для имени, телефона, компании, выбранной продукции и данных калькулятора.
На бэкенде добавлены:
- нормализация телефона к формату +7;
- CSRF-защита;
- honeypot;
- rate limit 60 секунд;
- сохранение заявки в инфоблок;
- email-уведомление через почтовое событие.
Форма не просто отправляет письмо, а сохраняет данные в структуру, готовую для дальнейшей CRM-интеграции.
Закрытая клиентская зона
Для B2B-клиентов реализована отдельная зона входа. Авторизованные пользователи получают доступ к закрытому каталогу с ценами и остатками по трём складам: юг, север и восток.
В каталоге доступны фильтры по типу продукции, складу, марке, подвижности, цене и остатку. Для позиций выводятся статусы наличия: «в наличии», «мало» и «нет».
Доступ ограничен группой пользователей project_clients. Для остальных пользователей закрытый каталог недоступен.
Контент и админка
Главная страница и раздел «О компании» собираются через инфоблоки. Это позволяет менять секции, тексты, карточки и метрики через админку без правки шаблонов.
В проекте используются отдельные инфоблоки для настроек сайта, навигации, секций главной, новостей, каталога, объектов и заявок.
Интеграция в 1С-Битрикс
Кастомная логика вынесена в www/local/. Для проекта реализованы 11 собственных компонентов:
- page.builder;
- about.builder;
- catalog;
- news;
- projects;
- calculator;
- lead.form;
- site.header;
- site.footer;
- client.auth;
- client.catalog.
Бизнес-логика находится в class.php, сервисах и модуле project.core. Для работы с контентом используется ContentRepository. Структурные изменения базы оформлены через идемпотентные миграции.
Технический стек
Frontend:
- HTML5;
- Tailwind CSS v4.3.1;
- Vanilla JavaScript;
- ES modules;
- Vite;
- WebP-изображения;
- без React, Vue, jQuery и Bootstrap.
Backend и инфраструктура:
- 1С-Битрикс;
- PHP 8.2-FPM;
- MySQL 8.0;
- Nginx 1.26;
- Docker Compose;
- Mailpit для тестовых писем;
- Composer;
- PHP CS Fixer.
Результат
Получился full-stack демо-проект промышленного B2B-сайта, в котором соединены дизайн, вёрстка, CMS-интеграция, клиентская зона и прикладная бэкенд-логика.
В проекте реализовано:
- 13+ кастомных страниц;
- 11 компонентов 1С-Битрикс;
- 9+ инфоблоков;
- 6 идемпотентных миграций;
- 8 позиций каталога;
- 4 объекта поставок;
- 5 новостей;
- 3 склада в закрытом каталоге;
- около 4400 строк кастомного PHP-кода в www/local/.
Google Page Speed
Ограничения
Это демо-проект, а не production-сайт с реальным доменом. Контент, реквизиты и часть данных вымышленные. Калькулятор показывает ориентировочный объём смеси и не является коммерческим предложением.
Часть стандартных URL от установщика Битрикса не входит в кастомный сайт. Контакты вынесены в подвал, отдельная страница /contacts/ не интегрировалась.
