reui-blocks/blocks/testimonial27.tsx

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

const TESTIMONIALS = [
  {
    quote:
      "بیش از همه دوست دارم همه‌چیز یک‌جا باشد؛ مسیریابی را ساده می‌کند و ۱۰ برابر شهودی‌تر از Chili Piper است!",
    link: "#",
    author: {
      name: "سارا احمدی",
      image:
        "/block-media/shadcnblocks/block/avatar-1.webp",
      role: "مدیر فناوری، ARC",
    },
    company: {
      logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      name: "ARC",
    },
  },
  {
    quote:
      "این اپ بی‌نقص در عملیات GTM ما ادغام شده و نیاز به ابزار جداگانه و اتصالات پیچیده را حذف کرده.",
    link: "#",
    author: {
      name: "کاوه مرادی",
      image:
        "/block-media/shadcnblocks/block/avatar-2.webp",
      role: "مدیرعامل و بنیان‌گذار، Descript",
    },
    company: {
      logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      name: "Descript",
    },
  },
];

const CASE_STUDIES = [
  {
    title: "چگونه کارایی GTM را ۱۰ برابر کردیم",
    link: "#",
    stats: [
      {
        number: "۱۰x",
        text: "افزایش کارایی GTM",
      },
    ],
    author: {
      name: "امیر محمدی",
      image:
        "/block-media/shadcnblocks/block/avatar-8.webp",
      role: "مدیر بازاریابی",
    },
    background:
      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
  },
  {
    title: "چگونه ری یو آی زمان پاسخ به لید را ۸۰٪ کاهش داد",
    link: "#",
    stats: [
      {
        number: "۸۰٪",
        text: "پاسخ سریع‌تر به لید",
      },
    ],
    author: {
      name: "نیلوفر حسینی",
      image:
        "/block-media/shadcnblocks/block/avatar-7.webp",
      role: "مدیر فروش",
    },
    background:
      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
  },
  {
    title: "از صفر تا ۷ میلیون دلار در قیف فروش",
    link: "#",
    stats: [
      {
        number: "$۷M",
        text: "قیف فروش inbound تولیدشده",
      },
    ],
    author: {
      name: "مهسا نوری",
      image:
        "/block-media/shadcnblocks/block/avatar-1.webp",
      role: "مدیر بازاریابی",
    },
    background:
      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
  },
];

interface AuthorProps {
  image: string;
  name: string;
  role: string;
}

const Author = ({ image, name, role }: AuthorProps) => {
  return (
    <div className="flex items-center gap-3">
      <Avatar className="size-10 rounded-xl bg-background/50">
        <AvatarImage src={image} alt={name} />
        <AvatarFallback>{name}</AvatarFallback>
      </Avatar>
      <div className="flex flex-col gap-0.5">
        <div className="text-sm font-medium text-foreground">{name}</div>
        <div className="text-sm text-muted-foreground">{role}</div>
      </div>
    </div>
  );
};

interface Testimonial27Props {
  className?: string;
}

const Testimonial27 = ({ className }: Testimonial27Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col gap-6">
        <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
          <div className="flex flex-col gap-4">
            <h2 className="text-xl font-bold tracking-tight md:text-2xll">
              مردم چه فکر می‌کنند
            </h2>
            <div className="max-w-[28.75rem]">
              <p className="text-lg text-muted-foreground md:text-xl">
                گام‌به‌بازار را با مسیریابی هوشمندتر، intent قابل اجرا و
                زمان‌بندی سریع‌تر متحول کنید.
              </p>
            </div>
          </div>
        </div>

        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
          {TESTIMONIALS.map((testimonial, index) => (
            <div
              key={index}
              className="flex h-full flex-col justify-between gap-8 rounded-2xl bg-muted p-6"
            >
              <div className="flex flex-col gap-6">
                <p className="text-xl leading-relaxed font-medium text-foreground">
                  {testimonial.quote}
                </p>
              </div>
              <div className="flex items-center justify-between">
                <Author
                  image={testimonial.author.image}
                  role={testimonial.author.role}
                  name={testimonial.author.name}
                />
                <div className="w-24">
                  <img
                    className="w-full object-contain object-center opacity-80"
                    src={testimonial.company.logo}
                    alt={`لوگوی ${testimonial.company.name}`}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-3">
          {CASE_STUDIES.map((caseStudy, index) => (
            <a
              key={index}
              href={caseStudy.link}
              className="group relative flex aspect-square flex-col justify-between gap-8 overflow-hidden rounded-2xl bg-muted p-8 transition-all duration-300 hover:bg-foreground hover:shadow-lg"
            >
              <div
                className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20 transition-all duration-300 group-hover:scale-105 group-hover:opacity-10"
                style={{ backgroundImage: `url(${caseStudy.background})` }}
              />
              <div className="relative flex flex-col gap-3">
                <div className="text-2xll font-bold tracking-tight text-foreground transition-colors duration-300 group-hover:text-background">
                  {caseStudy.stats[0].number}
                </div>
                <p className="text-sm font-medium text-muted-foreground transition-colors duration-300 group-hover:text-background/80">
                  {caseStudy.stats[0].text}
                </p>
              </div>
              <div className="relative flex flex-col gap-6">
                <p className="text-xl leading-tight font-semibold text-foreground transition-colors duration-300 group-hover:text-background">
                  {caseStudy.title}
                </p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Testimonial27 };