Testimonials

Kent C. Dodds kentcdodds.com/testimonials

Design type: Testimonial wall
Page tags: testimonials dark cards grid social proof quotes avatars hero
Site tags: dark personal developer
Vocabulary: split hero with portraittwo-tone headlinepill ctascroll-down cuethree-column masonry-like gridquote cardscircular avatarsunderlined author namerole captionraised dark panelswide breakout grid3d illustration cta
Prompt: Show prompt
Build a dark testimonial wall page for [Your name / product]. Global shell (reuse on every page): near-black charcoal background #1f2028, raised panels #2a2d36, hairline dividers #2f323b. Text #ffffff for headings, #9aa0aa for muted copy. A neutral grotesk sans throughout (Matter, Inter or similar), medium weight, tight tracking on headings. Header: wordmark [Your name] + round search icon button on the left, centred row of small nav links (active link gets a short underline), round theme-toggle and avatar buttons on the right. Content sits in a ~1000px column with generous vertical rhythm (120–160px between sections). Signature link style: bold label followed by a 40px outlined circle holding an arrow, the circle fills on hover. Footer: four columns (name + tagline + social icons + signature, Contact/General link lists, Sitemap list, newsletter form with two tall filled inputs and a "Sign me up →" circle-arrow button), then a small copyright line. Sections: - Hero: left side has a two-tone ~32px headline (white "[Curious what people are saying?]" with a muted grey follow-up line), a filled white pill button "[Submit your own]", and a circle down-arrow "Start reading…" cue. On the right, a portrait photo (~3:4, slight radius) of [Your name] holding something playful. - Wall: break out wider than the main column (~1300px) into a 3-column grid of raised cards (#2a2d36, 4px radius, ~32px padding, 12px gaps). Cards in a row share the tallest card's height. Each card has: - The quote in 13–14px white, with curly quotes and paragraph breaks kept. - An author row pinned to the bottom: a 32px circular avatar, the underlined white name (linked), and a tiny muted role/company line beneath. - Show 50+ cards. Short quotes leave deliberate empty space so the grid stays rhythmic. - Closing CTA: a large 3D object illustration on the left, a two-tone headline "[More of a listener?]" and a circle-arrow link on the right. Motion: cards fade and rise in on scroll with a small stagger, and the avatar and name brighten on hover. Responsive: 3 → 2 → 1 columns and the hero photo stacks under the text.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Testimonials on Kent C. Dodds