Библиотека компонентов

Ниже только конструкторные блоки, из которых можно собирать новые страницы сайта. Компоненты разделены на типы. У каждого блока есть крупный номер, русское название, краткое описание, теги и основные классы.

Нумерация автоматически пересчитывается под выбранный фильтр (с 01 и далее). Внутри превью используется реальный текст из текущих страниц сайта.

Откроется полноэкранный конструктор сетки для визуального ТЗ под GPT.

ТИП A

Старт страницы

Блоки для первого экрана и стартового контекста раздела.

01

Герой услуги с фоновым изображением

Тип: стартовый экран

Большой первый экран с акцентным заголовком, стат-показателем и подзаголовком.

#герой #первый_экран #статистика #подзаголовок

Классы: .service-hero-grid .service-hero-title .service-hero-stat

[BASE CRM]

Megalodon CRM: Base

360° контроль

Поняли что уже нужна CRM? Начинай с Megalodon CRM

02

Полоса пояснения под героем

Тип: контекстный подзаголовок

Коротко объясняет суть предложения сразу после первого экрана.

#контекст #подводка #моноширинный_текст

Классы: .hero-description .hero-description-text

НЕ ЖАЛУЮТСЯ • НЕ СПОРЯТ • НЕ ОШИБАЮТСЯ • РАБОТАЮТ КРУГЛОСУТОЧНО

03

Шапка секции (лейбл + заголовок + подпись)

Тип: заголовочный блок секции

Универсальная конструкция для запуска любого следующего смыслового блока.

#заголовок_секции #лейбл #подпись #структура

Классы: .section-header-grid .section-label .section-title .section-subtitle

[03] Каталог услуг

Каждый блок — отдельная услуга
с измеримым результатом

Работаем точечно. Работаем системно.

ТИП B

Карточные сетки

Блоки для подачи тезисов, проблем, преимуществ и сегментов.

04

Вводная сетка карточек (3 тезиса)

Тип: интро-блок с фактами

Три карточки с нумерацией для быстрых смысловых опор в начале раздела.

#вводный_блок #карточки #тезисы #нумерация

Классы: .intro-grid-7 .intro-card .intro-card-num

01

Большая номенклатура: тысячи SKU, вариаций и комплектов

02

Сложные и длительные сделки с согласованием и цепочкой поставок

03

Нужен контроль потока, а не красивые отчеты в конце месяца

05

Сетка проблем «когда система уже не тянет»

Тип: проблемный блок

Карточки с болями и ограничениями текущего процесса.

#боли_клиента #проблемы #карточки_условий

Классы: .when-grid-7 .when-item-card .when-item-num

01

Лиды теряются в потоке

Большой входящий поток перегружает стандартные системы.

02

Операторы работают по-своему

Нет единой логики работы с клиентами.

03

Контроль качества ручной

Запаздывающая обратная связь и отсутствие аналитики.

04

Масштабирование = рост штата

Рост затрат без роста эффективности.

06

Бенто-сетка преимуществ (XL/LG/MD)

Тип: основной продающий блок

Комбинация крупных и средних карточек для раскрытия продукта по уровням.

#бенто #преимущества #ценность #продуктовый_блок

Классы: .tasks-bento-grid .task-bento-card .task-bento-tag

Клиент 360

Вся история клиента
в одной карточке

Telegram • WhatsApp • Viber • Instagram • Email
Воронка

Рабочая воронка
с прогнозами

Видно, где теряются лиды и кто закрывает сделки.

Задачи

Напоминания
и контроль сроков

Просрочки видны руководителю.

King chat

Единый центр связи

Скрипты, подсказки, быстрые ответы.

Интеграции

Системы и устройства

Сайт, телефония, 1С, кассы, терминалы.

Безопасность

Права доступа

Гибкие роли и аудит действий.

31

Стартап: 4 тупиковых пути (асимметрия)

Тип: блочный компонент асимметричный

Асимметричная сетка карточек с 4 сценариями провала и выраженным контрастом первого блока.

#startup #асимметрия #проблемный_блок #when_grid

Классы: .startup-grid-5 .when-item-card .startup-card-xl

01

Универсальные CRM

«Про всё и ни о чём». Процессы не ложатся. Костыли и бесконечная кастомизация.

02

Разработка с нуля

Ядро, роли, API, безопасность, интерфейс, мобильное приложение. Годы разработки.

03

Плагины и надстройки

