reui-blocks/blocks/testimonial6.tsx

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} 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:
      "سرعت iterate کردن روی ایده‌ها چند برابر شد. محصول را زودتر به دست کاربران می‌رسانیم و بازخورد را سریع‌تر اعمال می‌کنیم.",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست فنی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "بسیاری از موارد خاص از پیش پوشش داده شده‌اند. تیم من دیگر وقتش را صرف رفع باگ‌های تکراری رابط کاربری نمی‌کند.",
  },
  {
    name: "رؤیا کاظمی",
    role: "طراح",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "فاصله‌گذاری، تایپوگرافی و رنگ‌ها با سیستم طراحی ما هم‌خوان است. تحویل به توسعه بدون اصطکاک انجام می‌شود.",
  },
  {
    name: "پارسا موسوی",
    role: "توسعه‌دهنده",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "تجربه توسعه عالی است. تکمیل خودکار درست کار می‌کند، propها معنادارند و رفتار کامپوننت‌ها قابل پیش‌بینی است.",
  },
];

interface Testimonial6Props {
  className?: string;
}

const Testimonial6 = ({ className }: Testimonial6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Carousel className="w-full">
          <div className="mb-8 flex justify-between px-1 lg:mb-12">
            <h2 className="text-xl font-semibold lg:text-2xll">
              چرا مشتریان ما را دوست دارند
            </h2>
            <div className="flex items-center gap-2">
              <CarouselPrevious className="static translate-y-0" />
              <CarouselNext className="static translate-y-0" />
            </div>
          </div>
          <CarouselContent>
            {testimonials.map((testimonial, idx) => (
              <CarouselItem
                key={idx}
                className="basis-full md:basis-1/2 lg:basis-1/3"
              >
                <div className="h-full p-1">
                  <div className="flex h-full flex-col justify-between rounded-lg border p-6">
                    <q className="leading-7 text-foreground/70">
                      {testimonial.content}
                    </q>
                    <div className="mt-6 flex gap-4 leading-5">
                      <Avatar className="size-9 rounded-full ring-1 ring-input">
                        <AvatarImage
                          src={testimonial.avatar}
                          alt={testimonial.name}
                        />
                      </Avatar>
                      <div className="text-sm">
                        <p className="font-medium">{testimonial.name}</p>
                        <p className="text-muted-foreground">
                          {testimonial.role}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Testimonial6 };