Публичный сайт: адаптив, контакт менеджера и цифровая схема проекта

Публичный сайт — это не «визитка», а первый экран доверия пресейла: клиент за 15 секунд должен понять, что Magic Tool AV — цифровая среда AV-интегратора (часть экосистемы iRidi), и дойти до демо без трения. Мы обновили magictoolav.com так, чтобы интерфейс отражал логику продукта: от брифа к запуску системы.

Зачем трогать маркетинг-сайт в фазе Build

Пока растёт каталог и кабинет tool.*, внешний сайт часто отстаёт: десктоп-only шапка, слабый CTA, нет живого контакта. На практике это ломает CJM ещё до логина: «куда звонить», «есть ли демо», «это SaaS или презентация».

Цели обновления:

• адаптив без потери иерархии бренда;
• прямой канал к менеджеру;
• визуальная метафора продукта (схема проекта), а не абстрактный градиент;
• прозрачный демо-доступ к tool.* рядом с основным CTA.

Адаптивная шапка и навигация

На десктопе: логотип (ссылка на /), якорные разделы продающей страницы, блог, телефон, кнопка «Протестировать». На узких экранах (≤860px) — бургер с полным меню: разделы не «исчезают», а складываются в вертикальный список с телефоном и CTA.

• Логотип: SVG-марка + подпись, aria-label «на главную» — доступность и предсказуемый возврат.
• Sticky nav с blur — контент читается при скролле к демо-блоку и browser-mockup.
• На средних ширинах часть якорей скрывается прогрессивно (nav-hide-md), чтобы шапка не превращалась в кашу.

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

Телефон +7 906 808-86-64 стоит в навигации, hero и подвале. Для интеграторского B2B это важнее «формы на 12 полей»: пилот и демо часто закрываются голосом после 5 минут на сайте.

Цифровая анимация фона: Lite-схема как метафора

В hero добавлен canvas-слой (hero-bg.js): сетка, узлы (бриф / ТЗ / спека / КП / каталог / порты / iRidi) и импульсы по рёбрам. Это не «particles ради красоты», а намёк на advisory Lite-схему в продукте — порты, связи, поток сигнала.

• Текст читается за вуалью (hero-veil) — контраст важнее «вау».
• prefers-reduced-motion — статичная схема без анимации.
• Пауза при visibilitychange — не жжём CPU в фоне.

Демо-доступ и консультант

В hero — блок демо-учётки tool.*, ИИ-консультант с ссылкой на команду разработки, cookie-баннер (Метрика). Cookie ужат по высоте на мобилке, чтобы не перекрывать CTA.

Что дальше

Сайт должен оставаться зеркалом продукта: каталог растёт, КП = конфигуратор, цены в спеке заморожены до «Актуализировать». Следующие итерации — только если усиливают путь «увидел → понял сценарий → открыл tool / позвонил».

Продукт: tool.magictoolav.com.

Технические детали реализации (для тех, кто сопровождает стенд)

• Статика в репозитории сайта MagicTool (site/index.html, hero-bg.js), деплой через deploy.command.
• Canvas рисует mesh узлов; типы узлов: hub / device / port — визуально разные примитивы.
• Cookie: localStorage-ключ согласия, ужатый текст и высота баннера на мобилке.
• Метрика и консультант подключены без блокировки первого экрана (defer).

Связь с продуктовым CJM

На сайте посетитель видит обещание контура. В tool.* он должен получить тот же смысл: горизонтальное меню этапов проекта, каталог как отдельная страница, КП как конфигуратор. Если маркетинг говорит «схема проекта», а в продукте нет портов/подсистем — доверие падает. Поэтому анимация фона намеренно говорит языком Lite-схемы и этапов пресейла.

Критерии приёмки обновления сайта

• 390px: бургер открывается, телефон и CTA доступны, hero-кнопки в колонку.
• 1440px: полное меню, лого кликабельно на /.
• Reduced motion: нет бегущих импульсов.
• После «Понятно» cookie не перекрывает демо-блок.