reui-blocks/blocks/feature343.tsx

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

interface DashedLineProps {
  orientation?: "horizontal" | "vertical";
  className?: string;
}

const DashedLine = ({
  orientation = "horizontal",
  className,
}: DashedLineProps) => {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "relative text-muted-foreground",
        isHorizontal ? "h-px w-full" : "h-full w-px",
        className,
      )}
    >
      <div
        className={cn(
          isHorizontal
            ? [
                "h-px w-full",
                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

interface FeatureImage {
  src: string;
  alt: string;
}

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  images: FeatureImage[];
  isIconGrid?: boolean;
}

const DEFAULT_TOP_ITEMS: FeatureItem[] = [
  {
    id: "templates",
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-1.svg",
        alt: "داشبورد SEO",
      },
    ],
  },
  {
    id: "stack",
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/logos/jira.svg",
        alt: "تحلیل کلمات کلیدی",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/notion.svg",
        alt: "گزارش رتبه جستجو",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/asana.svg",
        alt: "داشبورد SEO",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/drive.svg",
        alt: "تحلیل کلمات کلیدی",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/excel.svg",
        alt: "گزارش رتبه جستجو",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/word.svg",
        alt: "داشبورد SEO",
      },
    ],
    isIconGrid: true,
  },
];

const DEFAULT_BOTTOM_ITEMS: FeatureItem[] = [
  {
    id: "archive",
    title: "ممیزی فنی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-2.svg",
        alt: "تحلیل کلمات کلیدی",
      },
    ],
  },
  {
    id: "discussions",
    title: "ردیابی رتبه",
    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-3.svg",
        alt: "گزارش رتبه جستجو",
      },
    ],
  },
  {
    id: "notifications",
    title: "بهینه‌سازی محتوا",
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-4.svg",
        alt: "داشبورد SEO",
      },
    ],
  },
];

interface Feature343Props {
  heading?: string;
  topItems?: FeatureItem[];
  bottomItems?: FeatureItem[];
  className?: string;
}

const Feature343 = ({
  heading = "رتبه کلمات کلیدی را پیگیری کنید",
  topItems = DEFAULT_TOP_ITEMS,
  bottomItems = DEFAULT_BOTTOM_ITEMS,
  className,
}: Feature343Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden pb-28 lg:pb-32", className)}
    >
      <div>
        <h2 className="container text-center text-3xl tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
          {heading}
        </h2>

        <div className="mt-8 md:mt-12 lg:mt-20">
          <DashedLine
            orientation="horizontal"
            className="container scale-x-105"
          />

          <div className="relative container flex max-md:flex-col">
            {topItems.map((item, i) => (
              <FeatureCard
                key={item.id}
                item={item}
                isLast={i === topItems.length - 1}
              />
            ))}
          </div>
          <DashedLine
            orientation="horizontal"
            className="container max-w-7xl scale-x-110"
          />

          <div className="relative container grid max-w-7xl md:grid-cols-3">
            {bottomItems.map((item, i) => (
              <FeatureCard
                key={item.id}
                item={item}
                isLast={i === bottomItems.length - 1}
                className="md:pb-0"
              />
            ))}
          </div>
        </div>
        <DashedLine
          orientation="horizontal"
          className="container max-w-7xl scale-x-110"
        />
      </div>
    </section>
  );
};

interface FeatureCardProps {
  item: FeatureItem;
  isLast?: boolean;
  className?: string;
}

const FeatureCard = ({ item, isLast, className }: FeatureCardProps) => {
  return (
    <div
      className={cn(
        "relative flex flex-1 flex-col justify-between px-0 py-6 text-start md:px-6 md:py-8",
        className,
      )}
    >
      <div className="mb-5 text-balance md:mb-8">
        <h3 className="inline font-semibold">{item.title} </h3>
        <span className="text-pretty text-muted-foreground">
          {item.description}
        </span>
      </div>

      {item.isIconGrid ? (
        <div className="relative overflow-hidden">
          <div className="flex flex-wrap gap-4">
            {item.images.map((image) => (
              <div
                key={image.src}
                className="grid aspect-square size-14 place-items-center rounded-xl bg-background p-2 lg:size-16"
              >
                <img
                  src={image.src}
                  alt={image.alt}
                  className="size-8 object-contain lg:size-10"
                />
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4">
          {item.images.map((image) => (
            <img
              key={image.src}
              src={image.src}
              alt={image.alt}
              className="h-auto max-h-64 w-auto max-w-full object-contain object-start-top"
            />
          ))}
        </div>
      )}

      {!isLast && (
        <>
          <DashedLine
            orientation="vertical"
            className="absolute top-0 end-0 max-md:hidden"
          />
          <DashedLine
            orientation="horizontal"
            className="absolute inset-x-0 bottom-0 md:hidden"
          />
        </>
      )}
    </div>
  );
};

export { Feature343 };