Каждое обновление ломает систему. Технический долг растёт быстрее бизнеса.

04

Старые решения

Тяжёлые, дорогие, неудобные. Пользователи саботируют работу.

32

Кастомная автоматизация (асимметричная сетка)

Тип: блочный компонент асимметричный

Сетка из карточек 01–05 + финальный широкий блок. Подходит для логики правил и сценариев автоматизации.

#асимметрия #автоматизация #кастомная_логика #сценарии

Классы: .custom-automation-grid .custom-automation-card .custom-automation-final

01

Автоматизация любой сложности

02

Расчетные поля, формулы и автоматическая генерация документов.

03

Автоназначение ответственных, авто-уведомления и цепочки действий.

04

Контроль дедлайнов и SLA.

05

Автоматические правила (например: "клиент не отвечает 3 дня -> пометка и задача менеджеру").

ФИНАЛ

Многоуровневые сценарии и условия с ветвлением.

Рутина уходит. Контроль и последовательность остаются.

33

Франшиза: асимметричные буквенные карточки проблем

Тип: блочный компонент асимметричный

Асимметричная сетка с кодами [A]-[D] для фиксации ключевых проблем франшизной модели.

#франшиза #асимметрия #буквенные_карточки #проблемы

Классы: .intro-grid-7 .intro-card .intro-card-num

[A]

Каждый партнер работает по-своему

[B]

Отчеты запаздывают

[C]

Контроль роялти сложный

[D]

Стандарты размываются

07

Сетка результатов на 7 пунктов

Тип: блок выгод / KPI

Линейная подача измеримых результатов с нумерацией.

#результаты #kpi #выгоды #семь_пунктов

Классы: .automation-grid-7 .auto-item .auto-num .auto-text

01

Импорт из Excel, CSV, ERP

02

Скидки по товарам и категориям

03

Надбавки и сезонные корректировки

04

Автоматический расчет НДС

05

Акции и пакетные предложения

06

Динамическое ценообразование

07

Авто-КП и счета без ручных расчетов

08

Сетка отраслей-чипов

Тип: сегментация аудитории

Наглядно показывает, для каких отраслей подходит решение.

#отрасли #сегменты #чипы #рынки

Классы: .realsector-industries-grid .industry-chip

Продажа станков
Климатическое оборудование
Стройматериалы
Химическая промышленность
Спецтехника
Транспортные средства
Медицинское оборудование
FMCG
09

Двухколоночный блок «главная карточка + список»

Тип: контентный split-блок

Слева — ключевое сообщение, справа — список возможностей.

#две_колонки #коммуникации #список_возможностей

Классы: .custom-chat-grid .custom-chat-main .custom-list

Единое окно

Telegram, WhatsApp, Viber, Instagram, Facebook, Email и другие каналы в одном интерфейсе

Коммуникация становится частью сделки, проекта или объекта и не выпадает из управляемого процесса.

Возможности
  • Разграничение доступа к переписке и скрытые внутренние обсуждения.
  • Панель шаблонов и быстрых ответов.
  • Автоматизация ответов и сценариев в диалоге.
  • Привязка чатов к любым сущностям системы.
21

Буквенные карточки консалтинга

Тип: карточки с буквенными маркерами

Карточки формата [A]/[B]/[C]/[D] для подачи направлений консультаций или пакетов работ.

#карточки_с_буквами #консалтинг #пакеты_услуг

Классы: .consulting-grid .consulting-item .consulting-icon

[A]

Оценка текущего проекта

Полный аудит и анализ.

[B]

Оценка планируемого проекта

Предпроектное обследование.

[C]

Консультация по IT ландшафту

Архитектура и интеграции.

[D]

Общий консалтинг

Стратегическое планирование.

34

Контент-хаб: мозаика карточек

Тип: ровный блочный компонент

Модульная сетка карточек XL/LG/MD/SM для подачи направлений и быстрых переходов.

#главная #контент_хаб #карточки #мозаика

Классы: .hub-blocks .hub-block .hub-card-inner

ИИ Решения

ИИ сотрудник на заказ

Работает 24/7, не ошибается, гарантирует качество обслуживания

Стартапы

Открой свой стартап

Применение в любой области + Айти + ИИ

Разработка

Программы на заказ

Воплоти все что казалось фантастикой

ТИП C

Процессы и сценарии

Компоненты для показа этапов работы, маршрутов внедрения и логики.

