'use client'; import React, { useEffect } from 'react'; import useEmblaCarousel from 'embla-carousel-react'; import { cn } from '@/lib/utils'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { motion } from 'framer-motion'; import { Quote } from 'lucide-react'; const defaultTestimonials = [ { text: 'MVPBlocks has completely changed the way I build UIs. Copy-paste, done. No more design stress.', imageSrc: 'https://i.pravatar.cc', name: 'Arjun Mehta', username: '@arjdev', role: 'Frontend Developer', }, { text: 'Honestly shocked at how smooth the animations and styling are out of the box. Just works.', imageSrc: 'https://i.pravatar.cc', name: 'Sara Lin', username: '@sara.codes', role: 'UX Designer', }, { text: 'Our team launched a client site in 2 days using MVPBlocks. Saved so much time.', imageSrc: 'https://i.pravatar.cc', name: 'Devon Carter', username: '@devninja', role: 'Product Manager', }, { text: 'Plugged a few blocks into our existing codebase and everything blended perfectly. Massive W.', imageSrc: 'https://i.pravatar.cc', name: 'Priya Shah', username: '@priyacodes', role: 'Full Stack Developer', }, { text: 'Found a beautiful hero section, dropped it into V0, tweaked copy, and shipped in 15 minutes.', imageSrc: 'https://i.pravatar.cc', name: 'Leo Martin', username: '@leobuilds', role: 'Startup Founder', }, { text: 'MVPBlocks helped us prototype multiple landing pages without writing CSS once.', imageSrc: 'https://i.pravatar.cc', name: 'Chloe Winters', username: '@chloewinters', role: 'UI Designer', }, ]; interface TestimonialProps { testimonials?: { text: string; imageSrc: string; name: string; username: string; role?: string; }[]; title?: string; subtitle?: string; autoplaySpeed?: number; className?: string; } export default function TestimonialsCarousel({ testimonials = defaultTestimonials, title = 'What our users say', subtitle = 'From intuitive design to powerful features, our components have become essential tools for developers around the world.', autoplaySpeed = 3000, className, }: TestimonialProps) { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'center', containScroll: 'trimSnaps', dragFree: true, }); useEffect(() => { if (!emblaApi) return; const autoplay = setInterval(() => { emblaApi.scrollNext(); }, autoplaySpeed); return () => { clearInterval(autoplay); }; }, [emblaApi, autoplaySpeed]); const allTestimonials = [...testimonials, ...testimonials]; return (

{title}

{subtitle} {/* Testimonials carousel */}

{allTestimonials.map((testimonial, index) => (

{/* Enhanced decorative gradients */}

{testimonial.text} {/* Enhanced user info with animation */} {testimonial.name.charAt(0)}

{testimonial.name}

{testimonial.username}

{testimonial.role && ( <> •

{testimonial.role}

)}

))}

); }