Verified Reviews Wall
Masonry wall of verbatim patient reviews with source badges (Google stars / Facebook recommends) and honest aggregate header.
Component code: ReviewsWall.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a reviews wall that shows only verbatim, verifiable reviews — aggregates must state real counts, never rounded-up marketing numbers.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
Header row: aggregate summary left ("5.0 · 52 Google reviews", "100% recommend on Facebook"), cards in CSS columns masonry (3 cols desktop, 2 tablet, 1 mobile). Card: source badge row (stars for Google, 👍 recommends badge for Facebook — Facebook reviews have no stars, never fake them), review text verbatim, reviewer first name + month.
TYPOGRAPHY
Typography
Aggregate: 1.5rem/600. Review text: 0.95rem leading 1.6. Meta: 0.8rem muted.
COLOR TOKENS
Color Tokens
--background: 40 33% 98%; --card: 0 0% 100%; --foreground: 160 25% 12%; --muted-foreground: 160 10% 38%; --border: 40 15% 88%; --accent: 38 70% 52% (stars).
SPACING
Spacing
Columns gap 1.5rem; card padding 1.5rem; card margin-bottom 1.5rem.
ANIMATION
Animation
Cards fade in on view, stagger by index modulo 8. No layout-shifting hover effects; hover only lifts shadow. Reduced motion safe.
RESPONSIVE
Responsive
Columns collapse 3→2→1; aggregate header stacks.
SAMPLE COPY
Sample Copy
Header: "5.0 on Google · 52 reviews" / "100% recommend us on Facebook"
Card (Google): ★★★★★ "My shoulder pain eased after two sessions. The doctor explained everything before starting." — Nok, October 2026
Card (Facebook): 👍 recommends "Gentle, professional, and my sleep is finally back." — May, September 2026