Components
Loading preview...
Testimonial Section This component renders a title and a grid of testimonial cards. It's designed to be highly reusable, accepting an array of testimonial objects to dynamically generate the content. It supports two types of cards: a standard user testimonial with an avatar and a featured quote card.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/testimonialimport { TestimonialSection, Testimonial } from "@/components/ui/testimonial";
const testimonialsData: Testimonial[] = [
{
type: "user",
quote: "I was self-employed for 13 years and I'd never really done any interviews. Using interview Warmup I learned how to answer questions in a much more professional way. It's been a big confidence boost.",
name: "Le'mont C.",
role: "Google Career Certificate graduate",
avatarSrc: "https://i.pravatar.cc/150?u=lemont",
avatarFallback: "LC",
},
{
type: "quote",
quote: "I feel much more confident in my ability to leverage generative AI tools effectively and responsibly. The hands-on activities and real-world examples were particularly helpful in solidifying my understanding.",
name: "Susan R.", // Name and role are optional for quote type
role: "Google Prompting Essentials graduate",
},
{
type: "user",
quote: "The AI Essentials course was instrumental in equipping me with a strong foundation in leveraging AI for daily tasks. I've achieved a dramatic improvement in my daily efficiency, freeing up time for more strategic tasks.",
name: "Christian W.",
role: "Google AI Essentials graduate",
avatarSrc: "https://i.pravatar.cc/150?u=christian",
avatarFallback: "CW",
},
];
export default function TestimonialSectionDemo() {
return (
<div className="w-full bg-background">
<TestimonialSection
title="Empowering more people with AI"
testimonials={testimonialsData}
/>
</div>
);
}