# S01: Landing Page Visual Fixes

**Goal:** Homepage has consistent 42rem max-width, unified spacing, rounded featured card, correct CTA button sizing.
**Demo:** After this: Homepage has consistent 42rem max-width, unified spacing, rounded featured card, correct CTA button sizing.

## Tasks
- [x] **T01: Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins** — Four CSS fixes in App.css to resolve homepage layout inconsistencies:

1. **Max-width unification** — Change `.nav-cards`, `.home-stats`, `.home-trending`, `.home-popular-topics__list` from 36rem to 42rem. Keep `.home-hero__value-prop` at 32rem (intentionally narrower for readability).

2. **Featured card border-radius** — Remove `border-image` and `border-image-slice` from `.home-featured`. The existing `box-shadow` glow provides visual distinction. Per KNOWLEDGE.md: border-image strips border-radius per CSS spec.

3. **CTA button mobile sizing** — Add `max-width: 20rem; margin-left: auto; margin-right: auto;` to `.home-cta` in the 640px media query so it doesn't stretch to full viewport width.

4. **Unified section spacing** — Standardize bottom margins: major sections (nav-cards, stats, featured, recent-section, trending) get `margin-bottom: 2rem`. The hero section keeps its existing padding.

Steps:
1. Read `frontend/src/App.css` around lines 1167, 1430, 1470, 3286 and change max-width from 36rem to 42rem.
2. Remove `border-image` and `border-image-slice` lines from `.home-featured` (around line 1514-1515).
3. Add max-width constraint to `.home-cta` in the `@media (max-width: 640px)` block (around line 2980).
4. Normalize bottom margins on `.home-stats`, `.home-trending`, `.home-random` to 2rem in their margin declarations.
5. Run `cd frontend && npm run build` — must pass with zero errors.
  - Estimate: 30m
  - Files: frontend/src/App.css
  - Verify: cd frontend && npm run build 2>&1 | tail -5
