Testimonials 2

1"use client";
2 
3import {
4  Avatar,
5  AvatarFallback,
6  AvatarImage,
7} from "@/components/ui/avatar";
8import { getAvatarUrl, getTestimonials } from "@/lib/smoothui-data";
9import { ChevronLeft, ChevronRight } from "lucide-react";
10import { AnimatePresence, motion, useReducedMotion } from "motion/react";
11import { useCallback, useEffect, useState } from "react";
12 
13const testimonials = getTestimonials(7);
14 
15export function TestimonialsGrid() {
16  const shouldReduceMotion = useReducedMotion();
17  const [active, setActive] = useState(0);
18  const [autoplay] = useState(false);
19 
20  const handleNext = useCallback(() => {
21    setActive((prev) => (prev + 1) % testimonials.length);
22  }, []);
23 
24  const handlePrev = () => {
25    setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length);
26  };
27 
28  const isActive = (index: number) => index === active;
29 
30  useEffect(() => {
31    if (autoplay) {
32      const interval = setInterval(handleNext, 5000);
33      return () => clearInterval(interval);
34    }
35  }, [autoplay, handleNext]);
36 
37  return (
38    <section>
39      <div className="min-h-auto bg-muted py-24">
40        <div className="container mx-auto w-full max-w-6xl px-6">
41          <motion.div
42            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
43            className="mb-12"
44            initial={
45              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
46            }
47            transition={
48              shouldReduceMotion
49                ? { duration: 0 }
50                : { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
51            }
52          >
53            {/* Layout: Title on left, Testimonial on right */}
54            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
55              {/* Left side - Title and description */}
56              <div className="flex flex-col justify-center">
57                <h2 className="mb-4 font-semibold text-4xl text-foreground">
58                  What Developers Say
59                </h2>
60                <p className="text-balance text-foreground/70 text-lg">
61                  Join thousands of developers who are building faster, more
62                  beautiful UIs with SmoothUI. See what they&apos;re saying
63                  about their experience.
64                </p>
65              </div>
66              {/* Right side - Testimonial card */}
67              <div className="relative flex min-h-fit flex-col items-end">
68                {/* Navigation Arrows - Above the card */}
69// … truncated