AIST.tech DS / Patterns / Marketing Sections

Маркетинговые секции.

Шесть готовых блоков, из которых собирается лендинг. Каждая — законченная единица смысла: Hero ставит тезис, Problems называет боль, Approach отвечает «как», Features раскрывает технологии, Metrics доказывает работу в продакшене, CTA закрывает.

01. Hero

Первый экран. Один заголовок-тезис в две строки, подзаголовок 1–2 предложения, две CTA (primary + ghost), ниже — тонкая полоса доверия: клиенты или технологические партнёры. Никаких иллюстраций — типографика несёт вес.

Heading4.25rem, weight 800, max 18ch. Акцент через color: primary.

Subhead1.1875rem, muted-foreground, max 60ch.

CTAsPrimary + ghost. Не три. Иерархия важна.

Trust stripCaps label «РАБОТАЕМ С» + 4–5 имён. Над фолдом, ниже CTA.

— hero-1: тезис + 2 CTA + trust strip

Встраиваем ИИ в бизнес.

От стратегии до продакшена: помогаем компаниям внедрять ИИ осознанно — обучаем команды, проектируем и запускаем системы.

Обсудить проект → Наши продукты

Работаем с AnthropicOpenAIYandexLangChainVercel

Когда какой вариант

Hero-default	Главная страница компании. Заголовок утверждает & ставит тезис.
Hero-product	Страница продукта. Тот же скелет, но вместо trust strip — ключевая метрика или интерфейсный mock.
Hero-case	Кейс. Заголовок — конкретный результат («Стратегия за 1 час вместо 4 недель»). Подзаголовок — контекст клиента.

02. Problems

Боль клиента до того, как он услышит решение. Узнавание — чтобы текст «попал». Без карточек, без иконок: 4 нумерованных блока 2 × 2, читающихся как манифест.

Section label«ЗНАКОМО?» — разговорный, не «ПРОБЛЕМЫ».

4 пункта в сетке 2×2Большая цифра слева, заголовок-парадокс, описание, последствие.

Heading-парадоксНе «проблема такая-то», а факт: «Купили подписки — пользуются 10%».

Consequence (красным)Italic, destructive color. То, что будет, если ничего не делать.

— problems-2×2: нумерованный список без карточек

Знакомо?

Это происходит в большинстве компаний.

Не утопия для большой четвёрки, а узнаваемая реальность.

Купили подписки на ChatGPT — пользуются 10%.

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

— Разрыв в эффективности увеличивается каждый месяц.

Каждый отдел пробует своё — системы нет.

Маркетинг генерит картинки, разработка использует Copilot, продажи — ничего.

— Бюджеты на ИИ растут, а показать результат невозможно.

Барьер не в технологиях — а в людях.

Модели и инструменты уже готовы. Команда не понимает, что автоматизировать и с чего начать.

— Лучшие специалисты уйдут туда, где есть современные инструменты.

Понимаете, что надо начинать — но окно закрывается.

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

— Через два года это минимальное условие для выживания.

03. Approach

Как мы работаем. 3–4 шага в ряд — мини-карточки с иконкой, заголовком, tagline, описанием, длительностью. Это единственное место в лендинге, где карточный паттерн оправдан — каждый шаг параллелен другим.

3–4 карточкиНе 5, не 7. Это этапы, не список.

Иконка36×36, в квадрате radius 8, цвет primary.

TaglineОдна строка, primary color — что даёт клиенту.

Duration footerМоноширинная caps в нижней границе — mono даёт ощущение точности.

— approach: 4 шага в ряд

Наш подход

Что мы делаем.

Понятные сервисы. Практические решения. Архитектурная точность.

Карта возможностей

Где ИИ даст деньги в вашем бизнесе

Аудит процессов, приоритизация возможностей, план на 12 месяцев.

2–4 недели

Усиление

Те же люди, те же системы — но быстрее

ИИ встроен в текущие процессы. Без перестройки, без хаоса.

1–3 месяца

Пересборка

Та же команда — кратно больше результата

Функция пересобрана с нуля вокруг ИИ. Кратный рост производительности.

6–12 месяцев

Обучение команд

ИИ за один день

Интенсив для управленческой команды. Демо на живых задачах вашей отрасли.

1 день

04. Features

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

Горизонтальные разделители1px var(--border). Не карточки, не тени.

Иконка 40×40В muted-квадрате radius 8. Не круг.

Heading 1.1875remНе кричит, не шепчет. Технический регистр.

Описание max 60chКонкретный пример способности, без маркетинга.

— features: список с разделителями

Технологии

На чём работают наши продукты.

Современные ИИ-технологии, упакованные в готовые решения под бизнес-задачи.

LLM-агенты с вызовом инструментов

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

Голосовой ИИ

