---
id: S03
parent: M009
milestone: M009
provides:
  - Featured technique spotlight section on homepage
  - 2-column enriched recently-added grid
  - sort=random|recent query param on list_techniques endpoint
requires:
  - slice: S01
    provides: Homepage hero layout and CSS custom properties
affects:
  []
key_files:
  - backend/routers/techniques.py
  - frontend/src/api/public-client.ts
  - frontend/src/pages/Home.tsx
  - frontend/src/App.css
key_decisions:
  - Followed creators.py pattern for sort=random query param
  - Fetch 6 recent techniques to ensure 4 remain after featured deduplication
  - BEM naming under .home-featured prefix with CSS custom properties
patterns_established:
  - Featured content sections use graceful degradation — silently hidden on fetch failure
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M009/slices/S03/tasks/T01-SUMMARY.md
  - .gsd/milestones/M009/slices/S03/tasks/T02-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-31T05:49:55.266Z
blocker_discovered: false
---

# S03: Featured Content & Content Teasers

**Added featured technique spotlight (random selection) and converted recently-added to enriched 2-column grid with deduplication on the homepage.**

## What Happened

Two tasks delivered the featured content sections on the homepage.

T01 added a `sort` query parameter to the `list_techniques` backend endpoint, accepting 'recent' (default, existing created_at DESC) and 'random' (func.random()), following the same pattern already used in creators.py. The frontend API client was updated to pass the sort param through.

T02 added the featured technique spotlight section and enriched the recently-added grid. The spotlight fetches a single random technique and displays it with full summary, creator link, topic category badge, topic tags, and key moment count, styled with an accent left border for visual distinction. The recently-added section was converted from a flex column to a 2-column CSS grid (collapsing to 1 column at 640px), with summaries extended to 150 characters. Deduplication filters out the featured technique from the recent list. Recent fetch limit was increased from 5 to 6 to ensure enough cards remain after filtering.

All styles use BEM naming under `.home-featured` prefix and CSS custom properties from D017. The spotlight silently hides when the fetch fails or returns empty, matching the existing graceful degradation pattern used for popular topics.

## Verification

All verification checks pass from the frontend directory:
- `npx tsc --noEmit`: exit 0 (TypeScript compiles cleanly)
- `npx vite build`: exit 0, produces dist/ bundle (727ms)
- `grep -q 'home-featured' src/pages/Home.tsx`: pass
- `grep -q 'home-featured' src/App.css`: pass
- `grep -q 'grid-template-columns' src/App.css`: pass
- `grep -q 'sort.*random' backend/routers/techniques.py`: pass
- `grep -q 'sort' src/api/public-client.ts`: pass

Note: verification gate failures were due to commands running from project root rather than `cd frontend` — the code itself is correct.

## Requirements Advanced

None.

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

Minor: recent fetch limit increased from 5 to 6 to ensure 4 cards remain after featured deduplication. Added .home-featured__label element for visual hierarchy not in original plan.

## Known Limitations

None.

## Follow-ups

None.

## Files Created/Modified

- `backend/routers/techniques.py` — Added sort query parameter (random/recent) to list_techniques endpoint
- `frontend/src/api/public-client.ts` — Added sort param to TechniqueListParams and fetchTechniques
- `frontend/src/pages/Home.tsx` — Added featured technique spotlight section and enriched recently-added grid with deduplication
- `frontend/src/App.css` — Added .home-featured BEM styles, converted recent-list to CSS grid, responsive breakpoint at 640px
