# S02 Research — About Page

## Summary

Static informational page at `/about` explaining what Chrysopedia is, how content is extracted, and who maintains it. No backend work. Three changes: new page component, new route in App.tsx, footer link.

## Recommendation

Follow existing page patterns exactly. This is the simplest possible slice — a single static React component with CSS, wired into the router and linked from the footer.

## Implementation Landscape

### Files to Create
- `frontend/src/pages/About.tsx` — static page component

### Files to Modify
- `frontend/src/App.tsx` — add `<Route path="/about" element={<About />} />`
- `frontend/src/components/AppFooter.tsx` — add "About" link (use react-router-dom `Link`, not `<a>`)
- `frontend/src/App.css` — add `.about-*` styles

### Existing Patterns to Follow
- **Page structure:** Wrap in a container div with page-specific class (e.g. `<div className="about">`). See Home.tsx for hero/section pattern.
- **Routing:** App.tsx uses `react-router-dom` `Routes`/`Route`. Import lazy or direct, add `<Route path="/about" element={<About />} />`.
- **Footer:** `AppFooter.tsx` currently has version info, build date, commit hash, and GitHub link. Add an "About" `<Link to="/about">` before or after the GitHub link, with the same `app-footer__sep` separator pattern.
- **CSS variables:** All colors use `var(--color-*)` custom properties defined in `:root` in App.css (77 tokens per D017). Use `--color-text-primary`, `--color-text-secondary`, `--color-text-muted`, `--color-surface-secondary`, `--color-accent`, `--color-border` etc.
- **BEM-ish naming:** Classes follow `block__element` pattern (e.g. `home-hero__title`, `nav-card__desc`).

### Content for the About Page
The roadmap specifies three content areas:
1. **What Chrysopedia is** — a knowledge base of music production techniques extracted from creator tutorials
2. **How content is extracted** — mirrors the Home "how it works" 3-step flow (creators share → AI extracts → you search), but with more detail about the pipeline (transcription, LLM extraction, review, synthesis)
3. **Who maintains it** — link to xpltdco GitHub org, note it's an XPLTD project

### Verification
- `cd frontend && npx tsc --noEmit` — zero TypeScript errors
- `cd frontend && npm run build` — production build succeeds
- Visual: navigate to `/about` in browser, confirm content renders, confirm footer link works

### Natural Task Decomposition
This is a single-task slice. Creating the component, adding the route, adding the footer link, and adding CSS are tightly coupled and trivial — splitting further adds overhead without value. One task: "Implement About page with route and footer link."