10

Зигзаг-процесс с карточками

Тип: процессный блок

Верхний и нижний ряд шагов, соединённых линией процесса.

#процесс #шаги #карточки #сценарий

Классы: .process-flow-grid .process-flow-card .process-flow-connector

01

Единый интерфейс каналов

Telegram, WhatsApp, Viber, Instagram, Email.

03

Быстрые ответы

Скорость выше, качество стабильнее.

05

Телефония + карточка

Входящий звонок открывает клиента.

02

Скрытый чат команды

Клиент видит только внешнюю коммуникацию.

04

Подключение нейросетей

Разгрузка сотрудников на типовых вопросах.

06

Заготовки и подсказки

Даже новичок работает как эксперт.

11

SVG-линия процесса со стрелкой

Тип: диаграмма этапов

Монолитная стрелка с вертикальными отводами к карточкам шагов.

#svg #линия_процесса #стрелка #коннекторы

Классы: .custom-coop-map .custom-coop-lines .custom-coop-main-line

01

Анализ

Изучаем процессы и узкие места.

03

Интеграции

Связываем CRM с системами.

05

Запуск

Внедрение и сопровождение.

02

Настройка

Сущности, роли и автоматизации.

04

Тестирование

Проверка на реальных данных.

12

Лента этапов внедрения

Тип: шаги внедрения

Лаконичные карточки этапов для быстрых дорожных карт.

#внедрение #дорожная_карта #этапы

Классы: .impl-flow-grid .impl-card .impl-num

01

Анализ

Разбираемся, как вы работаете сейчас.

02

Настройка

Объекты, воронка, роли, права доступа.

03

Подключение

Мессенджеры, телефония, кассы, принтеры.

04

Тест и обучение

Проверяем на реальных заявках.

05

Запуск

Доводим систему до стабильности.

13

Архитектурный реестр строк

Тип: структурированное описание

Табличный формат с кодами пунктов для техничного описания функций.

#архитектура #реестр #структура #техзадание

Классы: .custom-architecture-list .custom-arch-row .custom-arch-code

3.1

Полная настройка структуры данных

3.1.1

Любое количество сущностей: объекты, проекты, товары, контракты, заявки.

3.1.2

Связи между сущностями любой сложности.

3.1.3

Кастомные поля: текст, числа, формулы, выпадающие списки, файлы, статусы.

14

Нумерованные отраслевые строки

Тип: вертикальный список сегментов

Список направлений с коротким пояснением по каждой отрасли.

#отрасли #вертикальный_список #пояснения

Классы: .callcenter-industry-row .callcenter-industry-num .callcenter-industry-note

01

Финансы и банки

Звонки по заявкам, продлению продуктов и сервисному сопровождению клиентов.
02

Телеком и интернет-провайдеры

Удержание абонентов, обработка отказов и контроль качества операторов.
03

Ритейл и e-commerce

Подтверждение заказов, реактивация базы и повторные продажи.

ТИП D

Усилители и доверие

Блоки для ритма страницы, атмосферы и подтверждения экспертизы.

15

Бегущая строка-разделитель

Тип: ритмический разделитель

Разбивает блоки и закрепляет ключевой месседж через повтор.

#бегущая_строка #разделитель #ритм

Классы: .section-marquee .marquee-container .marquee-text

НЕ CRM ДЛЯ «ВОЗДУХА» - А CRM ДЛЯ ПРОИЗВОДСТВА И ПОСТАВОК - НЕ CRM ДЛЯ «ВОЗДУХА» - А CRM ДЛЯ ПРОИЗВОДСТВА И ПОСТАВОК -
22

Толстая бегущая строка

Тип: акцентный бегущий заголовок

Плотная бегущая строка крупнее стандартной для сильного ритма между смысловыми блоками.

#бегущая_строка #крупный_акцент #ритм_страницы

Классы: .intro-marquee .home-marquee-track .home-marquee-text

БЕЗ МУК РАЗРАБОТКИ ЯДРА • БЕЗ ТЕХНИЧЕСКОЙ ВОЛОКИТЫ • БЕЗ ГЛУБОКОГО ПОГРУЖЕНИЯ В ПРОГРАММИРОВАНИЕ •
16

Сигнальная плашка архитектуры

Тип: акцентный тех-блок

Компактный информационный блок для подчеркивания технологической базы.

#акцент #архитектура #технический_блок

