70 lines
6.5 KiB
Markdown
70 lines
6.5 KiB
Markdown
# AGENTS.md
|
||
|
||
Шаблон Monochrome Supply — premium fashion e-commerce; сохраняй product-first минимализм, строгую сетку, реальные commerce-секции и понятные состояния выбора размера/цвета.
|
||
|
||
## Project Specifics
|
||
|
||
- Source content lives in `src/entities/site-content.ts`; keep visible copy there or directly in route JSX.
|
||
- `src/app` — только route wrappers; композиция каждой страницы живёт в отдельном widget (`src/widgets/<page>-page.tsx`). Header/footer — в `src/widgets/site-shell.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`). Шрифты: заголовки и `.font-display` — **Montserrat** (`--font-display`), body — **Inter** (`--font-sans`); mono замаплен на тот же display. Работай через семантические классы Tailwind (`bg-foreground`, `text-muted-foreground`, `border-border`), не хардкодь hex/oklch.
|
||
|
||
Личность: **premium monochrome fashion** — почти бесцветная ахроматическая палитра (всё в нейтральных серых, `chroma ≈ 0`), near-black «ink» как контраст, и единственный тёплый янтарный `accent` (oklch 0.72 0.16 71) для редких акцентов. Фотографии сознательно `grayscale` и расцвечиваются (`group-hover:grayscale-0`) только при наведении — это ключевой приём бренда.
|
||
|
||
| Роль | Light | Характер |
|
||
|---|---|---|
|
||
| `background` | почти белый neutral (0.985) | основной фон страниц |
|
||
| `foreground` | near-black ink (0.13) | текст + инверсный CTA/footer (`bg-foreground text-background`) |
|
||
| `primary` | near-black ink | логотип-плашка, primary-кнопки |
|
||
| `secondary` | светло-серый (0.94) | бейджи, теги товаров |
|
||
| `accent` | тёплый янтарь | редкий точечный акцент (по умолчанию почти не используется) |
|
||
| `muted` | серый (0.955 / fg 0.48) | фон image-плейсхолдеров, вторичный текст |
|
||
| `card` | чистый белый (1.0) | карточки на фоне 0.985 |
|
||
| `border` | мягкий серый (0.86) | тонкие границы (`border border-border`, НЕ толстые) |
|
||
|
||
Узнаваемые приёмы (держи их, это и есть «лицо» проекта):
|
||
- **Мягкие углы:** `--radius` = 0.375rem; почти всё — `rounded-md`. Никаких острых или сильно скруглённых форм.
|
||
- **Тонкие границы:** `border border-border` (1px), не толстые brutalist-рамки.
|
||
- **Grayscale → color на hover:** фото идут `object-cover grayscale`, при наведении карточки — `transition group-hover:grayscale-0` (+ лёгкий `group-hover:scale-[1.03]`).
|
||
- **Hover-lift с мягкой тенью:** `hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(0,0,0,0.09)]` — приподнятая карточка вместо жёсткого offset-shadow.
|
||
- **Типографика:** `font-semibold` (не black), очень крупные плотные заголовки (`text-7xl`+, `leading-[0.94]`), eyebrow — `uppercase tracking-[0.16em] text-muted-foreground`.
|
||
- **Инверсные блоки:** акцентные секции (footer, CTA, средняя карточка lookbook) — `bg-foreground text-background` с `text-background/70` для вторичного текста.
|
||
- **Фон-фактура:** `.fashion-fabric` — тонкая тканевая сетка для hero; фиксированная max-ширина контента `max-w-[1320px]`.
|
||
|
||
Do / Don't:
|
||
- **Do:** держи ахроматическую палитру, тонкие границы, grayscale-фото, product-first сетки, крупную сдержанную типографику.
|
||
- **Don't:** яркие цвета/градиенты, толстые рамки, жёсткие offset-тени, `rounded-none` или `rounded-full` на карточках, `font-black` — это ломает premium-минимализм.
|
||
|
||
## File Map
|
||
|
||
| Route | Widget |
|
||
|---|---|
|
||
| `/` | `src/widgets/home-page.tsx` (`HomePage`) |
|
||
| `/catalog` | `src/widgets/catalog-page.tsx` (`CatalogPage`) |
|
||
| `/product/classic-overshirt` | `src/widgets/product-detail-page.tsx` (`ProductDetailPage`) |
|
||
| `/lookbook` | `src/widgets/lookbook-page.tsx` (`LookbookPage`) |
|
||
| `/cart` | `src/widgets/cart-page.tsx` (`CartPage`) |
|
||
| `/shipping` | `src/widgets/shipping-page.tsx` (`ShippingPage`) |
|
||
|
||
Переиспользуемые блоки:
|
||
- `src/widgets/site-shell.tsx` — `SiteHeader` + `SiteFooter` (обёртка всех страниц через `app/layout.tsx`).
|
||
- `src/widgets/featured-grid.tsx` — `FeaturedGrid` (Home, Catalog).
|
||
- `src/widgets/collection-board.tsx` — `CollectionBoard` (Home, Lookbook).
|
||
- `src/widgets/product-assurance.tsx` — `ProductAssurance` (Home, Product).
|
||
- `src/shared/ui/inner-hero.tsx` — `InnerHero` (заголовочная секция внутренних страниц).
|
||
- `src/shared/ui/icon-cards.tsx` — `IconCards` (Shipping, Product).
|
||
- `src/shared/ui/info-columns.tsx` — `InfoColumns` (Shipping, Cart).
|
||
- `src/shared/ui/split-story.tsx` — `SplitStory` (Home, Lookbook).
|
||
|
||
Одноразовые блоки колоцированы со своей страницей: `PageHero`/`MetricStrip`/`TestimonialBand` в `home-page.tsx`, `CatalogToolbar`/`PricingTiles` в `catalog-page.tsx`, `LookbookGrid` в `lookbook-page.tsx`, `CartPreview` в `cart-page.tsx`, `ProductDetail`/`OptionRow`/`CtaPanel` в `product-detail-page.tsx`.
|