# S01: Homepage Hero & Value Proposition

**Goal:** Homepage shows tagline, value description, how-it-works steps, Start Exploring CTA, and popular topic quick-links above the fold
**Demo:** After this: Homepage shows tagline, value description, how-it-works steps, Start Exploring CTA, and popular topic quick-links above the fold

## Tasks
- [x] **T01: Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage** — The Home.tsx hero section currently has an empty <h1> and a subtitle. This task adds the tagline text, a value proposition paragraph, a 3-step how-it-works visual, and a Start Exploring CTA button — all static content with CSS styling using existing design tokens.

Steps:
1. Read `frontend/src/pages/Home.tsx` and `frontend/src/App.css` (home-hero section starting ~line 866)
2. In Home.tsx, add text content to the existing empty `<h1 className="home-hero__title">` — set it to "Production Knowledge, Distilled" (or similar compelling tagline)
3. Add a new `<p className="home-hero__value-prop">` below the subtitle explaining what Chrysopedia does — e.g. "Real music production techniques extracted from creator tutorials. Skip the 4-hour videos — find the insight you need in seconds."
4. Add a `<div className="home-how-it-works">` section with 3 steps: (1) Real creators share techniques (2) AI extracts key moments (3) You find answers fast. Each step gets an icon/number, title, and short description.
5. Add a `<Link to="/topics" className="btn home-cta">Start Exploring</Link>` CTA button positioned prominently after the how-it-works section but before the search bar
6. In App.css, add styles for `.home-hero__value-prop`, `.home-how-it-works`, `.home-how-it-works__step`, `.home-cta`. Use existing CSS custom properties (--color-text-secondary, --color-accent, --color-bg-surface, etc.)
7. Increase `.home-hero` top padding to give breathing room for the new content
8. Add mobile responsive rules at the existing breakpoint (~768px) — steps should stack vertically on mobile
9. Run `cd frontend && npm run build` to verify zero errors

Constraints:
- Keep search bar prominent — new content supports but doesn't bury it
- Use only existing CSS custom properties from :root, no new color definitions
- The how-it-works section can be just below the fold on desktop; hero title + search should be visible without scrolling
  - Estimate: 30m
  - Files: frontend/src/pages/Home.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build 2>&1 | tail -5
- [x] **T02: Added popular topics pill-link section to homepage that fetches from topics API, sorts sub-topics by technique_count, and renders top 8 as clickable pills** — Add a popular topics section to the homepage that fetches topic data from the existing fetchTopics API, sorts sub-topics by technique_count, and renders the top 8-10 as clickable pill/chip links. Each pill navigates to the search page scoped to that topic.

Steps:
1. Read current `frontend/src/pages/Home.tsx` (will include T01 changes) and `frontend/src/api/public-client.ts` (for TopicCategory/TopicSubTopic interfaces and fetchTopics function)
2. In Home.tsx, import `fetchTopics` and `TopicCategory` from public-client.ts
3. Add state: `const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([])`
4. Add useEffect that calls fetchTopics(), flattens all sub_topics across categories, sorts by technique_count descending, takes top 8, maps to {name, count}
5. Render a `<section className="home-popular-topics">` between the CTA and the search bar (or between search bar and nav-cards). Show heading "Popular Topics" and render each topic as `<Link to={`/search?q=${encodeURIComponent(topic.name)}&scope=topics`} className="pill pill--topic-quick">{topic.name}</Link>`
6. If popularTopics is empty (no data or API error), render nothing — no section, no error message
7. In App.css, add styles for `.home-popular-topics` (centered, flex-wrap gap layout) and `.pill--topic-quick` (reuse existing pill styling with minor adjustments for interactive hover state using --color-accent)
8. Add mobile responsive adjustments if needed
9. Run `cd frontend && npm run build` to verify zero errors

Constraints:
- Catch fetchTopics errors silently — no user-facing error for this optional section
- Reuse existing pill/badge CSS patterns (`.pill--tag` exists already)
- Topic pills should visually complement but not compete with the search bar
  - Estimate: 25m
  - Files: frontend/src/pages/Home.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build 2>&1 | tail -5
