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