reui-blocks/blocks/testimonial25.tsx

import { ArrowLeft } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const items = [
  {
    quote: "Mainline را به‌جای CRM استفاده می‌کنیم و هنوز هم جواب می‌دهد!",
    author: "نیلوفر حسینی",
    role: "مدیر محصول",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/amy-chase.webp",
  },
  {
    quote: "توانستم ۸۰٪ تیمم را با ربات‌های Mainline جایگزین کنم.",
    author: "مازیار رضایی",
    role: "مهندس ارشد",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/jonas-kotara.webp",
  },
  {
    quote:
      "مسیر بنیان‌گذاری به‌اندازه کافی سخت است؛ داشتن یک اپ مدیریت محصول عالی کمک بزرگی است.",
    author: "کاوه مرادی",
    role: "بنیان‌گذار",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/kevin-yam.webp",
  },
  {
    quote: "می‌توانم از این ابزار به‌جای مدیر محصولم استفاده کنم.",
    author: "رضا کریمی",
    role: "بنیان‌گذار",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/kundo-marta.webp",
  },
  {
    quote: "Mainline را به‌جای CRM استفاده می‌کنیم و هنوز هم جواب می‌دهد!",
    author: "نیلوفر حسینی",
    role: "مدیر محصول",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/amy-chase.webp",
  },
  {
    quote: "توانستم ۸۰٪ تیمم را با ربات‌های Mainline جایگزین کنم.",
    author: "مازیار رضایی",
    role: "مهندس ارشد",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/jonas-kotara.webp",
  },
  {
    quote:
      "مسیر بنیان‌گذاری به‌اندازه کافی سخت است؛ داشتن یک اپ مدیریت محصول عالی کمک بزرگی است.",
    author: "کاوه مرادی",
    role: "بنیان‌گذار",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/kevin-yam.webp",
  },
  {
    quote: "می‌توانم از این ابزار به‌جای مدیر محصولم استفاده کنم.",
    author: "رضا کریمی",
    role: "بنیان‌گذار",
    company: "ری یو آی Finance",
    image:
      "/block-media/shadcnblocks/block/mainline/testimonials/kundo-marta.webp",
  },
];

interface Testimonial25Props {
  className?: string;
}

const Testimonial25 = ({ className }: Testimonial25Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="space-y-4">
          <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
            مورد اعتماد سازندگان محصول
          </h2>
          <p className="max-w-md leading-snug font-medium text-muted-foreground">
            ری یو آی بر پایه عادت‌هایی ساخته شده که موفق‌ترین تیم‌های محصول را
            می‌سازد: تمرکز، سرعت و همیشه تلاش برای کیفیت بالا.
          </p>
          <Button variant="outline" className="">
            مطالعات موردی مشتریان را بخوانید <ArrowLeft className="size-4" />
          </Button>
        </div>

        <div className="relative mt-8 md:mt-12 lg:mt-20">
          <Carousel
            opts={{
              align: "start",
              loop: true,
            }}
            className="w-full"
          >
            <CarouselContent className="">
              {items.map((testimonial, index) => (
                <CarouselItem
                  key={index}
                  className="grow basis-4/5 md:basis-3/5 lg:basis-[28%] xl:basis-1/4"
                >
                  <Card className="h-full overflow-hidden border-none bg-muted">
                    <CardContent className="flex h-full flex-col p-0">
                      <img
                        src={testimonial.image}
                        alt={testimonial.author}
                        className="h-[288px] object-cover object-top lg:h-[328px]"
                      />
                      <div className="flex flex-1 flex-col justify-between gap-10 p-6">
                        <blockquote className="text-lg leading-none! font-medium text-primary md:text-xl">
                          {testimonial.quote}
                        </blockquote>
                        <div className="space-y-0.5">
                          <div className="text-sm font-semibold">
                            {testimonial.author}
                          </div>
                          <div className="text-xs text-muted-foreground">
                            {testimonial.role}، {testimonial.company}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
            <div className="mt-8 flex gap-3">
              <CarouselPrevious className="static size-10 translate-x-0 translate-y-0" />
              <CarouselNext className="static size-10 translate-x-0 translate-y-0" />
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Testimonial25 };