4.0 KiB
4.0 KiB
AGENTS.md
Универсальный одностраничный лендинг-шаблон (shadcn + Payload-ready) для любого продукта/бизнеса. Композиция секций собрана в src/app/page.tsx; каждая секция — отдельный widget.
Project Specifics
src/app/page.tsx— только композиция:Header+ секции в<main>+Footer. Не превращай его в монолит, добавляй/убирай секции, а не код блоков.- Каждая секция лендинга — самостоятельный widget в
src/widgets/*-section.tsx; правь нужную секцию точечно. - Базовые UI-примитивы shadcn — в
src/shared/ui/*(vendored, не переписывай). - Проверка после правок:
pnpm lintиpnpm build.
Design System
Источник токенов — src/app/globals.css (@theme + :root/.dark). Шрифт — Roboto Flex (--font-roboto-flex). Работай через семантические классы Tailwind (bg-primary, text-muted-foreground, border), не хардкодь hex/oklch.
Важно — это нейтральная база. Токены сейчас grayscale (монохром, --radius 0.625rem) — дефолтная shadcn-тема без характера. Это значит главный риск шаблона — дженерик «AI-лендинг», который выглядит как все остальные. Поэтому:
- Сначала задай направление. Под конкретный продукт выбери осознанную эстетику и зашей её в токены
globals.css(--primary,--secondary,--accent,--radius, типографику) — а не точечными классами по секциям. Тогда все секции автоматически становятся on-brand. - Расширяй личность, а не сбрасывай в дефолт. Если у проекта уже задан характер — держи его консистентно во всех секциях.
| Роль | База (neutral) | Назначение |
|---|---|---|
background / foreground |
white / near-black | фон и текст |
primary |
near-black | основные CTA, акценты |
secondary / muted |
light gray | вторичные поверхности, приглушённый текст |
accent |
light gray | подсветки (задай ярче под бренд) |
border / ring |
gray | границы, фокус |
Do / Don't:
- Do: определять тему через токены; держать единый ритм отступов/типографики между секциями; контент-first (оффер, доказательства, цена).
- Don't: оставлять монохром-дефолт «как есть» под реальный продукт; хардкодить цвета мимо токенов; стакать секции без выбранного направления — это и есть «одинаковый AI-лендинг».
File Map
Композиция: src/app/page.tsx → Header + секции + Footer.
| Блок | Widget |
|---|---|
| Шапка | src/widgets/header.tsx |
| Hero | src/widgets/hero-section.tsx |
| Features | src/widgets/features-section.tsx |
| Stats | src/widgets/stats-section.tsx |
| How it works | src/widgets/how-it-works-section.tsx |
| Comparison | src/widgets/comparison-section.tsx |
| Gallery | src/widgets/gallery-section.tsx |
| Social proof | src/widgets/social-proof-section.tsx |
| Team | src/widgets/team-section.tsx |
| Pricing | src/widgets/pricing-section.tsx |
| FAQ | src/widgets/faq-section.tsx |
| CTA | src/widgets/cta-section.tsx |
| Footer | src/widgets/footer.tsx |