reui-blocks/blocks/case-studies3.tsx

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

import { cn } from "@/lib/utils";

interface CaseStudyItem {
  logo: string;
  company: string;
  logoAlt?: string;
  tags: string;
  title: string;
  subtitle: string;
  image: string;
  imageAlt?: string;
  link?: string;
}

interface CaseStudies3Props {
  featuredCasestudy?: CaseStudyItem;
  casestudies?: CaseStudyItem[];
  className?: string;
}

const defaultFeaturedCasestudy: CaseStudyItem = {
  logo: "/block-media/shadcnblocks/block/block-1.svg",
  company: "Acme",
  tags: "هوش مصنوعی / راهکارهای سازمانی",
  title: "اتوماسیون فرآیندهای سازمانی با هوش مصنوعی",
  subtitle: "کاهش ۶۰٪ زمان فعالیت‌های دستی با AI",
  image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  imageAlt: "نمای داشبورد اتوماسیون جریان کار",
  link: "https://ShadcnBlocks",
};

const defaultCasestudies: CaseStudyItem[] = [
  {
    logo: "/block-media/shadcnblocks/block/block-2.svg",
    company: "Super",
    tags: "مهاجرت داده / راهکارهای نرم‌افزاری",
    title: "انتقال امن داده‌ها با حفظ یکپارچگی اطلاعات",
    subtitle: "مهاجرت بدون اختلال از زیرساخت قدیمی به ابر",
    image: "",
    link: "https://ShadcnBlocks",
  },
  {
    logo: "/block-media/shadcnblocks/block/block-3.svg",
    company: "Advent",
    tags: "هوش مصنوعی / راهکارهای داده",
    title: "تحلیل پیش‌بینانه برای تصمیم‌گیری هوشمند",
    subtitle: "پیش‌بینی روندهای بازار با دقت ۹۲٪",
    image: "",
    link: "https://ShadcnBlocks",
  },
];

const CaseStudyLink = () => (
  <div className="flex items-center gap-2 font-medium">
    مشاهده گزارش موفقیت
    <MoveRight className="h-4 w-4 transition-transform duration-500 ease-out group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
  </div>
);

const CaseStudies3 = ({
  featuredCasestudy = defaultFeaturedCasestudy,
  casestudies = defaultCasestudies,
  className,
}: CaseStudies3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="border border-border">
          <a
            href={featuredCasestudy.link || "#"}
            className="group grid gap-4 overflow-hidden px-6 transition-colors duration-500 ease-out hover:bg-muted/40 lg:grid-cols-2 xl:px-28"
          >
            <div className="flex flex-col justify-between gap-4 pt-8 text-start md:pt-16 lg:pb-16">
              <div className="flex items-center gap-2 text-xl font-medium">
                <img
                  src={featuredCasestudy.logo}
                  alt={featuredCasestudy.logoAlt ?? `لوگوی ${featuredCasestudy.company}`}
                  className="h-9"
                />
                {featuredCasestudy.company}
              </div>
              <div>
                <span className="text-xs text-muted-foreground sm:text-sm">
                  {featuredCasestudy.tags}
                </span>
                <h2 className="mt-4 mb-5 text-xl font-semibold text-balance sm:text-3xl sm:leading-10">
                  {featuredCasestudy.title}
                  <span className="font-medium text-primary/50 transition-colors duration-500 ease-out group-hover:text-primary/70">
                    {" "}
                    {featuredCasestudy.subtitle}
                  </span>
                </h2>
                <CaseStudyLink />
              </div>
            </div>
            <div className="relative isolate py-16">
              <div className="relative isolate h-full border border-border bg-background p-2">
                <div className="h-full overflow-hidden">
                  <img
                    src={featuredCasestudy.image}
                    alt={
                      featuredCasestudy.imageAlt ??
                      `تصویر مطالعه موردی ${featuredCasestudy.company}`
                    }
                    className="aspect-14/9 h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                  />
                </div>
              </div>
            </div>
          </a>
          <div className="flex border-t border-border">
            <div className="hidden w-28 shrink-0 bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:10px_10px] opacity-15 xl:block"></div>
            <div className="grid lg:grid-cols-2">
              {casestudies.map((item, idx) => (
                <a
                  key={item.company}
                  href={item.link || "#"}
                  className={cn(
                    "group flex flex-col justify-between gap-12 border-border bg-background px-6 py-8 text-start transition-colors duration-500 ease-out hover:bg-muted/40 md:py-16 lg:pb-16 xl:gap-16",
                    idx === 0
                      ? "xl:border-s xl:ps-8"
                      : "border-t lg:border-t-0 lg:border-s xl:border-e xl:ps-8",
                  )}
                >
                  <div className="flex items-center gap-2 text-xl font-medium">
                    <img
                      src={item.logo}
                      alt={item.logoAlt ?? `لوگوی ${item.company}`}
                      className="h-9"
                    />
                    {item.company}
                  </div>
                  <div>
                    <span className="text-xs text-muted-foreground sm:text-sm">
                      {item.tags}
                    </span>
                    <h2 className="mt-4 mb-5 text-xl font-semibold text-balance sm:text-3xl sm:leading-10">
                      {item.title}
                      <span className="font-medium text-primary/50 transition-colors duration-500 ease-out group-hover:text-primary/70">
                        {" "}
                        {item.subtitle}
                      </span>
                    </h2>
                    <CaseStudyLink />
                  </div>
                </a>
              ))}
            </div>
            <div className="hidden w-28 shrink-0 bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:10px_10px] opacity-15 xl:block"></div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CaseStudies3 };