Корпоративный сайт BC Control
Основной B2B-сайт компании: презентация продуктов, калькулятор ROI, мега-меню, живой BMS-дашборд, встроенный конструктор лендингов с AI и reverse-прокси к контроллеру Niagara 4.
О продукте
Сайт построен на Next.js 16 с App Router и React 19. Весь контент — TypeScript-first: данные страниц вынесены в типизированные модули, а UI собран на shadcn/ui в базовом стиле с 4 акцентными цветами под zinc-палитру.
Ключевая особенность — это не просто маркетинговая витрина. Внутри живой BMS-дашборд с анимациями, конструктор лендингов со своим рендерером и админкой, интеграция с MCS 4.8 через SCRAM-прокси. Сайт сам по себе — демо возможностей компании.
Ключевые возможности
Мега-меню с превью
6 разделов услуг × 6 карточек + 4 продукта с баннерами. Desktop версия с подсветкой активного пункта, mobile — полноэкранный drawer.
Живой BMS-дашборд
Анимированная имитация мониторинга здания: датчики температуры, вентиляторы, health-кольца, потоки данных между блоками.
Dark / Light темы
Переключение через next-themes с сохранением в localStorage, без FOUC, поддержка system preference.
Typewriter-эффекты
Hero-блоки с печатающимся текстом, циклом направлений деятельности и всплывающими токенами данных.
Калькулятор ROI
Интерактивная форма экономики замены Niagara: вводятся параметры здания, на лету считается экономия.
SEO & Performance
Next/font, Next/image, семантическая разметка, метатеги по каждой странице, lazy-loading тяжёлых секций.
Интерфейс
Ключевые экраны и состояния
Технологический стек
- Next.js 16
- React 19
- TypeScript strict
- Tailwind CSS 4
- shadcn/ui
- Framer Motion
- Lucide Icons
- next-themes
- Zod
- GigaChat API
- Next Route Handlers
- Docker (Node 20)
- Proxmox VE
- Caddy reverse-proxy
- PostgreSQL 16
- SCRAM-SHA-256 proxy
Что под капотом
- Типизированные данные страниц (услуги, продукты, кейсы, меню) — всё в src/lib/
- 4 акцентных цвета через CSS-переменные — единая палитра без хардкода
- Обратный прокси к Niagara 4.8 с авторизацией и url-rewriting
- Конструктор лендингов как отдельная подсистема внутри сайта
- Self-hosted на нашем Proxmox VE — Docker контейнер, Caddy с автоматическими сертификатами Let's Encrypt
- PostgreSQL 16 для конфигов лендингов и контактных заявок — никакой привязки к внешним облакам
Посмотреть вживую
Нужна похожая разработка?
Обсудим задачу, соберём команду под стек и сроки, предложим прозрачную оценку.