volthouse-energy-shadcn/AGENTS.md

AGENTS.md

Volthouse Energy — technical blueprint шаблон инженерной энергокомпании: сохраняй темную grid-среду, жесткие data panels, язык мощности/тепла/резерва и доказательную продажу через расчеты, кейсы и SLA.

Project Specifics

• Решения, проекты, сервис, financing, процесс и документы отчета описаны в src/entities/site-content.ts.
• src/app — только route wrappers; композиция каждой страницы живёт в отдельном widget (src/widgets/<page>-page.tsx). Header/footer-обёртка — src/widgets/site-shell.tsx (SiteShell). См. File Map.
• Mock-калькуляторы держи в src/features/*/ui; не подключай реальные тарифы, счетчики, CRM или API без запроса.
• Не превращай шаблон в generic clean-tech лендинг: каждая страница должна говорить языком объекта, пиков, теплопотерь, критичных линий, CAPEX/OPEX и сервисной ответственности.
• Не добавляй декоративные абстрактные волны/градиентные пятна; визуальная система должна выглядеть как инженерная диспетчерская и проектная документация.
• Проверка после правок: pnpm lint и pnpm build.

Design System

Источник токенов — src/app/globals.css (@theme inline + :root/.dark). Шрифт — Roboto Flex (--font-volthouse), один гарнитур на sans и mono, с font-feature-settings: "ss01" "cv01" "tnum" (табличные цифры — это инженерный код данных). Работай через семантические классы Tailwind (bg-primary, text-muted-foreground, border-primary/25), не хардкодь hex/oklch.

Личность: dark engineering blueprint / диспетчерская — глубокий сине-стальной фон (тёмный, low-chroma blue), янтарный primary (oklch 0.82 0.16 78) как «питание под напряжением», бирюзовый accent (oklch 0.76 0.118 177) для метрик экономии/результата, тёплый кремовый текст. Это шаблон по умолчанию ТЁМНЫЙ (:root уже тёмная) — светлой темы как основного режима нет.

Роль	Значение	Характер
background	тёмный сине-стальной (0.13)	фон-диспетчерская + grid-overlay в body
foreground	тёплый кремовый (0.95)	основной текст
primary	янтарный	«под напряжением»: бейджи, иконки-плашки, метрики, CTA, border-primary/*
accent	бирюзовый	результат/экономия: deliverable-блоки, OPEX, итоги (bg-accent/10 text-accent)
secondary	приглушённый стальной	вторичные плашки
muted	тёмно-серо-синий / fg 0.73	подписи, описания
card	чуть светлее фона (0.18)	панели и карточки
border	стальной (0.36)	границы, чаще как border-primary/25

Узнаваемые приёмы (держи их, это и есть «лицо» проекта):

• Острые углы: --radius = 0.25rem; панели и карточки фактически прямоугольные — это техническая документация, а не мягкий SaaS.
• Полупрозрачные янтарные границы: border border-primary/25 (и /20, /35, /40) повсюду — структура диспетчерской.
• Grid-фактуры: .volt-grid — миллиметровка под hero/section-header, .volt-panel — двухслойная сетка + угловой glow для data-панелей; сам body тоже несёт grid-overlay 72px.
• Glow вместо тени: shadow-[0_0_60px_oklch(0.82_0.16_78_/_0.1)] — мягкое янтарное свечение панели, не drop-shadow.
• Типографика: заголовки — font-semibold uppercase leading-none, очень крупные (text-6xl/text-7xl); цифры-метрики крупным text-primary/text-accent.
• Цветовое кодирование: янтарь = вход/мощность/действие, бирюза = выход/экономия/результат. Не смешивай роли.
• Фото: всегда object-cover grayscale + градиент from-background снизу — снимок встроен в тёмную среду.

Do / Don't:

• Do: держи тёмную grid-среду, острые data-панели, янтарь/бирюзу по ролям, табличные цифры, доказательную подачу (мощность, CAPEX/OPEX, SLA).
• Don't: светлый фон, скруглённые карточки, drop-shadow вместо glow, пастель/градиентные пятна, generic clean-tech hero — это ломает инженерную личность.

File Map

Route	Widget
/	src/widgets/home-page.tsx (HomePage)
/solutions	src/widgets/solutions-page.tsx (SolutionsPage)
/calculator	src/widgets/calculator-page.tsx (CalculatorPage)
/projects	src/widgets/projects-page.tsx (ProjectsPage)
/maintenance	src/widgets/maintenance-page.tsx (MaintenancePage)
/financing	src/widgets/financing-page.tsx (FinancingPage)
/contacts	src/widgets/contacts-page.tsx (ContactsPage)

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

• src/widgets/site-shell.tsx — SiteShell (header + nav + footer, обёртка всех страниц).
• src/shared/ui/section-header.tsx — SectionHeader (заголовочная секция внутренних страниц: Solutions, Calculator, Projects, Maintenance, Financing, Contacts).
• src/features/energy-calculator/ui/energy-calculator.tsx — EnergyCalculator (mock-калькулятор, Calculator).

Одноразовые блоки колоцированы со своей страницей: MetricStrip/EnergyBoard/SystemNode/StackCard/ProcessRail в home-page.tsx, ContactStat в contacts-page.tsx.