# S03: Featured Content & Content Teasers

**Goal:** Homepage shows a featured technique spotlight and recently-added section with enriched grid-layout cards
**Demo:** After this: Homepage shows a featured technique spotlight and Recently Added section with enriched cards

## Tasks
- [x] **T01: Added sort=random|recent query param to list_techniques endpoint and wired it through the frontend API client** — Add an optional `sort` query parameter to the backend `list_techniques` endpoint in `backend/routers/techniques.py`. Accepts 'recent' (default, existing created_at DESC behavior) and 'random' (using func.random(), same pattern as creators.py line 67). Update `TechniqueListParams` in `frontend/src/api/public-client.ts` to include `sort?: string` and pass it as a query string param in `fetchTechniques`.

Backend change pattern (from creators.py):
```python
sort: Annotated[str, Query()] = "recent",
```
Then in the query building:
```python
if sort == "random":
    stmt = stmt.order_by(func.random())
else:
    stmt = stmt.order_by(TechniquePage.created_at.desc())
```

Replace the existing hardcoded `.order_by(TechniquePage.created_at.desc())` with the conditional.
  - Estimate: 15m
  - Files: backend/routers/techniques.py, frontend/src/api/public-client.ts
  - Verify: cd frontend && npx tsc --noEmit && grep -q 'sort.*random' ../backend/routers/techniques.py && grep -q 'sort' src/api/public-client.ts
- [x] **T02: Added featured technique spotlight section and converted recently-added to 2-column grid with deduplication and enriched card display** — 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.
  - Estimate: 45m
  - Files: frontend/src/pages/Home.tsx, frontend/src/App.css
  - Verify: 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
