northyard-residences-shadcn/AGENTS.md

AGENTS.md

Northyard Residences — premium real-estate шаблон девелопера: сохраняй светлую каменную палитру, bento-сетки, планировки, каталог квартир и sticky сценарий заявки/ипотеки.

Project Specifics

• Квартиры, локация, amenities и этапы покупки описаны в src/entities/site-content.ts.
• src/app — только маршруты; композиция каждой страницы живёт в отдельном widget (src/widgets/<page>-page.tsx). См. File Map.
• Mock-калькуляторы держи в src/features/*/ui; не подключай реальные банки, CRM, карты или формы отправки без запроса.
• Не превращай шаблон в общий лендинг: каждая страница должна отвечать на конкретный вопрос покупателя недвижимости.
• Проверка после правок: pnpm lint и pnpm build.

Design System

Источник токенов — src/app/globals.css (@theme inline + :root/.dark). Шрифт — Noto Sans (--font-northyard), один гарнитур на весь UI, с включёнными OpenType-фичами ss01/cv01 на body. Работай через семантические классы Tailwind (bg-primary, text-foreground, border-border, text-muted-foreground), никогда не хардкодь hex/oklch.

Личность: тёплый «каменный» premium real-estate — палитра построена на тёплых бежево-песочных оттенках (hue ~83–90), почти без насыщенности. Фон — тёплый камень/песок, primary — глубокий тёмно-коричнево-серый «графит» (НЕ синий и НЕ чёрный), secondary и accent — приглушённый шалфейно-зелёный (hue ~120–128). Тон спокойный, дорогой, архитектурный: воздух, светлые карточки, тонкие линии.

Роль	Light	Характер
background	тёплый светлый камень/песок	основной фон страниц
foreground	тёмный тёплый графит	текст
primary	глубокий графит (тёплый)	бренд: лого-плашка, CTA-кнопки, числа, акцент линий планировок
secondary	приглушённый светлый шалфей	бейджи, мягкие плашки (bg-secondary text-foreground)
accent / ring	шалфейно-зелёный	hover/focus-кольца, точечные акценты
muted / muted-foreground	светлый песок / тёплый серо-бежевый	вторичный текст, подписи, hover-фон строк
card	почти белый тёплый	карточки, таблицы, sticky-панели на каменном фоне
border	тёплый бежевый	тонкие границы (1px) повсюду

Узнаваемые приёмы (держи их — это «лицо» шаблона):

• Мягкие углы: --radius = 0.5rem; карточки и панели rounded-lg, мелкие плашки rounded-md, лого-иконка rounded-full.
• Тонкие тёплые границы: border (1px) на каждой карточке/строке; структура держится на линиях, а не на тенях.
• Bento-сетки: крупные grid с асимметричными колонками (lg:grid-cols-[1.1fr_0.9fr], [1fr_380px], sticky правая колонка lg:sticky lg:top-24).
• Каменные фоны секций: утилита .northyard-stone (тёплый radial+linear градиент песок/шалфей) для hero и contacts.
• Планировочная сетка: утилита .floor-grid (32px графитовая сетка-миллиметровка) для floor plan и карты локации; зоны планировки — border-2 border-primary/*.
• Типографика: крупные font-semibold заголовки (text-5xl…text-7xl, плотный leading-[0.98]), мягкие eyebrow-бейджи variant="outline".

Do / Don't:

• Do: держи тёплую каменную палитру и шалфейный акцент; используй bento-сетки, light-карточки, sticky-панель заявки/ипотеки; продавай ежедневный сценарий покупателя (планировка, маршруты, сервис).
• Don't: не вводи холодный синий/чёрный primary, насыщенные или неоновые цвета, тяжёлые тени, острые rounded-none углы или generic SaaS-hero с градиентом — это ломает дорогой архитектурный тон.

File Map

Route	Widget
/	src/widgets/home-page.tsx (HomePage)
/apartments	src/widgets/apartments-page.tsx (ApartmentsPage)
/apartments/a-1204	src/widgets/apartment-detail-page.tsx (ApartmentDetailPage)
/location	src/widgets/location-page.tsx (LocationPage)
/amenities	src/widgets/amenities-page.tsx (AmenitiesPage)
/purchase	src/widgets/purchase-page.tsx (PurchasePage)
/contacts	src/widgets/contacts-page.tsx (ContactsPage)

Переиспользуемые блоки:

• src/widgets/site-shell.tsx — SiteShell (header + nav, обёртка всех страниц).
• src/widgets/apartment-rows.tsx — ApartmentRows (Home, Apartments; рендерит apartments).
• src/shared/ui/section-header.tsx — SectionHeader (заголовок секций: Home, Apartments, Location, Amenities, Purchase).
• src/features/mortgage-calculator/ui/mortgage-calculator.tsx — MortgageCalculator (mock-калькулятор: Home, Purchase).

Одноразовые блоки колоцированы со своей страницей: FloorPlanCard (план квартиры) живёт внутри src/widgets/apartment-detail-page.tsx.