Распознавание речи, диалог на естественном языке, синтез голоса. Реалтайм-разговор с обработкой перебиваний и эмоций.

Поиск по корпоративным данным

Векторный поиск и извлечение релевантного контекста из ваших документов и переписки с учётом прав доступа.

Сбор данных из открытых источников

Автоматический мониторинг и обогащение из соцсетей, СМИ, баз данных, сайтов и патентов.

Системные интеграции

Коннекторы к CRM, 1С, банкам, телефонии, мессенджерам, календарям и каталогам.

05. Metrics

Доказательство, что продукт работает. Три числа в ряд на тёмном фоне. Числа большие, лейблы тонкие. Это первая поверхность 4 (foreground dark) — даёт вес и паузу между блоками основного света.

3 числаНе 4 и не 6. Глаз держит 3.

Dark surfacebackground: var(--foreground), text: #FAFAFA.

Number 4rem, 800Tabular-nums не нужны — числа выровнены grid, не строкой.

Lbl muted 70%Не кричит, обслуживает.

— metrics: 3 числа на тёмном

Продакшен

Работает каждый день.

Наши системы обслуживают реальных пользователей.

1 000+

Активных пользователей

5 000+

ИИ-диалогов обработано

99.9%

Uptime сервисов

06. CTA

Закрывающий блок. Тёмный фон, прямое предложение, primary CTA. Подзаголовок — честный («скажем, если не нужно»), не продающий. Никакой формы — ссылка в Telegram, чтобы начать разговор.

— cta: dark, прямое предложение

Расскажите о вашем проекте.

Предложим решение и честно скажем, если оно не нужно.

Обсудить проект →

Ритм страницы

Сборка лендинга из этих 6 секций — это ритм трёх поверхностей: background, muted, foreground dark. Чередование даёт паузы; одинаковый фон подряд — ошибка.

Канонический порядок

Hero	background. Открывает паузой — много воздуха сверху.
Problems	background. Продолжает первый план — фокус на тексте.
Approach	muted. Сдвиг плоскости. Здесь появляются карточки.
Features	background. Возврат к тексту, список с разделителями.
Metrics	foreground dark. Контрастный акцент. Доказательство.
CTA	foreground dark. Продолжает темноту — замыкает страницу.

Вертикальные интервалы между секциями

Padding-y каждой секции — 80px на десктопе, 40px на mobile. Гэп между двумя соседними секциями = 160px (80+80). Это ритм страницы.

Между Metrics и CTA — нет границы. Обе на dark surface, padding y удваивается естественно.

Общие правила

Структура каждой секции

Section label	Caps 0.6875rem, primary. «ЗНАКОМО?», «НАШ ПОДХОД». Одно слово или фраза.
Heading	2.5rem, weight 800, max 32ch. Точка в конце — утверждение, не вопрос.
Subhead	1.0625rem, muted. Одна строка контекста — зачем эта секция.
Content	40–80 px gap до контента. Содержание — параллельные блоки, список или грид.

Do / Don't

DO Section label один на всю страницу один раз. «РЕШЕНИЯ», «ПОДХОД», «ТЕХНОЛОГИИ» — уникальны.

DON'T «О НАС» / «УСЛУГИ» / «КОНТАКТЫ». Это этикетки нав-меню, не тезисы секций.

DO Заголовок утверждает. «Работает каждый день», «Что мы делаем».

DON'T Заголовок-вопрос. «Что умеют наши продукты?» — вопросы уместны только в label («Знакомо?»).

DO Чередовать background / muted / dark. Это ритм, который держит лендинг.

DON'T Три muted-секции подряд. Граница между ними исчезнет.

DO Один CTA-блок dark в конце. Это точка страницы.

DON'T Три CTA по ходу страницы. Если CTA в каждой секции — ни один из них не работает.

Без чего НЕ делаем

Без героев-иллюстраций. Никаких 3D-объектов, AI-сгенерированных hero. Типографика несёт вес.
Без социальных квоут на главной. «Они сделали нам жизнь лучше — Иван Иванов» — на странице кейса, не на главной.
Без feature-grid с 9–12 карточками. Если возможностей много — это отдельная страница «Продукты».
Без анимаций больше fade up. Никаких parallax, никаких scroll-driven hero.

Токены секции

Section padding-y	80px / 40px (desktop / mobile)	Одинаково для всех секций
Section padding-x	56px / 24px	Внутри container 1152
Section label	0.6875rem, weight 600	caps, letter-spacing 0.1em, primary
Section heading	2.5rem, weight 800	letter-spacing −0.015em, max 32ch
Hero heading	4.25rem, weight 800	max 18ch
Section subhead	1.0625rem, muted-foreground	max 56ch, margin-bottom 40px
Grid gap	20px / 56px (compact / loose)	Approach 20, Problems 56
Surface order	bg → bg → muted → bg → dark → dark	Канонический ритм