reui-blocks/blocks/testimonial7.tsx

"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { useRef } from "react";

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

const testimonials1 = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
    content:
      "این کتابخانه کامپوننت روش ساخت محصولات ما را متحول کرد. کل داشبورد را در نصف زمان معمول تحویل دادیم.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فناوری",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
    content:
      "توجه به دسترس‌پذیری و عملکرد قابل تحسین است. امتیاز ابزار تحلیل عملکرد ما به‌طور محسوسی بهبود یافت.",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر محصول",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.webp",
    content:
      "بالاخره یک سیستم طراحی که توسعه‌دهندگان واقعاً دوست دارند. مستندات روشن و مقادیر پیش‌فرض منطقی‌اند.",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست فنی",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
    content:
      "تعادل عالی بین پیش‌فرض‌های مشخص و انعطاف سفارشی‌سازی برقرار می‌کند.",
  },
  {
    name: "رؤیا کاظمی",
    role: "طراح ارشد",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
    content:
      "کامپوننت‌ها با طرح‌های طراحی رابط ما هم‌خوان‌اند. تحویل از طراحی به توسعه هرگز این‌قدر روان نبوده.",
  },
  {
    name: "پارسا موسوی",
    role: "توسعه‌دهنده فول‌استک",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
    content:
      "پشتیبانی زبان نوع‌ایمن عالی است. تکمیل خودکار درست کار می‌کند و خطاها را پیش از رسیدن به محیط تولید می‌گیرم.",
  },
];

const testimonials2 = [
  {
    name: "مهسا نوری",
    role: "مهندس تجربه کاربری",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
    content:
      "این کامپوننت‌ها موارد خاصی را پوشش می‌دهند که از وجودشان بی‌خبر بودم. حالت تاریک و راست‌به‌چپ از پیش آماده‌اند.",
  },
  {
    name: "علی رحمانی",
    role: "مدیر مهندسی",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar7.webp",
    content:
      "سرعت تیم ما به‌طور محسوسی افزایش یافت. زمان کمتر برای رابط کاربری یعنی زمان بیشتر برای منطق کسب‌وکار.",
  },
  {
    name: "امیرحسین قاسمی",
    role: "توسعه‌دهنده فرانت‌اند",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
    content:
      "سفارشی‌سازی کامپوننت‌ها بدون جنگ با کتابخانه آسان است. ترکیب‌پذیری عالی دارند.",
  },
  {
    name: "مهتاب شریفی",
    role: "طراح محصول",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
    content:
      "یکنواختی بصری در همه کامپوننت‌ها قابل توجه است. اپلیکیشن ما بالاخره یکدست به نظر می‌رسد.",
  },
  {
    name: "کاوه مرادی",
    role: "بنیان‌گذار استارتاپ",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
    content:
      "با این کامپوننت‌ها نسخه اولیه محصول را در زمان رکورد راه‌اندازی کردیم. ماه‌ها از زمان توسعه صرفه‌جویی شد.",
  },
  {
    name: "سمیرا جعفری",
    role: "مهندس DevOps",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
    content:
      "حتی از منظر زیرساخت، حجم بسته معقول است و عملکرد پایدار است.",
  },
];

interface Testimonial7Props {
  className?: string;
}

const Testimonial7 = ({ className }: Testimonial7Props) => {
  const plugin1 = useRef(
    AutoScroll({
      startDelay: 500,
      speed: 0.7,
    }),
  );

  const plugin2 = useRef(
    AutoScroll({
      startDelay: 500,
      speed: 0.7,
      direction: "backward",
    }),
  );
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-6">
        <Badge variant="outline">نظرات مشتریان</Badge>
        <h2 className="text-center text-3xl lg:text-2xll">
          با مشتریان راضی ما آشنا شوید
        </h2>
        <p className="text-center text-muted-foreground lg:text-lg">
          تجربه تیم‌هایی را بخوانید که با کامپوننت‌های ما گردش کار خود را
          متحول کرده‌اند.
        </p>
      </div>
      <div className="lg:container">
        <div className="mt-16 space-y-6 [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]">
          <Carousel
            opts={{
              loop: true,
            }}
            plugins={[plugin1.current]}
            onMouseLeave={() => plugin1.current.play()}
          >
            <CarouselContent className="-ml-4">
              {testimonials1.map((testimonial, index) => (
                <CarouselItem key={index} className="basis-auto py-px pl-4">
                  <Card className="max-w-96 gap-2 p-6 select-none">
                    <div className="mb-4 flex gap-4">
                      <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>
                    <q className="text-muted-foreground">
                      {testimonial.content}
                    </q>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <Carousel
            opts={{
              loop: true,
            }}
            plugins={[plugin2.current]}
            onMouseLeave={() => plugin2.current.play()}
          >
            <CarouselContent className="-ml-4">
              {testimonials2.map((testimonial, index) => (
                <CarouselItem key={index} className="basis-auto py-px pl-4">
                  <Card className="max-w-96 p-6 select-none">
                    <div className="mb-4 flex gap-4">
                      <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>
                    <q className="text-muted-foreground">
                      {testimonial.content}
                    </q>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Testimonial7 };