Классы: .custom-signal-board .custom-signal-track .custom-signal-meta

[ARCHITECTURE READY] Настройка под вашу бизнес-логику
DATA MODEL + FUNNELS + ACCESS + INTEGRATIONS + AUTOMATION
17

Полоса метрик + строки опыта

Тип: доказательный блок

Сочетает короткие обещания в полосе и подтверждение опытом по годам.

#метрики #доверие #опыт #таймлайн

Классы: .aiworkers-metrics-strip .aiworkers-history-list .aiworkers-history-row

РАБОТАЮТ 24/7 СОБЛЮДАЮТ ВАШИ СТАНДАРТЫ МГНОВЕННО МАСШТАБИРУЮТСЯ В 10-15 РАЗ ДЕШЕВЛЕ ЧЕЛОВЕКА ЗАПУСК - 2 ДНЯ
2018

Внедрение ИИ и компьютерного зрения.

2021

Собственные R&D в области ИИ.

2024-2026

Megalodon AI: ИИ-сотрудники.

26

История компании (таймлайн по годам)

Тип: строчный хронологический блок

Двухколоночная подача: слева крупный заголовок и описание, справа строки по годам с разделителями.

#история #таймлайн #годы #строчный_компонент

Классы: .history-layout .history-timeline .timeline-item

[02] ИСТОРИЯ

НАШ ОПЫТ

2008

ОСНОВАНИЕ КОМПАНИИ

Разработка бизнес-систем. Формирование экспертной команды.

2010

ПЕРВЫЕ КРУПНЫЕ ПРОЕКТЫ

Полная автоматизация документации и поставок в распределенных структурах.

2012

АВТОМАТИЗАЦИЯ ТНК-БП

Управление инфраструктурными объектами и процессами предприятия.

35

Продуктовый листинг с нумерацией

Тип: списочный компонент

Вертикальный список продуктовых направлений: номер, название, подпись и стрелка действия.

#главная #продукты #листинг #строки

Классы: .products-grid .product-item .product-number

01

Megalodon CRM

Базовая версия

→
02

Megalodon CRM: Real Sector

Реальный сектор

→
36

Листинг услуг с номером и дескриптором

Тип: списочный компонент

Строки услуг с левой нумерацией, центральным названием и правым англоязычным описанием.

#главная #услуги #список #строчный_блок

Классы: .services-list .service-item .service-number

[1] Создание сайтов Web Design & Development
[2] SEO продвижение Search Engine Optimization
18

Сравнительный split-блок

Тип: блок аргументации

Слева позиционирование, справа конкретные шаги или критерии.

#сравнение #аргументация #левая_правая_колонка

Классы: .diff-grid .diff-left .diff-ours-box

[05] Что вы получаете

Это не лицензия.
Это совместный запуск
вашего IT-продукта.

ПРОЦЕСС:

01. Моделирование ниши и структуры системы

02. Конфигурация объектов, ролей, прав доступа

03. Настройка документов и автоматизации

04. Подключение интеграций

ТИП E

Продажа и завершение

Блоки, которые закрывают смысл и переводят пользователя в действие.

19

Каталожная карточка услуги (детальная)

Тип: карточка каталога услуг

Подходит для модульного каталога: когда применять, состав работ, формат результата, CTA.

#каталог_услуг #детальная_карточка #cta #формат_результата

Классы: .marketing-service-card .mkt-element-row .marketing-card-btn

[03]

Конкурентный анализ

КОГДА ПРИМЕНЯТЬ

Перед выходом на рынок, чтобы выявить слабые места и возможности среди конкурентов.

03.1Матрица конкурентов
03.2SWOT-анализ
03.3Benchmark по ключевым метрикам
03.4Gap-анализ
ФОРМАТ

Таблица-дашборд + презентация + рекомендации

Заказать анализ конкурентов →
27

Пара карточек каталога маркетинга

Тип: ровный блочный каталог

Две равные карточки услуги в сетке 2 колонки с одинаковой структурой: когда применять, состав, формат, CTA.

#маркетинг #каталог_услуг #ровные_карточки #2_колонки

Классы: .marketing-catalog-grid .marketing-service-card .mkt-element-row

[01]

Анализ рынка

КОГДА ПРИМЕНЯТЬ

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

01.1Объём и динамика рынка
01.25 сил Портера
01.3PESTEL-анализ
ФОРМАТ

