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

# T02: Add featured spotlight and enriched recently-added grid to homepage

Add two new sections to Home.tsx and corresponding styles to App.css:

**1. Featured Technique Spotlight** (above recently-added section):
- New useEffect fetching `fetchTechniques({ sort: 'random', limit: 1 })` into `featured` state
- Renders a `.home-featured` section with: technique title (linked to /techniques/{slug}), summary (full, not truncated), creator name (linked to /creators/{creator_slug}), topic_category badge, topic_tags pills, key_moment_count
- Left-aligned content (breaks from hero's center alignment)
- Silently hidden when fetch fails or returns empty (same pattern as popular topics)
- Has a subtle accent left border for visual distinction

**2. Enriched Recently Added grid**:
- Change `.recent-list` from flex-column to CSS grid: `grid-template-columns: repeat(2, 1fr)` with responsive collapse to 1 column at 640px
- Widen `.recent-section` from `max-width: 36rem` to `42rem`
- Filter out the featured technique by ID from the recently-added list to avoid duplication: `recent.filter(t => t.id !== featured?.id)`
- Add more prominent summary display (up to 150 chars instead of 100)

**Styles** in App.css:
- `.home-featured` section: max-width 42rem, centered margin, left-aligned text, 3px accent left border, surface background, card-style padding
- `.home-featured__title`: larger font, linked
- `.home-featured__summary`: full summary text, secondary color
- `.home-featured__meta`: badge + tags + moments row
- `.home-featured__creator`: creator link
- Updated `.recent-list` to grid layout
- Updated `.recent-section` max-width
- Responsive rules at 640px for grid collapse

Use BEM naming under `.home-featured` prefix. Use CSS custom properties from D017.

## Inputs

- ``frontend/src/pages/Home.tsx` — existing homepage with hero, search, nav cards, recently-added section`
- ``frontend/src/App.css` — existing styles including .recent-* classes and CSS custom properties`
- ``frontend/src/api/public-client.ts` — fetchTechniques with sort param (from T01)`

## Expected Output

- ``frontend/src/pages/Home.tsx` — homepage with featured spotlight section and enriched recently-added grid`
- ``frontend/src/App.css` — new .home-featured styles, updated .recent-list to grid layout, responsive rules`

## Verification

cd frontend && npx vite build && grep -q 'home-featured' src/pages/Home.tsx && grep -q 'home-featured' src/App.css && grep -q 'grid-template-columns' src/App.css
