Rocketmind Design System

Сквозные блоки

Блоки, которые появляются на нескольких страницах: лендинг, авторизация, main app. Их стиль должен быть абсолютно единым — один компонент, ноль дублирования.

Header — Фиксированная шапка

Фиксированная шапка для всех страниц. На главной скрыта, появляется при скролле за 50% viewport. На внутренних — видна сразу. Логотип слева, RocketmindMenu справа (desktop),MobileNav бургер (mobile).

Поведение

Контекст	Поведение
Главная	Скрыта. Появляется (translate-y + opacity) при скролле за 50vh. fixed top-0, z-50, h-16
Внутренние	Всегда видна. Тот же стиль: fixed top-0, bg-background, border-b
Desktop (≥768px)	text_logo слева + RocketmindMenu (с dropdown) справа
Mobile (<768px)	text_logo + MobileNav бургер (ml-auto). Меню скрыто

Токены

Свойство	Значение
Позиция	fixed top-0 left-0 right-0, z-50
Высота	h-16 (64px)
Фон	bg-background, border-b border-border
Контейнер	max-w-[1512px] mx-auto, px-5 md:px-8 xl:px-14
Логотип	text_logo_dark_background_en.svg, w-[120px] md:w-[144px]
Навигация	RocketmindMenu: 18px (!text-[18px]), ml-auto justify-end gap-5 lg:gap-7
Анимация	transition-all duration-300, translate-y + opacity
Скрыто	-translate-y-full opacity-0 pointer-events-none

Компоненты навигации

RocketmindMenu — общий компонент для fixed-шапки и hero. Разделяет пункты на dropdown (Radix NavigationMenu) и plain-ссылки (отдельный <nav>). Viewport привязан к правому краю последнего dropdown-триггера (AI-продукты).

Prop	Тип	Описание
`className`	`string`	Классы обёртки (layout, gap, justify)
`itemClassName`	`string`	Классы триггеров (размер шрифта)
`showDropdowns`	`boolean`	false → все пункты как plain-ссылки

MobileNav — полноэкранное меню (clip-path circle). Белый фон, accordion-секции, stagger-анимация. Portal → document.body, z-[55]. Бургер: 2 бара w-[40px], трансформируется в X, z-[60].

// apps/site/src/components/sections/

Header.tsx → RocketmindMenu + MobileNav

RocketmindMenu.tsx → Radix NavigationMenu + plain links

MobileNav.tsx → clip-path circle + accordions

Dropdown

Свойство	Значение
Viewport	[&>div]:right-0 [&>div]:left-auto — привязан к правому краю (до AI-продукты)
Ширина	>4 items → w-[680px] grid-cols-3, ≤4 → w-[420px] grid-cols-2
Hover	hover:opacity-[0.88], data-[state=open]:opacity-[0.88]
Клик	onClick → router.push(item.href) — навигация на разводящую страницу

Навигационные данные (site-nav.ts)

Группа	Тип	href	Подпункты
Консалтинг и стратегии	`Dropdown (8)`	`/consulting`	Экосистемная стратегия, Цифровая платформа, Умная аналитика, Готовность команды, Стратегические сессии, Дизайн-спринты, Резидент Сколково, Готовность бизнеса
Онлайн-школа	`Dropdown (2)`	`/academy`	Бизнес-дизайн для команд, Бизнес-дизайн. Быстрый старт
AI-продукты	`Dropdown (2)`	`/ai-products`	Тестирование гипотез, Моделирование бизнеса
О Rocketmind	`Link`	`/about`	—
Медиа	`Link`	`/media`	—

MobileNav — Мобильное меню

Полноэкранное меню с круговой анимацией (clip-path circle). Белый фон, чёрный текст, accordion-секции. Нажмите бургер, чтобы увидеть.

Нажмите бургер →

Параметры MobileNav

Параметр	Значение
Бургер	2 бара, w-[40px] h-[10px], h-[2px] каждый. Трансформируется в X
Открытие	clip-path: circle() из центра бургера → 2000px, 0.75s
Закрытие	circle(2000px) → circle(0), 0.65s
Фон	bg-white (#FFF), fixed inset-0, z-[55]
Пункты	font-mono 22px font-light, uppercase, text-black
Accordion	height: 0 → auto, opacity: 0 → 1, stagger 0.07s
Escape	Закрывает по Escape
z-index	Панель z-[55], бургер z-[60]

Hero Header (доп. вариант)

Навигация внутри hero-секции главной. Не отдельная шапка — часть hero-контента. Desktop: RocketmindMenu прижат вправо (20px шрифт, gap-x-7), рядом статистика и бургер. Mobile: только MobileNav, меню скрыто. Появляется с motion fadeUp.

Параметр	Hero Header	Fixed Header
Позиция	Inline, часть hero	fixed top-0
Фон	Прозрачный	bg-background
Шрифт	20px	18px
Логотип	Большой wordmark hero	text_logo 144px
Видимость	До скролла	После скролла 50vh
Анимация	motion fadeUp	translate-y

Footer — Футер

Единый футер для всех страниц. Логотип с дескриптором, 4-колоночная навигация (2 на мобайле), юридические ссылки, копирайт. Данные из site-nav.ts.

Токены футера

Свойство	Значение
Фон	bg-background, border-t border-border
Контейнер	max-w-[1512px] mx-auto, px-5 md:px-8 xl:px-14, py-12 md:py-16
Логотип	with_descriptor_dark_background_en.svg, h-14
Сетка	grid-cols-2 gap-8 md:grid-cols-4 md:gap-12
Заголовок	font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground/50
Ссылка	text-[14px] leading-[1.5] text-muted-foreground hover:text-foreground
Копирайт	text-[13px] text-muted-foreground/50. Desktop: в 1-й колонке. Mobile: под сеткой
Данные	CONSULTING_SERVICES, ACADEMY_COURSES, AI_PRODUCTS, LEGAL_LINKS из site-nav.ts

Структура

// apps/site/src/components/sections/Footer.tsx

import { Footer } from "@/components/sections/Footer";

InfiniteLogoMarquee

Бесконечная бегущая строка логотипов партнёров / клиентов. CSS-анимация (не JS), fade по краям через mask-image. Компонент из @rocketmind/ui.

Props

Prop	Тип	По умолчанию	Описание
`logos`	`LogoMarqueeItem[]`	`—`	Массив { alt, src, width?, height? }
`speedSeconds`	`number`	`25`	Длительность цикла
`gap`	`number`	`67`	Расстояние между логотипами (px)
`maxLogoHeight`	`number`	`39`	Макс. высота логотипа (px)
`fadeWidth`	`number`	`44`	Ширина fade-маски по краям (px)
`reverse`	`boolean`	`false`	Направление: true → слева направо

import { InfiniteLogoMarquee } from "@rocketmind/ui";

Сквозная плашка cookie. Фиксируется снизу слева, появляется один раз при первом визите (выбор хранится в cookie rm_cookie_consent). Поверхность — popover (flat, без тени), радиус rounded-lg, кнопки из DS-Button. Компонент из @rocketmind/ui.