Components
Animated Testimonial Grid This component displays a visually engaging, animated grid of testimonials. It's designed to be highly reusable, allowing you to easily customize the title, description, call-to-action, and the list of testimonials through props. The floating animation adds a dynamic feel, capturing user attention.
Loading preview...
import { TestimonialCollage } from '@/components/ui/testimonial'; // Adjust import path
// Sample data for the testimonials
const sampleTestimonials = [
{ imgSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2070&auto=format&fit=crop", name: "Emily White" },
{ imgSrc: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=1974&auto=format&fit=crop", name: "James Smith" },
{ imgSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1964&auto=format&fit=crop", name: "Olivia Brown" },
{ imgSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop", name: "Maria Garcia" },
{ imgSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1974&auto=format&fit=crop", name: "David Chen" },
{ imgSrc: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop", name: "Isabella Martinez" },
{ imgSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2080&auto=format&fit=crop", name: "Alex Johnson" },
];
export default function TestimonialCollageDemo() {
return (
<div className="w-full bg-background">
<TestimonialCollage testimonials={sampleTestimonials} />
</div>
);
}