7.8 KiB
7.8 KiB
AGENTS.md
Juniper Table — seasonal restaurant template for booking-driven dining: keep menu architecture, service windows, seating formats, allergies, pairing, private dining and host confirmation central to the experience.
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.tsx`). См. File Map.
- Keep cards at 8px radius or less and preserve the restaurant palette in `src/app/globals.css`.
- This is a static frontend template: do not add real payments, deposits, table-management API, delivery, auth, persistence, external API calls, or backend contracts without an explicit product request.
- Keep restaurant specificity: seating, service windows, host confirmation, allergies/dietary requests, pairing, supplier story and private dining packages.
- After changes run `pnpm lint` and `pnpm build`.
Visual Rules
- Кириллица обязательна для видимого текста и выбранных Google Fonts.
- Do not flatten this into a generic cafe landing page. Every page should answer a real restaurant business question.
Design System
Источник токенов — src/app/globals.css (@theme inline + :root/.dark). Шрифты: заголовки (h1/h2/h3, .font-display) — Cormorant Garamond (--font-display, элегантный serif), текст/UI — Manrope (--font-sans). Работай через семантические классы Tailwind (bg-primary, text-foreground, border-border, text-muted-foreground, font-display), никогда не хардкодь hex/oklch.
Личность: тёплый сезонный fine-dining — кремово-пергаментный фон (тёплый, hue ~75–92), глубокий приглушённый «можжевеловый» зелёный primary (hue ~145) как фирменный цвет, тёплый терракот/обожжённый оранжевый accent (hue ~34). Контраст элегантного serif-заголовка и спокойного гротеска в тексте. Тон ресторанный, тёплый, не «технологичный».
| Роль | Light | Характер |
|---|---|---|
background |
тёплый кремовый пергамент | основной фон страниц |
foreground |
тёмный тёплый коричнево-чёрный | текст |
primary |
глубокий можжевеловый зелёный | бренд: лого JT, CTA, цены, акценты; footer/CTA-панели bg-primary text-primary-foreground |
accent |
терракот/обожжённый оранжевый | редкие тёплые точечные акценты (charts) |
secondary |
тёплый светлый песочный | мягкие бейджи, плашки |
muted / muted-foreground |
тёплый бежевый / приглушённый коричневый | вторичный текст, фон секций, hover |
card |
чистый белый | панели RestaurantPanel, формы, таблицы |
border |
тёплый бежевый | тонкие границы (1px) везде |
Узнаваемые приёмы (держи их — это «лицо» шаблона):
- Мягкие углы:
--radius= 0.5rem; всё наrounded-md(карточки, кнопки, фото-панели). Не используй острыеrounded-noneили сильно скруглённые pill-формы. RestaurantPanel(src/shared/ui/restaurant-panel.tsx) — фирменная панель:rounded-md border border-border bg-card+ едва заметная тёплая теньshadow-[0_1px_0_rgba(67,44,17,0.05)]. Используй её для секционных карточек вместо гологоdiv.Container(src/shared/ui/container.tsx) —max-w-[1320px]+px-5 sm:px-8; единый горизонтальный ритм страниц.- Hero-фон: утилита
.restaurant-tablecloth(тёплая «скатерть» — зелёно-охровая сетка-льняная фактура 42px с mask-fade) для главного hero. - Serif-дисплей: заголовки через
font-display(text-4xl…text-[6.2rem], плотныйleading-[0.94]); eyebrow-меткиtext-xs font-semibold uppercase tracking-[0.18em] text-primary. - Тонкие разделители:
Separatorиborder-b border-borderв списках блюд/пакетов; структура на линиях, не на тенях.
Do / Don't:
- Do: держи кремово-зелёную палитру и терракотовый акцент; serif-заголовки + Manrope-текст; оборачивай секции в
Container/RestaurantPanel; продавай ресторанную специфику (посадка, pairing, аллергены, тайминг вечера). - Don't: не вводи холодный синий/чёрный primary, неоновые градиенты, тяжёлые drop-shadow, острые углы или generic-SaaS hero — это ломает тёплый fine-dining тон.
File Map
| Route | Widget |
|---|---|
/ |
src/widgets/home-page.tsx (HomePage) |
/menu |
src/widgets/menu-page.tsx (MenuPage) |
/reservations |
src/widgets/reservations-page.tsx (ReservationsPage) |
/private-events |
src/widgets/private-events-page.tsx (PrivateEventsPage) |
/about |
src/widgets/about-page.tsx (AboutPage) |
/contact |
src/widgets/contact-page.tsx (ContactPage) |
Переиспользуемые блоки:
src/widgets/site-shell.tsx—SiteHeader+SiteFooter(обёртка изsrc/app/layout.tsx).src/widgets/menu-section-board.tsx—MenuSectionBoard(Home, Menu).src/widgets/dish-showcase.tsx—DishShowcase(Home, Menu; локальныйDishRowвнутри).src/widgets/seating-guide.tsx—SeatingGuide(Home, Reservations).src/widgets/restaurant-evening-plan.tsx—RestaurantEveningPlan(Home, Reservations).src/widgets/private-events-grid.tsx—PrivateEventsGrid(Home, Private events).src/widgets/testimonial-band.tsx—TestimonialBand(Home, About).src/shared/ui/container.tsx—Container(горизонтальный wrapper всех секций).src/shared/ui/restaurant-panel.tsx—RestaurantPanel(фирменная карточка-панель).src/shared/ui/section-header.tsx—SectionHeader(eyebrow + заголовок секции).src/shared/ui/inner-hero.tsx—InnerHero(хедер всех внутренних страниц).src/shared/ui/info-columns.tsx—InfoColumns(правила/dietary notes; используется в Menu и Reservations).src/shared/ui/cta-panel.tsx—CtaPanel(Menu, Private events).src/shared/ui/split-story.tsx—SplitStory(готовый props-блок image+points, сейчас не подключён ни одной страницей).
Одноразовые блоки колоцированы со своей страницей:
PageHero— внутриhome-page.tsx.FeaturedGrid,PairingBoard(+WineIcon),PricingTiles,DietaryNotes— внутриmenu-page.tsx.ReservationForm,ReservationRules— внутриreservations-page.tsx.ChefStory,SupplierLedger,MetricStrip— внутриabout-page.tsx.IconCards,HoursBoard,ContactForm— внутриcontact-page.tsx.EventPlanner— внутриprivate-events-page.tsx.