Components
Loading preview...
A sophisticated testimonial card component featuring smooth hover animations, supporter avatars grid, and elegant typography. Perfect for showcasing customer feedback with visual impact and professional polish.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/hover-testimonial-cardimport { TestimonialShowcase } from '@/components/ui/hover-testimonial-card';
// Generate more testimonials for a fuller grid
const generateMoreTestimonials = () => {
const names = ['John', 'Alice', 'Bob', 'Carol', 'Dan', 'Eve', 'Frank', 'Grace', 'Henry', 'Iris', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Paul', 'Quinn', 'Ruby', 'Sam', 'Tina', 'Uma', 'Victor', 'Wendy', 'Xander', 'Yara', 'Zoe', 'Aaron', 'Bella', 'Chris', 'Diana', 'Ethan', 'Fiona', 'George', 'Hannah', 'Ian', 'Julia', 'Kevin', 'Luna', 'Mason', 'Vaib', 'Ravi', 'Sonu', 'Krishna', 'Aditya', 'Radhika', 'Anuradha', 'Devika'];
const quotes = [
'This tool has transformed how I approach coding challenges.',
'Incredible AI that actually understands context and intent.',
'The productivity gains are immediately noticeable.',
'Best investment our team has made this year.',
'Intuitive, powerful, and remarkably accurate suggestions.',
'Makes complex refactoring tasks feel effortless.',
'The future of software development is here.',
'Seamless integration with our existing workflow.',
];
const testimonials = names.map((name, index) => ({
id: `${index}`,
quote: quotes[index % quotes.length],
author: {
name: `${name}`,
title: ['Engineer', 'Developer', 'Architect', 'Lead'][index % 4],
initials: name.substring(0, 2),
avatar: `https://api.dicebear.com/8.x/lorelei/svg?seed=${name}`
},
}));
return testimonials;
};
const testimonials = generateMoreTestimonials();
export default function TestimonialDemo() {
return (
<div className="min-h-screen bg-gradient-to-br from-background via-muted/10 to-background p-6 w-full">
<div className="mx-auto space-y-8">
<div className="text-center space-y-4 mb-12">
<h1 className="text-4xl font-bold text-foreground">Community Testimonials</h1>
<p className="text-muted-foreground text-lg">
Discover what developers are saying. Click any avatar to see their story.
</p>
</div>
<TestimonialShowcase
testimonials={testimonials}
defaultTestimonialId="1"
autoPlayInterval={5000}
/>
</div>
</div>
);
}