docs: add site design spec and implementation plan

2026-04-03 00:53:01 +05:00
commit c7f9e6b1e8
2 changed files with 4188 additions and 0 deletions
@@ -0,0 +1,347 @@
+# Спецификация: Экспертный портал БИТ.WMS
+
+**Дата:** 2026-04-03
+**Статус:** Утверждено
+
+---
+
+## 1. Обзор проекта
+
+### Цель
+Разработка экспертного контентного портала по складской логистике для компании "Первый Бит" с фокусом на лидогенерацию: привлечение лидов, звонков и подписок по направлению продажи и внедрения WMS-решений.
+
+### Позиционирование
+Информационный экспертный портал по решению задач склада. Подход pull-продаж: экспертность через статьи, вебинары, курсы, кейсы и мероприятия. Не push, а привлечение через ценный контент.
+
+### Целевая аудитория
+- Руководители складов
+- Руководители и сотрудники IT-отделов
+- Директора предприятий
+- Предприниматели (мелкий, средний, крупный бизнес)
+- Бухгалтеры и финансовые менеджеры
+
+### Ценностное предложение
+- Экспертность в складской логистике
+- Комплексность (единое окно)
+- Прозрачность опыта и компетенций
+
+### KPI сайта
+- Количество подписок/регистраций/просмотров
+- Количество лидов через web-формы
+- Количество звонков с сайта (CallTouch)
+- Обращения через callback-виджет
+- Диалоги в онлайн-консультанте (JivoSite)
+- Конверсия трафика в лиды
+- Стоимость лида
+
+---
+
+## 2. Технологический стек
+
+| Компонент | Технология |
+|-----------|-----------|
+| CMS | WordPress 6.x |
+| Тема | GeneratePress Premium |
+| Блоки | GenerateBlocks Pro |
+| Кастомные поля | ACF Pro (Advanced Custom Fields) |
+| Кастомные типы записей | CPT UI или код в functions.php |
+| Формы | Contact Form 7 или WPForms |
+| SEO | Yoast SEO или RankMath |
+| Рассылка | Unisender |
+| Онлайн-консультант | JivoSite |
+| Callback | Callback-hunter или аналог |
+| Попапы | Popup Maker |
+| Аналитика | Яндекс.Метрика, Google Analytics 4, CallTouch |
+
+---
+
+## 3. Брендбук и визуальный стиль
+
+Строго по брендбуку "Первый Бит" (книга по визуальной идентификации бренда, 14.12.2018).
+
+### Цветовая палитра
+| Цвет | Значение | Код |
+|------|----------|-----|
+| Белый | Основной фон, много воздуха | #FFFFFF |
+| Розовый/маджента | Основной корпоративный цвет | Pantone 213, RGB 229 0 113, #E50071 |
+| Чёрный | Заголовки и текст | #000000 |
+| Светло-серый | Дополнительный цвет | RGB 235 235 235, #EBEBEB |
+
+### Типографика
+- **Заголовки:** Suisse Int'l Bold
+- **Текст:** Suisse Int'l Book
+- **Запасной шрифт:** Arial (Bold / Regular)
+
+### Принципы стиля
+- Минимализм, много белого пространства
+- Запрещены: градиенты, диагонали, тени, стоковые фото, альтернативные шрифты
+- Вёрстка левым флагом, соблюдение осей
+- Логотип всегда в левой части
+
+---
+
+## 4. Структура сайта
+
+### Карта страниц
+```
+Главная
+├── БИТ.WMS (продуктовая страница)
+│   ├── Функции
+│   ├── Заказать демо (форма)
+│   └── Анкета для заполнения
+├── Кейсы (архив + детальная)
+├── Статьи (архив + детальная)
+├── Вебинары (архив + детальная)
+├── Курсы (архив + детальная)
+├── Мероприятия (архив + детальная)
+├── Материалы (архив + скачивание)
+├── Новости (архив + детальная)
+└── Контакты
+```
+
+### Кастомные типы записей (CPT)
+
+| CPT | Slug | Кастомные поля (ACF) |
+|-----|------|---------------------|
+| Кейсы | `case` | Клиент, отрасль, задача, решение, результат, галерея |
+| Вебинары | `webinar` | Дата, спикер, запись видео, статус (анонс/прошёл) |
+| Курсы | `course` | Программа, длительность, формат, стоимость |
+| Мероприятия | `event` | Дата, место, формат, регистрация |
+| Материалы | `material` | Файл, тип (PDF/видео/чек-лист), gated (да/нет) |
+
+Статьи и Новости используют стандартный тип `post`, разделяются рубриками (categories).
+
+---
+
+## 5. Лейаут и навигация
+
+### Фиксированная боковая панель (левая)
+- Ширина: ~70px свёрнутая (иконки), ~250px при hover/раскрытии
+- Фон: белый, правая граница — тонкая серая линия
+- Сверху: логотип "первыйБит" (сокращённый вариант)
+- Пункты меню (иконка + подпись при hover):
+  - БИТ.WMS (иконка: коробка/склад)
+  - Кейсы (иконка: папка)
+  - Статьи (иконка: документ)
+  - Вебинары (иконка: камера)
+  - Курсы (иконка: шапочка)
+  - Мероприятия (иконка: календарь)
+  - Материалы (иконка: скачивание)
+  - Новости (иконка: колокольчик)
+  - Контакты (иконка: телефон)
+- Снизу: иконки соцсетей (Telegram, VK)
+- Мобильные: панель скрыта, гамбургер-меню сверху
+
+### Верхняя полоса (тонкий хедер)
+- Левая часть: логотип + слоган "Экспертный портал по складской логистике"
+- Правая часть: телефон + кнопка "Заказать демо" (розовая) + поиск (иконка лупы)
+
+### Основная область контента
+- Отступ слева: ~70px (под боковую панель)
+- Максимальная ширина контента: ~1200px
+- Много белого пространства
+
+### Футер
+- Логотип + контакты Екатеринбург ПЦ
+- Колонки: разделы сайта, продукты, контакты
+- Юридические ссылки: политика конфиденциальности, согласие на обработку данных
+- Копирайт "Первый Бит"
+
+---
+
+## 6. Главная страница
+
+### Герой (первый экран)
+- Белый фон, крупная типографика Suisse Int'l Bold
+- H1: "Всё о складской логистике и автоматизации склада" (или аналогичный экспертный посыл)
+- Подзаголовок: "Экспертный портал от Первого Бита — кейсы, вебинары, курсы и материалы для руководителей складов"
+- CTA основная (розовая): "Заказать демо БИТ.WMS"
+- CTA вторичная (чёрная обводка): "Смотреть кейсы"
+- Краткие цифры-KPI: количество проектов, лет опыта, клиентов
+
+### Блок фильтрации по рубрикам
+- Горизонтальная полоса с тегами-кнопками: "Все", "Статьи", "Кейсы", "Вебинары", "Курсы", "Мероприятия", "Материалы", "Новости"
+- AJAX-фильтрация без перезагрузки страницы
+
+### Лента контента
+- Сетка карточек 2-3 колонки
+- Карточка: изображение, бейдж типа, заголовок, краткое описание, дата, просмотры
+- Кнопка "Показать ещё"
+
+### Промо-блок БИТ.WMS
+- Заголовок: "БИТ.WMS — комплексное решение для вашего склада"
+- 3-4 преимущества иконками
+- CTA: "Подробнее о продукте" / "Заказать демо"
+
+### Блок подписки на рассылку
+- Заголовок + поле email + кнопка "Подписаться"
+- Текст: "Получайте экспертные материалы по складской логистике на почту"
+
+### Блок "Наши клиенты"
+- Логотипы компаний-клиентов (горизонтальная строка)
+- Опционально: цитата из кейса
+
+---
+
+## 7. Страница продукта БИТ.WMS
+
+### Герой
+- H1: "БИТ.WMS"
+- Подзаголовок: "Комплексное решение для управления складом"
+- Краткое описание (2-3 предложения)
+- CTA: "Заказать демо" (розовая) + "Скачать презентацию" (gated — за email)
+
+### Блок функций
+- Сетка 2-3 колонки, карточки: иконка + название + описание + результат применения
+- Функции: приёмка, размещение, хранение, отбор, отгрузка, инвентаризация, аналитика
+
+### Блок "Почему Первый Бит"
+- 3-4 крупных блока с цифрами/фактами:
+  - "Быстро" — профессионалы, знаем бизнес-задачи склада
+  - "Просто" — знаем все о WMS, собственный продукт
+  - "Качественно" — результат и многолетний опыт
+  - "Открыто" — прозрачная ценовая политика
+
+### Блок кейсов
+- 2-3 карточки релевантных кейсов
+- Ссылка "Все кейсы"
+
+### Блок "Другие решения"
+- Карточки: 1C:WMS, Клеверенс, 1C:TMS
+- Подпись: "Возможно, вам будет интересно"
+
+### Форма "Заказать демо"
+- Поля: Имя, Компания, Телефон, Email, Комментарий
+- Чекбокс согласия на обработку данных
+- Кнопка "Отправить заявку" (розовая)
+
+### Анкета для детального запроса
+- Расширенная форма: отрасль, размер склада, количество SKU, текущая система, задачи
+- Отдельная подстраница БИТ.WMS (доступна по ссылке и из формы демо)
+
+---
+
+## 8. Архивные и детальные страницы
+
+### Шаблон архива (единый для всех CPT)
+- H1 раздела
+- Фильтры: по рубрикам/тегам, по дате (горизонтальная полоса)
+- Сетка карточек 2-3 колонки
+- Пагинация или "Показать ещё"
+
+### Карточка контента (единый стиль)
+- Превью-изображение
+- Бейдж типа (чёрный текст на сером фоне)
+- Заголовок (Suisse Int'l Bold)
+- Краткий текст (2 строки)
+- Мета: дата, просмотры, автор
+
+### Детальная страница статьи/новости
+- H1, дата, автор
+- Основной текст
+- Боковая колонка справа: "Связанные материалы" + форма подписки
+- Внизу: "Читайте также" (3 карточки)
+- Кнопки шеринга: VK, Telegram, копировать ссылку
+
+### Детальная страница кейса
+- Структура: Клиент, Отрасль, Задача, Решение, Результат
+- Галерея скриншотов/фото
+- Цитата клиента (если есть)
+- CTA: "Хотите такой же результат? Закажите консультацию"
+
+### Детальная страница вебинара
+- Анонс: дата, спикер, программа, кнопка "Зарегистрироваться"
+- Прошёл: запись видео (embed), презентация для скачивания (gated)
+
+### Детальная страница курса
+- Описание, программа, длительность, формат, стоимость
+- CTA: "Записаться на курс"
+
+### Детальная страница мероприятия
+- Дата, место, формат, программа
+- CTA: "Зарегистрироваться"
+
+### Страница материалов
+- Карточки с иконкой типа файла (PDF, видео, Excel)
+- Gated-контент: модальное окно с формой (имя, email) перед скачиванием
+
+---
+
+## 9. Лидогенерация и интеграции
+
+### Формы обратной связи
+| Форма | Расположение | Поля |
+|-------|-------------|------|
+| Заказать демо | Страница БИТ.WMS, модальное окно из хедера | Имя, Компания, Телефон, Email, Комментарий |
+| Получить консультацию | Контакты, внизу кейсов | Имя, Телефон, Email, Вопрос |
+| Зарегистрироваться | Вебинары, курсы, мероприятия | Имя, Email, Телефон |
+| Скачать материал | Модальное окно (gated) | Имя, Email |
+| Обратная связь | Контакты | Имя, Email, Сообщение |
+
+Все формы: email-уведомление + сохранение в CRM (при наличии интеграции).
+
+### Подписка на рассылку (Unisender)
+- Точки захвата: блок на главной, сайдбар детальных страниц, футер
+- Поля: email (обязательно), имя (опционально)
+
+### JivoSite
+- Виджет в правом нижнем углу
+- Автоприглашение через 30 сек на страницах: главная, БИТ.WMS, кейсы
+
+### Callback-виджет
+- Кнопка "Перезвоните мне" — плавающая или встроенная в хедер
+
+### Попапы
+| Триггер | Содержание | Страницы |
+|---------|-----------|----------|
+| Exit-intent | "Подпишитесь на рассылку" / "Скачайте чек-лист" | Все |
+| Таймер 60 сек | Предложение демо | Страница БИТ.WMS |
+
+### Аналитика
+- Яндекс.Метрика — цели на все формы, колтрекинг
+- Google Analytics 4
+- CallTouch — отслеживание звонков
+- UTM-разметка для рекламных каналов
+
+### SEO
+- Yoast SEO или RankMath
+- XML-карта сайта
+- Schema.org разметка (Organization, Article, Event)
+- Open Graph мета-теги для соцсетей
+
+---
+
+## 10. Адаптивность (мобильные устройства)
+
+- Боковая панель скрывается, заменяется гамбургер-меню сверху
+- Сетки карточек переходят в 1 колонку
+- Герой адаптируется: текст и кнопки стекаются вертикально
+- Формы занимают полную ширину
+- Виджеты JivoSite и callback остаются видимыми
+- Попапы адаптируются под мобильный экран
+
+---
+
+## 11. Референсы
+
+- **Структура:** [place.lemma.ru](https://place.lemma.ru/) — боковая навигация, карточная сетка, контентный портал для отраслевых специалистов
+- **Контент:** [blueyonder.com](https://blueyonder.com/) — enterprise B2B стиль, крупная типографика, storytelling через секции, KPI-цифры, блоки доверия
+
+---
+
+## 12. Продукты
+
+| Продукт | Роль на сайте |
+|---------|--------------|
+| БИТ.WMS | Основной продукт — полноценная продуктовая страница |
+| 1C:WMS Логистика. Управление складом | Вторичный — краткая карточка в "Возможно, вам будет интересно" |
+| Клеверенс | Вторичный — краткая карточка |
+| 1C:TMS | Вторичный — краткая карточка |
+
+---
+
+## 13. Контакты и распределение лидов
+
+- Основной контакт: Екатеринбург Проектный центр
+- Распределение лидов: Екатеринбург ПЦ распределяет по территориально ближайшим ЦК WMS
+- Телефон и адрес отображаются на странице контактов и в футере