# S01 Research — Homepage Hero & Value Proposition

## Summary

Straightforward frontend slice. The existing `Home.tsx` already has a hero section with search bar, nav cards (Topics/Creators), and a Recently Added section. The work is adding content above and around the search bar: a tagline, value proposition text, how-it-works steps, a "Start Exploring" CTA, and popular topic quick-links. All needed APIs already exist (`fetchTopics` returns categories with sub-topic technique counts). The CSS custom property system (77 tokens in `:root`) is well-established.

No new backend work. No new dependencies. No risky integration.

## Recommendation

Single file change (`Home.tsx`) plus CSS additions in `App.css`. Can be done in 1-2 tasks.

## Implementation Landscape

### Current State

**`frontend/src/pages/Home.tsx`** (236 lines):
- `home-hero` section: empty `<h1>` (no tagline text), subtitle "Search techniques, key moments, and creators", search bar with typeahead
- `nav-cards` section: Topics and Creators link cards
- `recent-section`: Recently Added technique cards
- Imports: `searchApi`, `fetchTechniques`, `SearchResultItem`, `TechniqueListItem` from `public-client.ts`

**`frontend/src/App.css`** (~3200 lines):
- `.home-hero` starts at line 866: centered, minimal padding (0.5rem top)
- `.home-hero__title`: 2.25rem / 800 weight — exists but the JSX `<h1>` has no text content
- `.nav-cards` at line 1020: 2-column grid
- `.recent-section` at line 1060
- Mobile breakpoint adjusts `.home-hero__title` size at ~line 2078

**`frontend/src/api/public-client.ts`**:
- `fetchTopics(): Promise<TopicCategory[]>` — returns `{ name, description, sub_topics: [{ name, technique_count, creator_count }] }[]`
- Already used by `TopicsBrowse.tsx`, proven API

### What to Build

1. **Tagline** — Set the `<h1>` text to a value proposition headline (e.g., "Production Knowledge, Distilled")
2. **Value description** — 1-2 sentence paragraph below subtitle explaining what Chrysopedia does
3. **How-it-works steps** — 3-step visual (e.g., "Real creators share → AI extracts key moments → You find answers fast")
4. **Start Exploring CTA** — Button linking to `/topics` or scrolling to search, positioned prominently
5. **Popular topic quick-links** — Fetch top N sub-topics by `technique_count` from `fetchTopics()`, render as pill/chip links that navigate to search with scope

### File Changes

| File | Change |
|------|--------|
| `frontend/src/pages/Home.tsx` | Add tagline h1 text, value prop paragraph, how-it-works section, CTA button, popular topics section (new `useEffect` to call `fetchTopics`, sort sub-topics by count, take top 8-10) |
| `frontend/src/App.css` | Add styles for `.home-value-prop`, `.home-how-it-works`, `.home-how-it-works__step`, `.home-cta`, `.home-topics-quick` and pill styles. Adjust `.home-hero` padding for more vertical breathing room. Mobile responsive rules. |

### Natural Task Seams

This could be 1 task (it's all one page) or split into 2:
- **T01**: Hero content (tagline, value prop, how-it-works, CTA) — pure static content + CSS, no API calls
- **T02**: Popular topic quick-links — requires `fetchTopics` call, data transform, rendering pills that link to `/search?q=<topic>&scope=topics`

Splitting is marginally useful for parallel execution but the dependency is trivial. A single task is also reasonable.

### Design Tokens Available

The `:root` block has all needed tokens:
- `--color-bg-page`, `--color-bg-surface`, `--color-bg-surface-hover` for section backgrounds
- `--color-text-primary`, `--color-text-secondary`, `--color-text-muted` for text hierarchy
- `--color-accent`, `--color-accent-hover` (cyan) for CTA button
- `--color-border` for step dividers
- Badge/pill styles already exist (`.badge`, `.pill--tag`) — reuse for topic quick-links

### Verification

- `cd frontend && npm run build` — zero TypeScript errors, zero warnings
- Visual: browser check at `http://ub01:8096` — hero shows tagline, value prop, steps, CTA, and topic pills above the search bar
- Topic pills link correctly to `/search?q=<topic>&scope=topics`
- Mobile responsive: content stacks vertically, readable at 375px width

### Constraints

- Keep search bar prominent — new content supports but doesn't bury the search experience
- "Above the fold" is relative; on desktop the hero + search + CTA should be visible without scrolling, how-it-works can be just below
- Topic quick-links depend on having topics data in the DB; render nothing gracefully if empty
