Dark equal three column testimonial cards with gradient image blocks and stats row
Dark equal three-column testimonial section for SaaS and AI landing pages with three equal-width gradient image cards, customer name and role, and a four-item footer with two stats, a category pill, and a read link. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A variant of the dark testimonials card section using equal 1fr 1fr 1fr column widths instead of the 1fr 1.5fr 1fr asymmetric layout. The section shares the same base CSS class .slash and the same near-black #050505 background. Three equal cards are used: a warehouse-tone, a couch-tone, and a wide rebar-tone card. Each card covers the full card in gradient with a dark bottom fade for the person name and role. The footer row holds two stat items, a category pill, and a read story link. The equal-width grid is better suited to three testimonials of similar importance where no single card should visually dominate. Use this template when the asymmetric testimonials-dark-cards layout gives too much emphasis to the centre card.
Common questions about this template
How do I switch to the asymmetric layout?
Ask your vibe coding tool to remove the eq class from the .cards div. This applies the default 1fr 1.5fr 1fr grid giving the centre card more visual weight. The testimonials-dark-cards template uses this asymmetric grid by default.
How do I replace the gradient cards with real photos?
Ask Bolt, Claude Code, Replit, or Lovable to replace the background property on each .card div with url('/path/to/photo.jpg') center/cover. Keep the linear-gradient overlay as a second background value separated by a comma so the dark bottom fade stays for the person name and role.
How do I change the footer stats?
Ask your vibe coding tool to update the .stat text in the footer. The default shows 50+ active deployments and 14 days median time to ROI. Replace with your real product metrics. Use specific numbers rather than rounded claims for higher trust and conversion.
Use this AI coding template for
- ·Dark social proof sections where three equally weighted testimonials need the same visual emphasis and no single card should dominate
- ·Voice AI and SaaS landing pages that need a testimonials section with equal card widths to match a symmetrical page layout
- ·Dark mode product pages that already use the asymmetric testimonials-dark-cards template for one section and need an equal-weight variant for a second