# S01: Landing Page Visual Fixes — UAT

**Milestone:** M016
**Written:** 2026-04-03T05:32:30.936Z

# S01 UAT: Landing Page Visual Fixes

## Preconditions
- Chrysopedia frontend built and served (e.g., `http://ub01:8096`)
- Browser with DevTools available

## Test Cases

### TC1: Content sections use 42rem max-width
1. Open homepage at 1280px viewport width
2. Inspect `.nav-cards` → verify `max-width: 42rem`
3. Inspect `.home-stats` → verify `max-width: 42rem`
4. Inspect `.home-trending` → verify `max-width: 42rem`
5. Inspect `.home-popular-topics__list` → verify `max-width: 42rem`
- **Expected:** All four sections align to the same 42rem track
- **Edge case:** `.search-container` should still be 36rem, `.home-hero__value-prop` should be 32rem

### TC2: Featured card has rounded corners
1. Inspect `.home-featured` element
2. Verify no `border-image` property is set
3. Verify `border-radius` is visually applied (rounded corners visible)
- **Expected:** Featured card shows rounded corners with box-shadow glow effect, no square corners

### TC3: CTA button constrained on mobile
1. Set viewport to 375px width (mobile)
2. Scroll to the "Start Exploring" CTA button
3. Inspect `.home-cta`
- **Expected:** Button has `max-width: 20rem` and is centered (auto margins). Does NOT stretch full viewport width.

### TC4: Unified section spacing
1. At any viewport width, inspect margins between major homepage sections
2. Check `.home-stats`, `.home-featured`, `.home-random`, `.home-trending`
- **Expected:** All have `margin-bottom: 2rem` for consistent vertical rhythm

### TC5: Build integrity
1. Run `cd frontend && npm run build`
- **Expected:** Zero errors, zero warnings related to CSS. Build completes successfully.
