1"use client";
2
3import { Avatar, AvatarImage } from "@/components/ui/avatar";
4import { FaApple, FaLinkedin, FaMicrosoft } from "react-icons/fa";
5
6const testimonials = [
7  {
8    id: 1,
9    quote: "Perfect for our enterprise needs.",
10    highlight: "Scalable and secure",
11    fullText: "with excellent integration capabilities. The analytics dashboard provides invaluable insights for our marketing campaigns.",
12    author: "Lisa Thompson",
13    role: "Marketing Director",
14    avatar: "https://avatar.iran.liara.run/public/21",
15    icon: <FaMicrosoft className="size-5" />
16  },
17  {
18    id: 2,
19    quote: "The implementation was incredibly smooth.",
20    highlight: "We deployed in under 2 hours",
21    fullText: "and the team loves how intuitive the interface is. The responsive design works perfectly across all devices.",
22    author: "Sarah Chen",
23    role: "Product Manager",
24    avatar: "https://avatar.iran.liara.run/public/22",
25    icon: <FaApple className="size-5" />
26  },
27  {
28    id: 3,
29    quote: "As a developer, I appreciate the clean code structure.",
30    highlight: "Easy to customize",
31    fullText: "and the documentation is comprehensive. The performance optimizations are noticeable in production.",
32    author: "Marcus Rodriguez",
33    role: "Frontend Developer",
34    avatar: "https://avatar.iran.liara.run/public/23",
35    icon: <FaLinkedin className="size-5" />
36  }
37];
38
39export default function AnimatedStackedTestimonialsCarousel() {
40  return (
41    <section className="h-full w-screen overflow-hidden py-32">
42      <div className="container mx-auto flex w-full max-w-6xl flex-col items-center justify-center">
43        <div className="relative flex h-full flex-col items-center justify-center gap-8 text-center">
44          <h2 className="w-full text-5xl font-semibold tracking-tighter text-primary/80 lg:text-6xl">
45            What our Users said
46          </h2>
47        </div>
48
49        <div className="mt-24 flex items-center justify-center gap-6">
50          {testimonials.map((testimonial) => (
51            <div
52              key={testimonial.id}
53              className="flex min-h-60 w-80 flex-col justify-between rounded-3xl border border-neutral-200 bg-white p-6 shadow-xl shadow-black/[0.1] dark:border-white/[0.1] dark:bg-black dark:shadow-white/[0.05] h-full"
54            >
55              <div className="font-normal text-neutral-700 dark:text-neutral-200">
56                <p className="text-sm">
57                  {testimonial.quote}{" "}
58                  <span className="bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500">
59                    {testimonial.highlight}
60                  </span>{" "}
61                  {testimonial.fullText}
62                </p>
63              </div>
64              <div className="flex items-center gap-2 mt-5">
65                <Avatar className="size-10">
66                  <AvatarImage className="border-2 border-emerald-500/50 rounded-full" src={testimonial.avatar} alt={testimonial.author} />
67                </Avatar>
68                <div className="flex flex-col items-start gap-0 tracking-tight leading-tight">
69                  <p className="text-primary/80 font-semibold!">{testimonial.author}</p>
70                  <p className="text-xs text-muted-foreground/80 -mt-2">{testimonial.role}</p>
71                </div>
72              </div>
73            </div>
74          ))}
75        </div>
76      </div>
77    </section>
78  );
79}
80