reui-blocks/blocks/feature222.tsx

"use client";
import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface StatItem {
  id: string;
  number: string;
  text: string;
}

interface CardData {
  id: string;
  title: string;
  link: string;
  background: string;
  imageAlt: string;
  stats: StatItem[];
}

const LIST: CardData[] = [
  {
    id: "techcorp-ai",
    title: "تحلیل کانال",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
    imageAlt: "تحلیل عملکرد کمپین",
    stats: [
      {
        id: "processing-speed",
        number: "کمپین",
        text: "اتصال به شبکه‌های اجتماعی",
      },
    ],
  },
  {
    id: "greentech-carbon",
    title: "اتوماسیون ایمیل",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-o9F8dRoSucM-unsplash.jpg",
    imageAlt: "نمودار ROI",
    stats: [
      {
        id: "carbon-emissions",
        number: "رشد برند",
        text: "تحلیل رفتار صفحه فرود",
      },
    ],
  },
  {
    id: "finserve-blockchain",
    title: "A/B تست",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-K1W9OjEgacI-unsplash.jpg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    stats: [
      {
        id: "fraud-cases",
        number: "بازاریابی دیجیتال",
        text: "برچسب‌گذاری خودکار سرنخ",
      },
    ],
  },
  {
    id: "eduworld-vr",
    title: "تقویم محتوا",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-gDmVqxZt1hg-unsplash.jpg",
    imageAlt: "تحلیل عملکرد کمپین",
    stats: [
      {
        id: "student-engagement",
        number: "جذب مخاطب",
        text: "داشبورد عملکرد محتوا",
      },
    ],
  },
  {
    id: "healthplus-telemedicine",
    title: "ردیابی UTM",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-sutfgh5DNIU-unsplash.jpg",
    imageAlt: "نمودار ROI",
    stats: [
      {
        id: "patient-satisfaction",
        number: "کمپین",
        text: "گزارش هزینه هر سرنخ",
      },
    ],
  },
  {
    id: "ecolands-land",
    title: "گزارش ROI",
    link: "#",
    background:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-ZXLGP2Qh3Mo-unsplash.jpg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    stats: [
      {
        id: "land-productivity",
        number: "رشد برند",
        text: "ردیابی مسیر تبدیل",
      },
    ],
  },
];

const Card = ({ link, background, title, imageAlt, stats }: CardData) => {
  return (
    <a
      href={link}
      aria-label={title}
      style={{ backgroundImage: `url(${background})` }}
      className="before:content-[] relative min-h-auto w-full overflow-hidden rounded-lg bg-black/80 bg-cover bg-center bg-no-repeat p-5 transition-all duration-300 before:absolute before:start-0 before:top-0 before:z-10 before:block before:size-full before:bg-black/50 before:transition-all before:duration-300 hover:before:bg-black/30 sm:aspect-square md:aspect-auto md:min-h-120"
    >
      <span className="sr-only">{imageAlt}</span>
      <div className="relative z-20 flex size-full flex-col justify-between gap-20 text-start md:gap-16">
        <div className="text-xl leading-[1.2] font-normal text-balance text-white md:text-3xl">
          {title}
        </div>
        <div className="flex w-full flex-col gap-8">
          <div className="flex gap-8 text-white">
            {stats.map((item) => (
              <div key={item.id} className="flex flex-col gap-1">
                <div className="text-[1.15rem] md:text-xl">{item.number}</div>
                <div className="text-sm text-pretty opacity-80">{item.text}</div>
              </div>
            ))}
          </div>
          <Button variant="outline" size="sm" className="w-fit gap-2">
            بازاریابی دیجیتال
            <ArrowRight className="size-3.5 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </a>
  );
};

interface Feature222Props {
  className?: string;
}

const Feature222 = ({ className }: Feature222Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("w-full min-w-0 py-32", className)}>
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
          {LIST.map((item) => (
            <Card key={item.id} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature222 };