---
estimated_steps: 15
estimated_files: 2
skills_used: []
---

# T01: Add hero tagline, value proposition, how-it-works steps, and CTA to Home.tsx

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

## Inputs

- `frontend/src/pages/Home.tsx`
- `frontend/src/App.css`

## Expected Output

- `frontend/src/pages/Home.tsx`
- `frontend/src/App.css`

## Verification

cd frontend && npm run build 2>&1 | tail -5
