# S01 Research: Landing Page Visual Fixes

## Summary

Straightforward CSS fix slice. Four bugs on the homepage, all in `App.css` with one known pattern from KNOWLEDGE.md. No new dependencies, no backend changes.

## Recommendation

Single task — all four fixes are in the same CSS file and tightly coupled (the max-width unification affects every section). Verify with a frontend build + visual check.

## Implementation Landscape

### Files

| File | Role |
|------|------|
| `frontend/src/App.css` | All CSS for homepage sections lives here |
| `frontend/src/pages/Home.tsx` | JSX structure — likely no changes needed |

### Bug 1: Inconsistent max-widths

Sections use different `max-width` values:
- **42rem**: `.home-how-it-works` (L1088), `.home-featured` (L1505), `.recent-section` (L1578)
- **36rem**: `.nav-cards` (L1430), `.home-stats` (L1470), `.home-trending` (L3287)
- **32rem**: `.home-hero__value-prop` (L1076)

No `.home` container class exists — each section self-constrains independently.

**Fix**: Set all homepage sections to `max-width: 42rem` for consistency. Could also add a `.home` container, but changing per-section values is less invasive.

### Bug 2: Featured card not rounded (border-image strips border-radius)

`.home-featured` (L1504-1518) has both:
```css
border-radius: 0.5rem;
border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;
border-image-slice: 1;
```

Per KNOWLEDGE.md: "CSS `border-image` property overrides `border-radius`, making rounded corners disappear."

**Fix**: Remove `border-image` and `border-image-slice`. Use alternative visual treatment — either `box-shadow` glow only (already present), or a `::before` pseudo-element with gradient background + border-radius for a gradient border effect. The box-shadow glow is already there and provides visual distinction, so removing border-image and keeping box-shadow is the simplest fix.

### Bug 3: CTA button sizing

`.home-cta` (L1128):
```css
padding: 0.75rem 2rem;
font-size: 1rem;
```

At `@media (max-width: 640px)` (L2980):
```css
width: 100%;
text-align: center;
```

The mobile override makes it span full width of the container. Since the hero has no max-width, the button stretches to viewport width minus padding. The fix should constrain the button's max-width on mobile (e.g., `max-width: 20rem`) and ensure desktop sizing feels proportional to the hero section.

### Bug 4: Unified spacing

Sections have inconsistent vertical margins:
- `.home-hero`: `padding: 2rem 1rem 2.5rem`
- `.nav-cards`: `margin: 0 auto 2rem`
- `.home-stats`: `margin: 0 auto 1.5rem`
- `.home-trending`: `margin: 0 auto 1rem`
- `.home-random`: `margin: 1.5rem 0 0.5rem`
- `.home-featured`: `margin: 0 auto 1.5rem`
- `.recent-section`: `margin: 0 auto 2rem`

**Fix**: Standardize bottom margins across sections (e.g., `2rem` for major sections, `1rem` for minor ones) for consistent rhythm.

### Mobile responsive (640px breakpoint)

Existing overrides at L2970: title font-size, how-it-works to single-column, CTA full-width, nav-cards single-column, recent-list single-column, featured padding reduction. These should remain functional after the max-width unification.

## Verification

```bash
cd frontend && npm run build
```

Zero TypeScript/build errors confirms no structural breakage. Visual verification against `ub01:8096` confirms the layout changes render correctly (consistent widths, rounded featured card, button sizing, even spacing).

## Constraints

- KNOWLEDGE.md confirms `border-image` strips `border-radius` — known CSS spec behavior.
- The `#a855f7` purple in the featured card gradient border is hardcoded (not a CSS variable). Removing border-image eliminates this.
- `.home-hero__value-prop` at 32rem is intentionally narrower for readability — may want to keep this one narrower than the 42rem container width.
