Testimonial Wall

# Testimonial Wall — Landing Page Section

## Goal
Build a masonry-style testimonial wall section: heading block + 9-12 quote cards in 3 columns of independent heights. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Header: small caps label 'WALL OF LOVE', headline 'People talk. We blush.', subline — all centered, max-w-2xl.
- Cards: quote text (15-16px, 1.6 leading), then footer row of avatar (36px, ring-1), name semibold, handle/role muted.
- Mixed lengths: short one-liners and 4-5 line quotes interleaved so columns stagger naturally (CSS columns or manual 3-array split).
- One 'highlight' card per wall: slightly tinted background + 1px accent border + tiny star row — draws the eye without shouting.
- Bottom fade-out mask (120px gradient) + centered 'Read 200+ reviews' ghost button overlapping the fade.

## Motion Spec
- Cards reveal on scroll with 60ms stagger, translate-y 16px + fade, once.
- Hover: card lifts 3px and a radial spotlight follows the cursor at 6% white opacity.
- Highlight card's border hue slowly cycles ±10° — barely noticeable, alive.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<TestimonialWall items={Testimonial[]} highlightIndex?: number columns?: 2|3 />`
- `Testimonial = { quote: string; name: string; role: string; avatar: string }`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.