Dark asymmetric three column testimonial cards with image gradients and stats row
Dark testimonial section for SaaS and AI product pages with an asymmetric three-column grid of image-gradient 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 dark testimonial section on a near-black #050505 background. An italic serif headline introduces the section on the left. Three cards sit in an asymmetric grid with a 1fr 1.5fr 1fr column ratio: a warehouse-tone card, a bricks-tone card, and a laptop-tone card. Each card is portrait-ratio with a multi-tone gradient image placeholder that fills the full card with a dark-to-transparent overlay at the bottom for the person name and role. Below the cards, a four-item footer holds two large serif stat numbers with small labels, a pill tag with a category label, and a read story link. The gradient placeholders convey editorial quality even without real photography. The asymmetric grid gives the centre card more visual weight and draws the eye to the featured testimonial.
Common questions about this template
How do I replace the gradient cards with real photos?
Ask your vibe coding tool 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 legibility of the person name and role.
How do I change the stats in the footer row?
Ask Bolt, Claude Code, Replit, or Lovable to update the .stat div text: the first span is the number, the second small is the label. Use real product metrics. Specific numbers outperform rounded ones: 100% answer rate or 3.2x more meetings are more convincing than generic superlatives.
How do I switch to equal column widths?
Ask your vibe coding tool to update the grid-template-columns on .cards from 1fr 1.5fr 1fr to 1fr 1fr 1fr. This gives all three cards equal width. The testimonials-dark-equal-cards template uses this equal grid by default.
Use this AI coding template for
- ·SaaS and AI product landing pages that need a dark social proof section with visual weight from image-style gradient cards
- ·Voice AI and call automation product pages where customer name, role, and two supporting statistics create a complete proof moment
- ·Dark mode landing pages where the testimonial section needs to hold its own between a dark hero and a dark pricing table