Testimonials 3

1"use client";
2 
3import {
4  Avatar,
5  AvatarFallback,
6  AvatarImage,
7} from "@/components/ui/avatar";
8import { cn } from "@/lib/utils";
9import { getAvatarUrl, getTestimonials } from "@/lib/smoothui-data";
10import { Star } from "lucide-react";
11import { motion, useReducedMotion } from "motion/react";
12 
13const testimonials = getTestimonials(4);
14 
15export function TestimonialsStars() {
16  const shouldReduceMotion = useReducedMotion();
17  return (
18    <section>
19      <div className="py-24">
20        <div className="container mx-auto w-full max-w-5xl px-6">
21          <motion.div
22            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
23            className="mb-12"
24            initial={
25              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
26            }
27            transition={
28              shouldReduceMotion
29                ? { duration: 0 }
30                : { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
31            }
32          >
33            <h2 className="font-semibold text-4xl text-foreground">
34              Developer Reviews
35            </h2>
36            <p className="my-4 text-balance text-lg text-muted-foreground">
37              See what the community is saying about SmoothUI. Real feedback
38              from developers building amazing user experiences.
39            </p>
40          </motion.div>
41 
42          <motion.div
43            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
44            className="grid 3xl:grid-cols-3 3xl:gap-12 gap-6 lg:grid-cols-2"
45            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
46            transition={
47              shouldReduceMotion
48                ? { duration: 0 }
49                : { delay: 0.2, duration: 0.6, ease: [0.22, 1, 0.36, 1] }
50            }
51          >
52            {testimonials.map((testimonial, index) => (
53              <motion.div
54                animate={
55                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
56                }
57                className="group rounded-2xl border border-transparent px-4 py-3 duration-200 hover:border-border hover:bg-background/50"
58                initial={
59                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
60                }
61                key={testimonial.name}
62                transition={
63                  shouldReduceMotion
64                    ? { duration: 0 }
65                    : {
66                        delay: index * 0.15,
67// … truncated