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

# T02: Unify section headings, tighten above-fold spacing, and add header brand accent

Three CSS/JSX changes to polish the homepage personality.

Steps:
1. **Unified section headings** — In `frontend/src/App.css`:
   - Add a `.section-heading` utility class: `font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 0.75rem;`
   - Add `.section-heading--accent` modifier: `color: var(--color-accent);`
   - Simplify `.home-popular-topics__title`, `.home-trending__title`, `.home-featured__label`, `.recent-section__title` — remove duplicated font-size/weight/transform/spacing declarations, keeping only section-specific overrides (if any)
   - In `frontend/src/pages/Home.tsx`, add `section-heading` className to all four heading elements. For `.home-featured__label`, also add `section-heading--accent`. For `.recent-section__title`, also add `section-heading` (it currently has larger font-size 1.125rem and weight 700 — these get replaced by the unified style).

2. **Above-fold tightening** — In `frontend/src/App.css`:
   - Reduce `.home-hero` padding from `2rem 1rem 2.5rem` to `1.5rem 1rem 1.5rem`
   - Reduce `.home-hero__value-prop` margin-top from `1.5rem` to `1rem`
   - Reduce `.home-how-it-works` margin-top from `2rem` to `1.25rem` and gap from `1rem` to `0.75rem`
   - The goal is to get the search bar + value prop + start of popular topics visible on a 900px viewport without scrolling.

3. **Header brand accent** — In `frontend/src/App.css`:
   - Add `border-bottom: 2px solid var(--color-accent);` to `.app-header`
   - This ties the header to the cyan brand color already in the logo SVG

Constraints:
- The `.section-heading` class must be additive — don't break any section-specific positioning (margins, text-align)
- Keep the featured label's accent color via the modifier class
- Don't touch the card-stagger animation (it already works)

## Inputs

- ``frontend/src/App.css` — current styles with 4 different heading treatments`
- ``frontend/src/pages/Home.tsx` — current Home component markup`
- ``frontend/src/hooks/useCountUp.ts` — T01 output (T02 doesn't modify this, but Home.tsx will contain its changes)`

## Expected Output

- ``frontend/src/App.css` — .section-heading utility class added, hero padding reduced, header border-bottom added`
- ``frontend/src/pages/Home.tsx` — section-heading classes added to four heading elements`

## Verification

cd frontend && npm run build && grep -q 'section-heading' src/App.css && grep -q 'section-heading' src/pages/Home.tsx && grep -q 'border-bottom.*accent' src/App.css
