reui-blocks/blocks/testimonial11.tsx

import { Star } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    id: "testimonial-1",
    text: "در یک آخر هفته کل سیستم طراحی را منتقل کردیم. کیفیت کامپوننت‌ها فوق‌العاده است و ماه‌ها از کار تیم ما کاسته. به‌شدت توصیه می‌کنم.",
    name: "سارا احمدی",
    company: "Vercel",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.webp",
  },
  {
    id: "testimonial-2",
    text: "بالاخره کتابخانه‌ای که با شما نمی‌جنگد. فقط کار می‌کند.",
    name: "مازیار رضایی",
    company: "Stripe",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
  },
  {
    id: "testimonial-3",
    text: "پیش‌فرض‌های دسترس‌پذیری فوق‌العاده‌اند. پس از مهاجرت، در اولین بار ممیزی استاندارد دسترس‌پذیری را با موفقیت پشت سر گذاشتیم؛ چنین تجربه‌ای تا به حال نداشتیم.",
    name: "مهسا نوری",
    company: "Shopify",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
  },
  {
    id: "testimonial-4",
    text: "زمان توسعه فرانت‌اند را ۴۰٪ کاهش دادیم. سیستم تم‌بندی فوق‌العاده انعطاف‌پذیر است.",
    name: "امیرحسین قاسمی",
    company: "Linear",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
  },
  {
    id: "testimonial-5",
    text: "صفحه فرود را در دو روز به‌جای دو هفته تحویل دادیم. بلاک‌ها از پیش برای production آماده‌اند.",
    name: "نیلوفر حسینی",
    company: "Supabase",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar6.webp",
  },
  {
    id: "testimonial-6",
    text: "به‌عنوان بنیان‌گذار تنها، این نزدیک‌ترین چیز به داشتن یک تیم طراحی کامل است. هر کامپوننت صیقلی و هدفمند به نظر می‌رسد. ده‌ها کتابخانه رابط کاربری امتحان کردم و هیچ‌کدام به این نزدیک نیست.",
    name: "کاوه مرادی",
    company: "Resend",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
  },
  {
    id: "testimonial-7",
    text: "طراحان ما به‌خاطر زیبایی دوستش دارند. مهندسان ما به‌خاطر ترکیب‌پذیری. کم پیش می‌آید هر دو را در یک کتابخانه ببینید.",
    name: "مهتاب شریفی",
    company: "Clerk",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
  },
  {
    id: "testimonial-8",
    text: "کل داشبورد سامانه ابری را با این کامپوننت‌ها در کمتر از یک ماه بازسازی کردیم. فقط پشتیبانی حالت تاریک هفته‌ها از ما وقت گرفت. مشتریان فوراً بهبود کیفیت را متوجه شدند.",
    name: "علی رحمانی",
    company: "Planetscale",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
  },
  {
    id: "testimonial-9",
    text: "بهترین سرمایه‌گذاری سال ما. در اولین اسپرینت خودش را جبران کرد.",
    name: "سمیرا جعفری",
    company: "Railway",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
  },
];

interface Testimonial11Props {
  className?: string;
}

const Testimonial11 = ({ className }: Testimonial11Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative bg-muted bg-[linear-gradient(var(--muted)_0%,var(--background)_100%)] py-32",
        className,
      )}
    >
      <div className="container pb-16">
        <div className="flex flex-col items-start gap-12 sm:flex-row sm:items-center sm:justify-between sm:gap-32">
          <div className="flex flex-1 flex-col items-start text-start">
            <h2 className="my-6 text-xl font-semibold text-pretty lg:text-xl">
              مورد علاقه توسعه‌دهندگان در سراسر جهان
            </h2>
            <p className="max-w-3xl text-muted-foreground lg:text-xl">
              هزاران تیم با کامپوننت‌های ما سریع‌تر تحویل می‌دهند. این‌ها حرف
              آن‌هاست.
            </p>
          </div>
          <div className="block shrink-0 flex-row gap-12 sm:flex sm:flex-col lg:flex-row lg:gap-24">
            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
              <img
                src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
                alt="لوگوی Astro"
                className="mb-4 h-6 dark:invert"
              />
              <div className="flex items-center">
                <div className="mr-4 shrink-0 text-sm font-semibold">
                  ۴٫۸ / ۵
                </div>
                <div className="flex items-center gap-0.5">
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                </div>
              </div>
            </div>
            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
              <img
                src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
                alt="لوگوی میزبانی ابری"
                className="mb-6 h-4 dark:invert"
              />
              <div className="flex items-center">
                <div className="mr-4 shrink-0 text-sm font-semibold">
                  ۴٫۸ / ۵
                </div>
                <div className="flex items-center gap-0.5">
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container mt-16 sm:mt-0">
        <div className="w-full columns-1 gap-4 sm:columns-2 lg:columns-3 lg:gap-6 [&>div:nth-child(n+5)]:hidden sm:[&>div:nth-child(n+5)]:inline-block sm:[&>div:nth-child(n+9)]:hidden lg:[&>div:nth-child(n+9)]:inline-block">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className="mb-4 inline-block w-full rounded-lg border border-border bg-background p-6 lg:mb-6"
            >
              <div className="flex flex-col">
                <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
                  &ldquo;{testimonial.text}&rdquo;
                </p>
                <div className="flex items-center gap-1 md:gap-2">
                  <Avatar className="size-8 md:size-10">
                    <AvatarImage src={testimonial.avatar} />
                    <AvatarFallback>{testimonial.name}</AvatarFallback>
                  </Avatar>
                  <div className="text-start">
                    <p className="text-xs font-medium">{testimonial.name}</p>
                    <p className="text-xs text-muted-foreground">
                      {testimonial.company}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="pointer-events-none absolute bottom-0 left-0 hidden w-full sm:block sm:h-[16.875rem] sm:bg-[linear-gradient(transparent_0%,hsl(var(--accent))_100%)] lg:h-56"></div>
    </section>
  );
};

export { Testimonial11 };