Корпоративный сайт · Логистика · Склады класса А

Сайт индустриально-логистической зоны DAMU Logistics

Для первой частной индустриально-логистической зоны Казахстана — 230 га в Байсерке, собственные терминалы, ж/д ветка и склады класса А — мы сделали сайт, который показывает масштаб площадки, а не рассказывает о нём: видео с дрона на первом экране, облёт 3D-макета территории, калькулятор стоимости хранения и заявки, которые сразу попадают менеджеру.

PHP 8.4Tailwind CSS 4RU · KZ · ENКалькуляторBitrix24Видео с дрона

Открыть сайт ↗Мобильная версия ↓

Экраны сайта

Как устроена главная страница

Одна длинная страница, где каждый блок — отдельная сцена: со своей анимацией, цифрами и действием для посетителя.

Первый экран — сайт DAMU Logistics — **Первый экран**Видео с дрона первым кадром слайдера, эллиптический обрез кадров, заголовок открывается «зелёной шторкой» построчно. Ниже — цифры площадки: 230 га, 150 000 м², 15 км ж/д, температурный режим, охрана 24/7.

Услуги и география — сайт DAMU Logistics — **Услуги и география**Восемь карточек услуг: при наведении иконка уходит в угол, снизу выезжает описание и кнопка «Подробнее». Рядом карта мира собирается из точек, из Алматы расходятся торговые маршруты, по карте проходит луч сканера.

Инфраструктура в цифрах — сайт DAMU Logistics — **Инфраструктура в цифрах**3D-макет территории «подлетает» из перспективы, как при облёте дроном. Затем по дорогам едут фуры, по ветке ходит состав, у каждой цифры пульсирует маркер, а наведение подсвечивает объект на макете.

Технологии — сайт DAMU Logistics — **Технологии**Поверх фотографии сотрудника — голограмма карты мира: перспективная сетка, маршруты, кольца в узлах, всплывающие строки данных и лёгкий «сбой проекции». Голограмма наклоняется вслед за курсором.

Калькулятор стоимости хранения — сайт DAMU Logistics — **Калькулятор стоимости хранения**Два режима — аренда площади и паллето-места. Готовые сценарии «Маркетплейс», «Дистрибьютор», «Производство» плавно двигают ползунки, план склада заполняется по мере роста площади, итог раскладывается на хранение, обработку и маркировку.

Видео о комплексе — сайт DAMU Logistics — **Видео о комплексе**Плеер в рамке с цифрами площадки. Видео готовится заранее и стартует в Safari без задержки — отдельно отлаживали, потому что Safari не запускает ролики по тем же правилам, что Chrome.

Форма «Получить расчёт» — сайт DAMU Logistics — **Форма «Получить расчёт»**Все поля из технического задания, включая прикрепление файлов. Заявка сохраняется в админпанели сайта и уходит менеджеру в Telegram и в Bitrix24.

Мобильная версия

Сайт в телефоне работает как приложение

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

Панель действий как в приложенииWhatsApp, звонок, заявка, калькулятор и контакты закреплены внизу. Кнопка «Заявка» приподнята и подсвечена — до неё дотягивается большой палец.
Меню выезжает панелью справаРазделы с иконками, переключатель языков и кнопки связи в одном месте. Текущий раздел отмечается при прокрутке.
Услуги раскрываются по тапуНаведения на телефоне нет, поэтому карточка открывает описание касанием, а 3D-макет территории стартует, когда доезжает до экрана.
Калькулятор под палецПолзунки, готовые сценарии и отправка расчёта менеджеру — всё в вертикальном экране, без горизонтальной прокрутки.

Запись с телефона: в рамке справа — живая запись экрана iPhone, а не монтаж. Так сайт видит посетитель.

Услуги в мобильной версии сайта DAMU Logistics

Запись экрана

Первый экран мобильной версии — Первый экран: слайдер, цифры, кнопка презентации

О компании и география в мобильной версии — О компании и карта «География возможностей»

Инфраструктура в мобильной версии — Инфраструктура: 3D-макет и цифры

Форма расчёта в мобильной версии — Контакты и форма «Получить расчёт»

Что сделали

Из чего состоит сайт

Главная страница из десяти сцен, мобильная версия с собственной навигацией и админпанель, в которой клиент правит контент сам.

Заставка при загрузке

Логотип проявляется «сканером», по маршруту Европа — Байсерке — Китай пробегает огонёк, счётчик доходит до 100 % и зелёная шторка открывает сайт. Три секунды, которые задают тон.

Видео с дрона на первом экране

Ролик идёт первым кадром слайдера, дальше пять фотографий площадки. Кадры листаются стрелками и клавишами, у всех — эллиптический обрез.

Восемь услуг с раскрытием

Квадратные карточки 4×2: при наведении иконка улетает в угол, снизу выезжает описание и «Подробнее». На телефоне карточка раскрывается по тапу.

