Ассеты
Логотипы, геометрические паттерны, favicon и правила их использования.
Состав каталога
Ассеты лежат в public/brand/ и доступны по абсолютным путям. Источник —
официальный набор RE Brand Assets.
| Файл | Содержимое | Применение |
|---|---|---|
logo-horizontal-ink.png | Горизонтальный логотип, темно-синий | Светлая тема |
logo-horizontal-white.png | Горизонтальный логотип, белый | Темная тема и темные панели |
logo-mark-ink.png | Знак R/E, темно-синий | Светлая тема, малые размеры |
logo-mark-white.png | Знак R/E, белый | Темная тема, малые размеры |
pattern-hero.png | Геометрический паттерн на темно-синем фоне | Фон hero-блоков |
pattern-blocks.png | Полноцветный геометрический паттерн | Акцентные панели |
app/icon.png | Знак R/E на градиенте, 512×512 | Favicon портала |
Пути к ассетам объявлены в lib/brand.ts как brandAssets — используйте
константы вместо строковых литералов.
Компонент логотипа
components/brand/logo.tsx рендерит оба цветовых варианта и переключает их через
CSS (dark:hidden / hidden dark:block). Это оставляет компонент серверным и
исключает мелькание неверного варианта при гидратации.
import { Logo } from '@/components/brand/logo';
// Полный логотип с надписью
<Logo variant="horizontal" className="h-10" priority />
// Только знак R/E
<Logo variant="mark" className="h-6" />| Свойство | Значение | Назначение |
|---|---|---|
variant | horizontal | mark | Полный логотип или только знак. По умолчанию horizontal. |
className | классы Tailwind | Задавайте только высоту (h-*) — ширина вычисляется автоматически. |
priority | boolean | true для логотипа выше первого экрана. |
Не задавайте ширину
Компонент использует w-auto object-contain. Фиксация ширины исказит пропорции
логотипа.
Паттерн в качестве фона
Готовая утилита из app/global.css:
<div className="re-pattern-panel relative overflow-hidden rounded-[2rem] p-8">
<div className="absolute inset-0 bg-gradient-to-r from-re-navy via-re-navy/95 to-re-navy/55" />
<div className="relative">{/* содержимое */}</div>
</div>Градиентный оверлей поверх паттерна обязателен: он гасит геометрию под текстом и обеспечивает читаемость. Без него паттерн конкурирует с содержимым.
Иконка продукта
components/brand/brand-icon.tsx помещает иконку Lucide в плашку с мягким
брендовым градиентом. Иконки разрешаются по той же карте имен, что использует
Fumadocs для meta.json, поэтому карточка продукта и пункт выпадающего списка
получают один и тот же глиф.
import { BookOpen } from 'lucide-react';
import { BrandIcon } from '@/components/brand/brand-icon';
<BrandIcon name="CreditCard" fallback={BookOpen} />Favicon
app/icon.png — знак R/E на фирменном градиенте, 512×512. Next.js обрабатывает
файл по соглашению App Router и подставляет нужные размеры автоматически.
Замена ассетов под другой бренд
Подготовить файлы
Нужны четыре варианта логотипа: горизонтальный и знак, каждый в темном и светлом исполнении, PNG с прозрачным фоном.
Заменить файлы в public/brand/
Сохраните имена файлов — тогда правки в коде не потребуются. При других именах
обновите brandAssets в lib/brand.ts.
Обновить favicon
Замените app/icon.png изображением 512×512.
Проверить обе темы
Логотип в навбаре, hero-блок главной страницы, подвал, страницы-заглушки.