Фортеця. Сайт інженерної компанії підземних укриттів

«Фортеця» проєктує і будує автономні підземні укриття. Повний цикл: геологія, проєкт, монолітні роботи, інженерні системи - вентиляція з фільтрацією, електроживлення, зв’язок, автоматика.

Компанії потрібен був сайт, який пояснює послугу через характеристики: глибина закладення, клас захисту, автономність, площі, терміни та вартість за комплектаціями. Ми відповідали за дизайн, фронтенд, дві мовні версії та за схему обробки заявок.

Дизайн зробили у Figma з нуля. Темна схема: фон #141618, акцент - золото #c9a227. Заголовки набрані Unbounded, текст і цифри - IBM Plex Sans та IBM Plex Mono. Оформлення побудоване на кресленницькій графіці: тонкі лінії, координати, позначки рівнів.

У макеті описані стани інтерфейсу для кнопок, посилань, полів форми та мовного перемикача - звичайний, при наведенні та у фокусі. Окремим фреймом зібраний UI-kit.

На першому екрані - тривимірна модель ділянки: будинок, шахта входу, житловий модуль укриття, вентиляція, енергоблок. Під час завантаження каркас прокреслюється лініями по групах елементів. Підписи з позначками - звичайні HTML-елементи, спроєктовані на точки моделі, тому вони йдуть за геометрією під час похитування сцени.

Модель у форматі glTF/GLB, рендер на three.js: із геометрії будується каркас ребер, поява анімується штрихуванням ліній. Сцена ініціалізується в простої головного потоку і будується порціями, щоб не блокувати завантаження сторінки. Якщо WebGL недоступний, показується SVG-версія сцени з тією ж анімацією.

Товщина ліній задається окремо для кожної групи елементів - земля, стіни будинку, сходи, короб укриття, вентиляція. Для добору значень зробили внутрішню панель: вона відкривається параметром ?tune=1 в адресі і на звичайних сторінках не відображається.

Параметри змінюються повзунками просто в браузері, тому варіанти ми показували й затверджували з клієнтом у моменті. Потім він і сам «погрався» з налаштуваннями та обрав оптимальний вигляд - нам залишилося скопіювати готовий набір значень у конфігурацію і застосувати на сайті.

Друга секція - розріз ділянки в перерізі: будинок на поверхні, шахта входу, шлюз із фільтрацією, житловий модуль, енергоблок, повітрозабірник. Коли секція потрапляє в зону видимості, лінії креслення промальовуються послідовно, з каскадною затримкою.

Під розрізом виведені показники: глибина закладення 6 м, автономність 90 діб, товщина монолітної стіни 60 см, площа до 120 кв. м. Значення анімуються лічильником від нуля.

Укриття збирається в різних комплектаціях: від компактного сховку до просторої резиденції з повним набором інженерних систем. Ми розвели їх по картках, де в кожної видно склад систем і чим вона відрізняється від сусідньої - обирати можна спокійно, не порівнюючи абзаци тексту.

Етапи робіт винесли окремим блоком: геологія, проєкт, котлован і моноліт, інженерні системи, здача. Клієнт одразу бачить увесь шлях будівництва і розуміє, що і в якому порядку відбуватиметься.

На сайті чотири типи анімації: поява блоків під час прокручування, промальовування креслень, лічильники показників і паралакс фонових сіток. Усе реалізовано на нативному JavaScript через IntersectionObserver та requestAnimationFrame, без сторонніх бібліотек. Зміщення виконуються через transform, обробники прокручування - пасивні.

За увімкненого системного налаштування prefers-reduced-motion анімації вимикаються, а елементи одразу відображаються в кінцевому стані.

Нам хотілося додати проєкту щось живе й таке, що запам’ятовується, і на 404 для цього найкраще місце - сторінку і так ніхто не чекає. Так з’явилася ідея радара.

Промінь обертається з періодом 4 секунди, на полі блимають позначки, нижче построково виводиться лог сканування: запит маршруту, координати сектора, перевірка архіву креслень і підсумковий рядок про відсутність об’єкта за адресою. Координати в лозі перераховуються кожні 90 мс із випадковим відхиленням навколо точки Києва.

Сторінка закрита від індексації через robots.txt і мета-тег noindex. За prefers-reduced-motion лог виводиться одразу, без анімації та блимання.

Вийшло цікаво - сторінка стала ще однією фішкою проєкту, яку хочеться показати.

Сайт зібраний без збирача: HTML, CSS і нативні ES-модулі, один мініфікований файл стилів, шрифти у woff2 розміщені на своєму хості й розбиті на кириличний і латинський піднабори. Модель GLB віддається з gzip.

Для 3D-сцени задані обмеження за навантаженням. Щільність пікселів обмежена подвійною, а на пристроях із чотирма ядрами й менше - півторною. Згладжування вмикається лише за низької щільності. Після збирання сцена рендериться з кроком 33 мс, тобто близько 30 кадрів на секунду, а поза зоною видимості рендер зупиняється. За недоступного WebGL показується SVG-версія.

Сайт двомовний: українська версія в корені, англійська в розділі /en із дзеркальною структурою сторінок. Кожна пара пов’язана атрибутами hreflang - uk, en і x-default. Якщо мова браузера не збігається з мовою сторінки, показується плашка з пропозицією перемкнутися, вибір зберігається в localStorage.

На сторінках прописані canonical, Open Graph і Twitter Card. Розмітка Schema.org у форматі JSON-LD містить Organization, WebSite, HomeAndConstructionBusiness, Blog, Article, CollectionPage, AboutPage, BreadcrumbList і Person. Карта сайту містить 18 адрес із мовними альтернативами, службові сторінки закриті в robots.txt.

Форма збирає ім’я, телефон і коментар. Реалізовані перевірка обов’язкових полів, стани помилки та успіху, керування з клавіатури, повернення фокуса після закриття модального вікна та повідомлення для скрінрідерів.

Схема обробки заявок для проєктів із бекендом виглядає так: заявка йде в Telegram-бот із кнопками зміни статусу, зберігається в CRM з етапом і джерелом, конверсія рахується наскрізним звітом від джерела до договору. Нижче - демонстраційний макет такої панелі: потік заявок, етапи, джерела трафіку і показники. Дані на макеті умовні.

Проєкт зберігається в Git. Деплой виконується однією командою: збирання CSS-бандла, простановка версій у ресурсів для скидання кешу браузера, викладення файлів через rsync і виставлення прав на сервері.

На статичному сайті тестувати нічого. У проєктах, де є бекенд на Laravel і обробка заявок, ми покриваємо юніт-тестами приймання та валідацію ліда, надсилання в Telegram і запис у CRM, а після деплою проганяємо смоук-перевірку доступності ключових сторінок і форми.