Components
Loading preview...
l use framer-motion, which is the most popular and powerful animation library for React. It integrates perfectly with Tailwind CSS. I will add a subtle fade-in and slide-up animation for when the cards first appear, a hover effect, and a staggered delay so they animate in one after the other.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/testimonial-cardimport TestimonialCard from "@/components/ui/testimonial-card";
export default function DemoOne() {
const testimonials = [
{
quote:
"This is a game-changer. The platform is intuitive, powerful, and has completely transformed our workflow. The support team is also incredibly responsive.",
authorName: 'Sarah Johnson',
authorTitle: 'CEO, Innovate Inc.',
avatarUrl: 'https://i.pravatar.cc/150?img=1',
rating: 5,
},
{
quote:
'I was skeptical at first, but the results speak for themselves. Our productivity is up by 40% and the team is happier than ever. Highly recommended!',
authorName: 'Michael Chen',
authorTitle: 'CTO, Tech Solutions',
avatarUrl: 'https://i.pravatar.cc/150?img=2',
rating: 5,
},
{
quote:
"An essential tool for any modern business. It's flexible enough to adapt to our unique needs, and the feature set is constantly growing and improving.",
authorName: 'Emily Rodriguez',
authorTitle: 'Marketing Director, Creative Co.',
avatarUrl: 'https://i.pravatar.cc/150?img=3',
rating: 4,
},
];
return (
<div className="min-h-screen w-full bg-gray-100 font-sans antialiased dark:bg-gray-900">
<div className="container mx-auto px-4 py-16 sm:py-24">
<header className="mb-16 text-center">
<h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
What Our Customers Are Saying
</h1>
<p className="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
We're trusted by thousands of amazing companies. Read what they think about us.
</p>
</header>
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
{testimonials.map((testimonial, index) => (
<TestimonialCard key={index} {...testimonial} index={index} />
))}
</div>
</div>
</div>
);
}