reui-blocks/blocks/testimonial9.tsx

"use client";

import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

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

const testimonials = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "این کتابخانه کیفیت محصولات ما را متحول کرد. تیم ما با اطمینان بیشتری سریع‌تر تحویل می‌دهد و دیگر نگران جزئیات رابط کاربری نیستیم. پیشنهاد می‌کنم هر تیم محصولی آن را امتحان کند.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فناوری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    content:
      "معماری کامپوننت‌ها تمیز و قابل نگهداری است. یکپارچه‌سازی با پروژه موجود بدون دردسر انجام شد و تیم فنی از روز اول راضی بود.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر عملیات",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "سرعت iterate کردن روی ایده‌ها چند برابر شد. محصول را زودتر به دست کاربران می‌رسانیم و بازخورد را سریع‌تر اعمال می‌کنیم. این برای تیم ما تحول‌آفرین بوده است.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست فنی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "بسیاری از موارد خاص از پیش پوشش داده شده‌اند. تیم من دیگر وقتش را صرف رفع باگ‌های تکراری رابط کاربری نمی‌کند و روی چیزهای مهم‌تر تمرکز دارد.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
  },
  {
    name: "رؤیا کاظمی",
    role: "طراح",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content:
      "فاصله‌گذاری، تایپوگرافی و رنگ‌ها با سیستم طراحی ما هم‌خوان است. تحویل به توسعه بدون اصطکاک انجام می‌شود و همکاری بین طراحی و توسعه هرگز این‌قدر روان نبوده.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
  },
  {
    name: "پارسا موسوی",
    role: "توسعه‌دهنده",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "تجربه توسعه عالی است. تکمیل خودکار درست کار می‌کند، propها معنادارند و رفتار کامپوننت‌ها قابل پیش‌بینی است. برای هر تیم توسعه‌ای توصیه می‌کنم.",
    link: "#",
    icon: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
  },
];

interface Testimonial9Props {
  className?: string;
}

const Testimonial9 = ({ className }: Testimonial9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6">
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
            مورد اعتماد بیش از ۱۰۰۰ مشتری
          </h2>
          <p className="text-muted-foreground lg:text-lg">
            مشتریان راضی در سراسر دنیا از محصولات ما استفاده می‌کنند
          </p>
        </div>
        <div className="mt-14 w-full">
          <ResponsiveMasonry
            columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}
          >
            <Masonry gutter="20px" columnsCount={3}>
              {testimonials.map((testimonial, idx) => {
                return (
                  <Card key={idx} className="p-5">
                    <div className="flex justify-between">
                      <div className="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>
                      <a href={testimonial.link}>
                        <img
                          alt="منبع نظر"
                          src={testimonial.icon}
                          className="size-4"
                        />
                      </a>
                    </div>
                    <div className="mt-8 leading-7 text-foreground/70">
                      <q>{testimonial.content}</q>
                    </div>
                  </Card>
                );
              })}
            </Masonry>
          </ResponsiveMasonry>
        </div>
      </div>
    </section>
  );
};

export { Testimonial9 };