Аналитический отчёт + таблицы данных + презентация

Заказать анализ рынка →
[02]

Анализ целевой аудитории

КОГДА ПРИМЕНЯТЬ

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

02.1Сегментация: демография, психография, поведение
02.2Создание персон пользователей
02.3Мотивы, барьеры, триггеры
ФОРМАТ

Аналитический отчёт + портреты персон + таблицы

Заказать анализ аудитории →
28

Форматы сотрудничества (асимметричная сетка)

Тип: мощный асимметричный блок

Крупный заголовок и 4 карточки разных пропорций для упаковки уровней сотрудничества.

#форматы_сотрудничества #асимметрия #карточки #маркетинг

Классы: .marketing-formats-grid .marketing-format-card .process-flow-num

[04] Форматы сотрудничества

От разовой услуги до полного стратегического цикла

01

Разовая услуга

02

Пакет (2-3 модуля)

03

Полный стратегический цикл

04

Долгосрочное сопровождение

20

Финальный CTA-блок

Тип: конверсионный финал

Крупный завершающий тезис и кнопка действия для завершения страницы.

#финальный_блок #призыв_к_действию #конверсия

Классы: .service-detail-cta .service-detail-title .service-cta-btn-large

SEO, которое превращается в продажи

Каждый месяц откладывания — это упущенные десятки и сотни продаж.

ОСТАВИТЬ ЗАЯВКУ НА АУДИТ САЙТА →

ТИП F

Крупная героическая типографика

Набор больших заголовков и числовых акцентов для первого визуального удара.

23

Сверхкрупный брендовый заголовок

Тип: главный титульный шрифт

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

#крупный_шрифт #бренд #первый_экран #hero

Классы: .home-title .title-line

M E G A L O D O N

Вариант для самого верхнего hero-блока.

24

Двухстрочный героический заголовок услуги

Тип: заголовок продуктового hero

Комбинация основного текста и акцентной второй строки для продуктовых страниц.

#hero_услуги #крупный_заголовок #акцентная_строка

Классы: .service-hero-title .hero-line .hero-line-accent

ИИ сотрудники новая рабочая сила

Вариант для сервисных и продуктовых экранов.

25

Крупные числовые акценты

Тип: акцентная числовая типографика

Большие цифры для этапов, метрик и визуальных якорей внутри секций.

#большие_цифры #метрики #акценты #нумерация

Классы: .stat-big .process-flow-num .quality-card-num

24/7 05 03

Используйте для визуального ритма и усиления ключевых показателей.

30

Текстовый акцент на белом фоне

Тип: текстовый компонент

Крупная фраза на светлом фоне для сильного смыслового акцента между этапами.

#белый_фон #текстовый_акцент #seo #разделитель_смысла

Классы: .when-conclusion .conclusion-text

Каждый месяц откладывания - это целый месяц упущенных десятков и сотен продаж.

37

Бегущая строка hero-раздела

Тип: текстовый декоративный компонент

Широкая бегущая строка для первого экрана и крупных брендовых секций.

#бегущая_строка #hero #текстовый_ритм #бренд

Классы: .marquee-container .home-marquee-track .home-marquee-text

ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ • ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ • ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ •
38

Бегущая строка для разделителей

Тип: текстовый декоративный компонент

Универсальная строка-разделитель для кейсов, анонсов и переходов между блоками.

#marquee #разделитель #анонс #текстовый_компонент

Классы: .marquee-container .marquee-track .marquee-text

MORE PROJECTS COMING SOON • MORE PROJECTS COMING SOON • MORE PROJECTS COMING SOON •
39

Hero-бегущая строка из главной

Тип: текстовый компонент F11

Точная копия бегущей строки из `index.html` для библиотеки текстовых компонентов.

#hero #marquee #index #текстовый_компонент

Классы: .marquee-container .home-marquee-track .home-marquee-text

ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ • ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ • ИИ АГЕНТЫ / АЙТИ УСЛУГИ — ВАШЕМУ БИЗНЕСУ •

ТИП G

Декоративные компоненты

Визуальные и интерактивные декоративные элементы, которые усиливают подачу экрана.

29

Панель визуальных контролов (слайдеры)

Тип: декоративный интерактивный элемент

Панель слайдеров для настройки атмосферы экрана: сетка, контраст и яркость изображения.

#декоративный #слайдеры #контролы #визуальная_настройка

Классы: .hero-controls .control-group .control-slider