Components
Loading preview...
A dynamic testimonials section with infinite scroll animation featuring a headline, description, and auto-scrolling testimonial cards that pause on hover, inspired by Launch UI. Features: • Infinite scroll animation with hover pause • Responsive, mobile-first design • Gradient fade edges for smooth transitions • Customizable content through props • Dark mode support • Optimized performance using CSS animations
npx shadcn@latest add https://21st.dev/r/serafimcloud/testimonials-with-marqueeimport { TestimonialsSection } from "@/components/blocks/testimonials-with-marquee"
const testimonials = [
{
author: {
name: "Emma Thompson",
handle: "@emmaai",
avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face"
},
text: "Using this AI platform has transformed how we handle data analysis. The speed and accuracy are unprecedented.",
href: "https://twitter.com/emmaai"
},
{
author: {
name: "David Park",
handle: "@davidtech",
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
},
text: "The API integration is flawless. We've reduced our development time by 60% since implementing this solution.",
href: "https://twitter.com/davidtech"
},
{
author: {
name: "Sofia Rodriguez",
handle: "@sofiaml",
avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face"
},
text: "Finally, an AI tool that actually understands context! The accuracy in natural language processing is impressive."
}
]
export function TestimonialsSectionDemo() {
return (
<TestimonialsSection
title="Trusted by developers worldwide"
description="Join thousands of developers who are already building the future with our AI platform"
testimonials={testimonials}
/>
)
}