География возможностей

Карта мира собирается из точек, из Алматы расходятся маршруты в Европу и Китай, по карте проходит луч сканера. Цифры представительств рядом.

Облёт 3D-макета территории

Макет «подлетает» из перспективы, затем оживает: по дорогам едут фуры, по ветке ходит состав, маркеры пульсируют у цифр, наведение подсвечивает объект.

Голограмма в блоке «Технологии»

Точечная карта мира поверх фотографии: сетка, маршруты, кольца, строки данных, глитч проекции и наклон за курсором.

Калькулятор с отправкой менеджеру

Аренда площади или паллето-места, готовые сценарии, план склада, итог с разбивкой. Расчёт уходит менеджеру вместе с контактами клиента.

Заявки в Telegram и Bitrix24

Форма с прикреплением файлов и окно калькулятора пишут заявку в базу сайта и передают её в Telegram и в CRM. Тексты, услуги и контакты правятся в админпанели на трёх языках.

На чём собрано

Технологии проекта

Без тяжёлых конструкторов: страница грузится быстро, а анимации считает браузер, а не скрипты.

PHP 8.4страница, API заявок и админпанель без фреймворка-тяжеловеса

Tailwind CSS 4дизайн-система и адаптив от 320 до 1920 px

CSS scroll-driven animationsсцены оживают от прокрутки без JavaScript-скролл-хендлеров

PostgreSQLконтент на трёх языках, услуги, заявки, настройки

Telegram · Bitrix24заявки уходят менеджеру и в CRM в момент отправки

Nginx · Let’s Encryptвыделенный сервер, HTTPS, видео с быстрым стартом

01Задача

Показать масштаб площадки

DAMU Logistics — 230 гектаров в Байсерке, собственный контейнерный терминал, железнодорожная ветка и склады класса А. Клиенту нужен был сайт, который передаёт этот масштаб арендатору и партнёру за первые секунды, а не после чтения текста, и при этом собирает заявки: расчёт стоимости хранения, запрос под конкретный груз, презентацию компании.

02Дизайн

Сцены вместо блоков

Главную собрали как последовательность сцен: заставка с маршрутом, видео с дрона, услуги с раскрытием, облёт 3D-макета территории, голограмма в разделе технологий. Каждый блок отвечает на один вопрос посетителя и заканчивается действием. Фирменный зелёный оставили единственным акцентом на тёмных и светлых фонах.

Слайдер с видео первым кадром и эллиптическим обрезом
3D-макет территории с живым слоем: фуры, состав, маркеры
Калькулятор с готовыми сценариями и планом склада

03Разработка

Анимации считает браузер

Сцены привязаны к прокрутке через CSS scroll-driven animations, а там, где Safari их не поддерживает, — через IntersectionObserver. Видео переупаковано с быстрым стартом и готовится заранее, чтобы играть в Safari без паузы. Контент трёх языков, услуги, заявки и настройки интеграций живут в админпанели: клиент правит тексты и получает заявки без разработчика.

✓Результат

Сайт, который открывают до конца

Кликабельный прототип главной передан клиенту как рабочая страница: всё нажимается, анимации живые, есть версии для компьютера и телефона на трёх языках. Заявки из формы и калькулятора уходят менеджеру в Telegram и в Bitrix24. Внутренние страницы услуг, новостей и контактов собираются на том же каркасе.

Вопросы по проекту

Частые вопросы

Сколько занимает разработка такого сайта?+

Главная страница с анимациями, калькулятором, админпанелью и тремя языками собрана за две недели после согласования структуры. Внутренние страницы услуг, новостей и контактов добавляются на готовом каркасе — это ещё несколько дней.

Не тормозят ли такие анимации на телефоне?+

Нет. Сцены привязаны к прокрутке средствами CSS, а не скриптами, тяжёлые эффекты на телефоне упрощены, видео переупаковано с быстрым стартом. Мобильная версия проверялась на iPhone в Safari — запись экрана есть на этой странице.

Как считает калькулятор стоимости хранения?+

По ставкам, которые задаются в админпанели: аренда площади или паллето-места, срок, приёмка, отгрузка и маркировка. Готовые сценарии — «Маркетплейс», «Дистрибьютор», «Производство» — подставляют типовые объёмы. Расчёт предварительный, точную цену подтверждает менеджер.

Куда попадают заявки с сайта?+

В базу сайта, менеджеру в Telegram и в Bitrix24 через вебхук. Из калькулятора заявка уходит вместе с параметрами расчёта, из формы — с прикреплёнными файлами.

Можно ли сделать похожий сайт для другой логистической или промышленной компании?+

Да. Каркас — сцены, калькулятор, админпанель на трёх языках, интеграции — переносится под другой бренд. Меняются фотографии, 3D-макет территории, услуги и ставки.