reui-blocks/blocks/testimonial19.tsx

"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { ChevronRight, Star, Zap } from "lucide-react";
import { useRef } from "react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "این پلتفرم نحوه مدیریت پروژه‌های ما را متحول کرد. فوق‌العاده کاربرپسند و کارآمد است.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فناوری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    content:
      "یکپارچه‌سازی و عملکرد بی‌نقصش مرا تحت تأثیر قرار داد. عملیات فنی ما بسیار روان‌تر شده.",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر عملیات",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "مدیریت کارهای روزمره هرگز این‌قدر آسان نبوده. رابط کاربری شهودی است و وقت زیادی برای ما ذخیره می‌کند.",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست فنی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "ابزارهای ارائه‌شده گردش کار و همکاری تیم را به‌طور محسوسی بهبود داد. شدیداً توصیه می‌کنم!",
  },
  {
    name: "رؤیا کاظمی",
    role: "طراح",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "از منظر طراحی، انعطاف و سهولت استفاده فوق‌العاده است. برای تیم ما به ابزاری ضروری تبدیل شده.",
  },
  {
    name: "پارسا موسوی",
    role: "توسعه‌دهنده",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "به‌عنوان توسعه‌دهنده، قابلیت‌های قدرتمند و سادگی را قدردانی می‌کنم. فرایندهای ما را به‌طور چشمگیری ساده کرده.",
  },
];

interface Testimonial19Props {
  className?: string;
}

const Testimonial19 = ({ className }: Testimonial19Props) => {
  const plugin = useRef(
    AutoScroll({
      startDelay: 500,
      speed: 0.7,
    }),
  );

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-4">
        <div className="flex items-center gap-1 text-sm font-semibold">
          <Zap className="h-6 w-auto fill-primary" />
          امتیاز ۵ ستاره از بیش از ۱۰۰۰ مشتری
        </div>
        <h2 className="text-center text-3xl font-semibold lg:text-xl">
          با مشتریان راضی ما آشنا شوید
        </h2>
        <p className="text-center text-muted-foreground lg:text-lg">
          به شبکه‌ای جهانی از رهبران فکری و توسعه‌دهندگان محصول بپیوندید
        </p>
        <a href="#" className="flex items-center gap-1 font-semibold">
          مشاهده همه نظرات
          <ChevronRight className="mt-0.5 h-4 w-auto" />
        </a>
      </div>
      <div className="lg:container">
        <div className="mt-16 space-y-4">
          <Carousel
            opts={{
              loop: true,
            }}
            plugins={[plugin.current]}
            onMouseLeave={() => plugin.current.play()}
            className="relative before:absolute before:top-0 before:bottom-0 before:left-0 before:z-10 before:w-36 before:bg-linear-to-r before:from-background before:to-transparent after:absolute after:top-0 after:right-0 after:bottom-0 after:z-10 after:w-36 after:bg-linear-to-l after:from-background after:to-transparent"
          >
            <CarouselContent>
              {testimonials.map((testimonial, index) => (
                <CarouselItem key={index} className="basis-auto">
                  <Card className="max-w-96 p-6 select-none">
                    <div className="flex justify-between">
                      <div className="mb-4 flex gap-4">
                        <Avatar className="size-14 rounded-full ring-1 ring-input">
                          <AvatarImage
                            src={testimonial.avatar}
                            alt={testimonial.name}
                          />
                        </Avatar>
                        <div>
                          <p className="font-medium">{testimonial.name}</p>
                          <p className="text-sm text-muted-foreground">
                            {testimonial.role}
                          </p>
                        </div>
                      </div>
                      <div className="flex gap-1">
                        <Star className="size-5 fill-amber-500 text-amber-500" />
                        <Star className="size-5 fill-amber-500 text-amber-500" />
                        <Star className="size-5 fill-amber-500 text-amber-500" />
                        <Star className="size-5 fill-amber-500 text-amber-500" />
                        <Star className="size-5 fill-amber-500 text-amber-500" />
                      </div>
                    </div>
                    <q className="leading-7 text-muted-foreground">
                      {testimonial.content}
                    </q>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Testimonial19 };