Как сделан этот сайт

Зачем этот сайт

У компании нет публичных клиентских проектов: работы закрыты соглашениями о неразглашении. Значит, единственное доказательство, которое посетитель может проверить прямо сейчас, — сам сайт.

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

Типографика и регистр

Заголовки набраны гротеском Inter Tight, основной текст — Inter, инженерные подписи — моноширинным JetBrains Mono: индексы секций, координаты, метки схем. Три гарнитуры разделяют роли текста без декоративности.

Регистр традиционный: заголовки, названия услуг и пункты меню начинаются с заглавной буквы, строчные остались только в логотипе. Прежний сплошной lowercase читался как стиль креативной студии и расходился с аудиторией. Иерархия держится на контрасте кеглей — заголовок первого экрана и основной текст отличаются кратно.

Инженерная графика и WebGL-сцена

На первом экране — собственная процедурная сцена на three.js: разрозненные модули постепенно сходятся в один контур. Это метафора того, чем мы занимаемся, а не декорация; стоковых иллюстраций и фотографий людей на сайте нет.

Сцена загружается после первого экрана и не задерживает отрисовку страницы; при слабом устройстве или отключённом WebGL остаётся статичный кадр. Системный режим уменьшенного движения выключает анимацию полностью. Схемы архитектуры типовых решений строятся как SVG из данных админки: узлы и связи описаны в CMS, картинки не рисуются вручную.

Навигация

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

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

Механики

Блок «Шесть ситуаций» интерактивный: посетитель отмечает то, что узнаёт у себя, и получает вывод — какие направления закрывают отмеченное и с чего обычно начинают. Выбор переносится в форму, поэтому заявка приходит уже с контекстом. Без JavaScript блок остаётся читаемым списком.

AI-разбор задачи работает через серверный прокси: ключ модели не покидает сервер, тема ограничена задачами компании, на обращения с одного адреса действует суточный лимит. Если ключ не задан или сервис недоступен, вместо разбора показывается форма. Механика включается отдельно и выключается без последствий для остальной страницы.

Стек и инфраструктура

Публичная часть и админка — Next.js 16 и React 19 на TypeScript. Контент, каталог и заявки живут в Django с PostgreSQL, очереди и кэш — на Redis. Всё разворачивается в Docker, снаружи стоит nginx с кэшированием статики и страниц.

Заявка из формы попадает сразу в три места: карточка в админке, письмо ответственному и сообщение в Telegram. Доставку выполняют фоновые задачи с повторами, поэтому обращение не теряется, если внешний сервис недоступен.

Скорость

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