reui-blocks/blocks/testimonial21.tsx

import { Handshake } from "lucide-react";
import React from "react";

import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      alt: "لوگوی Astro",
      width: 96.75,
      height: 36,
    },
    quote:
      "تیم ما در Zerostatic به خودکارسازی بسیار وابسته است و این اپ آن را به سطح دیگری برده. انگار یک دستیار مجازی درون گردش کارم تعبیه شده.",
    author: {
      name: "امیرحسین قاسمی",
      role: "طراح محصول، Zerostatic",
      image:
        "/block-media/shadcnblocks/block/avatar-8.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
      alt: "لوگوی طراحی رابط",
      width: 90.75,
      height: 36,
    },
    quote:
      "به‌ویژه یکپارچه‌سازی بی‌نقص تقویم و قابلیت‌های پیشرفته مدیریت وظایف را دوست دارم که همه را هم‌راستا و منظم نگه می‌دارد.",
    author: {
      name: "نیلوفر حسینی",
      role: "مدیر محصول، یادداشت‌برداری",
      image:
        "/block-media/shadcnblocks/block/avatar-3.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/sketch-wordmark.svg",
      alt: "لوگوی طراحی برداری",
      width: 100.75,
      height: 36,
    },
    quote:
      "به اپ بهره‌وری نیاز داشتیم که با نیازهای در حال تغییر تیم ما رشد کند؛ این انتخاب عالی بود. ابزارهای خودکارسازی ساعت‌ها از ما وقت گرفت.",
    author: {
      name: "امیر محمدی",
      role: "مدیر عملیات، پیام‌رسان تیمی",
      image:
        "/block-media/shadcnblocks/block/avatar-2.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
      alt: "لوگوی استایل‌دهی مدرن",
      width: 110.75,
      height: 36,
    },
    quote:
      "این پلتفرم برای مدیریت پروژه در تیم‌های توزیع‌شده بی‌نهایت ارزشمند بود. یکپارچه‌سازی با ابزارهای موجود، راه‌اندازی را آسان کرد.",
    author: {
      name: "علی رحمانی",
      role: "مدیر مهندسی، مخزن کد",
      image:
        "/block-media/shadcnblocks/block/avatar-4.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
      alt: "لوگوی میزبانی ابری",
      width: 96.75,
      height: 36,
    },
    quote:
      "به‌عنوان طراح، سادگی بصری و جذابیت این اپ را قدردانی می‌کنم. مدیریت وظایف را ساده می‌کند بدون اینکه از قابلیت‌های قدرتمند بگذرد.",
    author: {
      name: "رؤیا کاظمی",
      role: "سرپرست طراحی، طراحی رابط",
      image:
        "/block-media/shadcnblocks/block/avatar-7.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
      alt: "لوگوی پایگاه داده ابری",
      width: 96.75,
      height: 36,
    },
    quote:
      "یادآورهای هوشمند و زمان‌بندی خودکار تیم را متمرکز و منظم نگه می‌دارد. قابلیت‌های همکاری هم برای ما بسیار مفید بوده.",
    author: {
      name: "پارسا موسوی",
      role: "استراتژیست محتوا، Loom",
      image:
        "/block-media/shadcnblocks/block/avatar-6.webp",
    },
  },
];

interface Testimonial21Props {
  className?: string;
}

const Testimonial21 = ({ className }: Testimonial21Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <Handshake className="size-4" />
            <span>خیلی دوستش داریم</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            کارشناسان صنعت چه می‌گویند
          </h2>
          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            مورد اعتماد متخصصان شرکت‌های پیشرو فناوری
          </p>
        </div>
      </div>

      <div className="container mt-10 grid gap-8 sm:grid-cols-2 md:mt-14 lg:grid-cols-3">
        {testimonials.map((testimonial, index) => (
          <Card
            key={index}
            className="flex flex-col gap-6 rounded-md bg-background p-6 shadow-sm"
          >
            <img
              src={testimonial.logo.src}
              alt={testimonial.logo.alt}
              width={testimonial.logo.width}
              height={testimonial.logo.height}
              className="object-contain dark:invert"
            />

            <blockquote className="text-muted-foreground-subtle text-lg font-normal italic">{`«${testimonial.quote}»`}</blockquote>

            <div className="mt-auto flex items-center gap-4">
              <img
                src={testimonial.author.image}
                alt={`تصویر ${testimonial.author.name}`}
                width={48}
                height={48}
                className="rounded-full object-cover"
              />
              <div>
                <p className="text-lg tracking-[-0.36px]">
                  {testimonial.author.name}
                </p>
                <p className="text-muted-foreground">
                  {testimonial.author.role}
                </p>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container h-full w-full border-x"></div>
      </div>
    </section>
  );
};

export { Testimonial21 };