72 lines
6.5 KiB
Markdown
72 lines
6.5 KiB
Markdown
# AGENTS.md
|
||
|
||
SignalDesk AI — B2B SaaS для поддержки; сохраняй launch-page стиль, cobalt акцент, честные SaaS-блоки, demo dashboard без реальных API и платежей.
|
||
|
||
## Project Specifics
|
||
|
||
- Source content lives in `src/entities/site-content.ts`; keep visible copy there or directly in route JSX.
|
||
- `src/app` is routing only; композиция каждой страницы живёт в отдельном widget (`src/widgets/<page>-page.tsx`). См. File Map.
|
||
- Keep cards at 8px radius or less and preserve the selected palette in `src/app/globals.css`.
|
||
- This is a static frontend template: do not add real payments, auth, persistence, external API calls, or backend contracts without an explicit product request.
|
||
- After changes run `pnpm lint` and `pnpm build`.
|
||
|
||
## Визуальные правки
|
||
|
||
- Кириллица обязательна для видимого текста и выбранных Google Fonts.
|
||
- При AI-правках сохраняйте доменные блоки этого шаблона: они отличают проект от generic landing.
|
||
|
||
## Design System
|
||
|
||
Источник токенов — `src/app/globals.css` (`@theme inline` + `:root`/`.dark`). Шрифты: заголовки (`h1/h2/h3`, `.font-display`) — **Roboto Flex** (`--font-display`), текст/UI — **Inter** (`--font-sans`); mono в теме указывает на тот же display. Работай через семантические классы Tailwind (`bg-primary`, `text-foreground`, `border-border`, `text-muted-foreground`), никогда не хардкодь hex/oklch.
|
||
|
||
Личность: **clean B2B SaaS launch-page** — почти белый фон (`oklch(0.985 0 0)`), глубокий cobalt/indigo primary как единственный фирменный цвет, бирюзовый teal accent для данных и диаграмм, мягкие нейтральные границы. Воздух, плотная сетка `max-w-[1280px]`, крупные семиболдовые заголовки. Не «громкий», а спокойный и доверительный.
|
||
|
||
| Роль | Light | Характер |
|
||
|---|---|---|
|
||
| `background` | почти белый (`oklch 0.985`) | основной фон страниц |
|
||
| `foreground` | near-black indigo-ink | текст, тёмные CTA-плашки (`bg-foreground text-background`) |
|
||
| `primary` | глубокий cobalt/indigo | бренд-акцент: лого, ссылки, активные числа, primary CTA |
|
||
| `accent` | teal/бирюза | вторые столбцы диаграмм, точечные акценты данных |
|
||
| `secondary` | холодный светло-серый | мягкие бейджи, фоновые плашки |
|
||
| `muted` / `muted-foreground` | светло-серый / серо-синий | вторичный текст, подписи |
|
||
| `card` | белый (`oklch 1`) | карточки и секции на фоне |
|
||
|
||
Узнаваемые приёмы (держи их — это «лицо» шаблона):
|
||
- **Мягкие, не острые углы:** `--radius` = 0.5rem; карточки и кнопки почти всегда `rounded-md` (8px и меньше). Не уходи в `rounded-none` или сильно скруглённые pill-формы.
|
||
- **Тонкие нейтральные границы:** `border border-border` (1px), без толстых брутализм-рамок.
|
||
- **Hero-фоны на CSS-утилитах:** `.signal-aurora` (анимированный radial-градиент cobalt/teal/lime) + `.signal-grid` (точечная сетка с mask-fade). Используй их для launch hero вместо плоского цвета. Есть также `.grainient-field`.
|
||
- **Глубокие «продуктовые» тени для dashboard-панели:** `shadow-[0_36px_100px_rgba(37,76,210,0.22)]` + `backdrop-blur-xl` на demo-панели.
|
||
- **Типографика:** `font-semibold`, крупные размеры (`text-4xl`…`text-7xl`), плотный `leading`, eyebrow-метки `text-xs font-semibold uppercase tracking-[0.16em] text-primary`.
|
||
|
||
Do / Don't:
|
||
- **Do:** держи cobalt primary единственным брендовым цветом; data/charts подсвечивай `accent`; используй eyebrow + крупный заголовок + сетку карточек; demo dashboard оставляй mock без реальных API.
|
||
- **Don't:** не добавляй второй яркий бренд-цвет, неоновые градиенты на тексте, толстые рамки, острые `rounded-none` углы или тяжёлый брутализм — это ломает спокойный SaaS-тон.
|
||
|
||
## File Map
|
||
|
||
| Route | Widget |
|
||
|---|---|
|
||
| `/` | `src/widgets/home-page.tsx` (`HomePage`) |
|
||
| `/product` | `src/widgets/product-page.tsx` (`ProductPage`) |
|
||
| `/pricing` | `src/widgets/pricing-page.tsx` (`PricingPage`) |
|
||
| `/customers` | `src/widgets/customers-page.tsx` (`CustomersPage`) |
|
||
| `/resources` | `src/widgets/resources-page.tsx` (`ResourcesPage`) |
|
||
| `/dashboard` | `src/widgets/dashboard-page.tsx` (`DashboardPage`) |
|
||
|
||
Переиспользуемые блоки:
|
||
- `src/widgets/site-shell.tsx` — `SiteHeader` + `SiteFooter` (обёртка из `src/app/layout.tsx`).
|
||
- `src/widgets/saas-dashboard.tsx` — `SaasDashboard` (Home hero, Dashboard).
|
||
- `src/widgets/issue-workflow.tsx` — `IssueWorkflow` (Home, Dashboard, Product).
|
||
- `src/widgets/integration-stack.tsx` — `IntegrationStack` (Home, Product).
|
||
- `src/widgets/metric-strip.tsx` — `MetricStrip` (Home; рендерит `highlights`).
|
||
- `src/widgets/testimonial-band.tsx` — `TestimonialBand` (Home, Customers; рендерит `testimonials`).
|
||
- `src/shared/ui/inner-hero.tsx` — `InnerHero` (хедер всех внутренних страниц).
|
||
- `src/shared/ui/featured-grid.tsx` — `FeaturedGrid` (Home, Product, Resources).
|
||
- `src/shared/ui/icon-cards.tsx` — `IconCards` (Dashboard, Product).
|
||
- `src/shared/ui/pricing-tiles.tsx` — `PricingTiles` (Pricing).
|
||
- `src/shared/ui/info-columns.tsx` — `InfoColumns` (Pricing, Resources).
|
||
- `src/shared/ui/split-story.tsx` — `SplitStory` (Home, Customers).
|
||
- `src/shared/ui/cta-panel.tsx` — `CtaPanel` (Product).
|
||
|
||
Одноразовые блоки колоцированы со своей страницей: `GrainientHero` (launch hero) живёт внутри `src/widgets/home-page.tsx`.
|