Testimonial Card Section – Social proof showcase. Displays client reviews, star ratings, and impact stats in a clean grid layout with strong visual hierarchy. Perfect for building trust on portfolio sites, agency pages, or product landing screens.
import { ClientsSection, Stat, Testimonial } from "@/components/ui/testimonial-card";
// Define the data for the section
const statsData: Stat[] = [
{ value: "100+", label: "Happy clients" },
{ value: "$250M", label: "revenue added" },
{ value: "4.8", label: "Average Rating" },
];
const testimonialsData: Testimonial[] = [
{
name: "Will Smith",
title: "Harper Education",
quote: "Collaborating on this project was seamless. The vision was clearly understood, and the designs genuinely reflect my brand identity.",
avatarSrc: "https://cdn.21st.dev/assets/mirror/80/80bc2ea7184bcd104ff5e9e4f91f6de39403e56d444769323d96628c5c294218.jpg",
avatarFallback: "WS",
rating: 5.0,
},
{
name: "Ikta Sollork",
title: "PARAL CEO",
quote: "Working with this process was effortless. The vision was understood perfectly, and the designs truly represent my brand.",
avatarSrc: "https://cdn.21st.dev/assets/mirror/be/be9239595e60710214efdbe4a52d6faa2b8986ec8b3140660821d90c1e9f8dc9.jpg",
avatarFallback: "IS",
rating: 4.7,
},
{
name: "Alex Johnson",
title: "Innovate Tech",
quote: "A truly transformative partnership. The end result exceeded all of our expectations and has set a new standard in our industry.",
avatarSrc: "https://cdn.21st.dev/assets/mirror/0c/0c23da8d14a4cd72b03bb0015a16adf32dfc021a4f91230e1d53cd0046589888.jpg",
avatarFallback: "AJ",
rating: 4.9,
},
];
// The demo component that renders the entire section
export default function ClientsSectionDemo() {
return (
<ClientsSection
tagLabel="Happy Clients"
title="Clients Love Me"
description="Trusted by 100+ happy clients, adding $250M+ in revenue."
stats={statsData}
testimonials={testimonialsData}
primaryActionLabel="Contact Now"
secondaryActionLabel="See All Projects"
/>
);
}