kmtnflower/.claude/CLAUDE.md

CLAUDE.md — KMountain Flower Radio Station

Project overview

This is a standalone-component Angular 21 app for a community radio station website. It renders a hero page, about page, broadcast schedule, donation tiers, upcoming events, and a contact form — all styled with a warm mountain/nature color palette (blue primary + orange accent on cream).

Code style

• Components: Standalone only (no NgModules). Every component is a single file with @Component decorator, imports array, and the four standard files (.ts, .html, .scss, component).
• Data patterns: Page content lives as readonly arrays with interfaces defined in the same file. Never put content in services or APIs — this is a static site.
• SCSS: All design tokens go in src/styles/_variables.scss. Mixins in _mixins.scss. CSS custom properties exposed in _themes.scss. Components import via @use 'variables' (no relative path needed).
• Routes: Defined in src/app/app.routes.ts using loadComponent() lazy loading. Add new pages here after creating the component.
• TypeScript: Strict mode enabled. Use readonly for data arrays. No unnecessary interfaces — keep data shapes close to their components.

Architecture

See README.md for a full architecture map. Key files:

• src/app/app.routes.ts — all routing
• src/styles/_variables.scss — color palette, spacing, breakpoints (change these to re-skin)
• src/styles/_mixins.scss — card-style, button-style, responsive, gradient-text, flowery-border, fade-in
• src/styles/_themes.scss — SCSS → CSS custom property mapping

Common tasks

• Re-skin: Edit colors in _variables.scss only.
• Add a page: Create component folder → add route in app.routes.ts → add nav link (if needed).
• Update content: Edit the readonly array in the relevant component file (schedule.component.ts, events.component.ts, donate.component.ts).
• Run the app: ng serve → localhost:4200.
• Build: ng build → dist/.