reui-blocks/blocks/feature171.tsx

import { ArrowDownLeft } from "lucide-react";

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

const items = [
  {
    title: "تحلیل باخت معامله",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "صف اولویت سرنخ‌ها",
  },
  {
    title: "هدف‌گذاری تیمی",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد عملکرد فروش",
  },
  {
    title: "اتوماسیون پیگیری",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "نمودار نرخ تبدیل",
  },
];

interface Feature171Props {
  className?: string;
}

const Feature171 = ({ className }: Feature171Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("w-full max-w-full overflow-visible bg-secondary py-32", className)}
    >
      <div className="container min-w-0 w-full">
        <div className="relative flex h-8 w-full items-center justify-center">
          <DashedLine className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-muted-foreground" />
          <span className="relative z-10 bg-secondary px-3 text-sm font-medium tracking-wide text-muted-foreground">
            چرخه فروش
          </span>
        </div>

        <div className="mx-auto mt-10 grid w-full max-w-5xl gap-3 text-start lg:mt-24 lg:grid-cols-2">
          <h2 className="text-3xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="leading-snug font-medium text-pretty text-muted-foreground">
            چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند
            گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
          </p>
        </div>

        <Card className="mt-8 w-full gap-0! overflow-hidden rounded-2xl py-0! shadow-none ring-foreground/10 md:mt-12 lg:mt-20">
          <CardContent className="flex w-full p-0! max-lg:flex-col">
            {items.map((item, i) => (
              <div
                key={item.title}
                className="flex min-w-0 flex-1 max-lg:flex-col"
              >
                <div className="flex min-w-0 flex-1 flex-col ps-6 pt-6 lg:ps-8 lg:pt-8">
                  <div className="relative min-w-0 w-full ps-4">
                    <img
                      src={item.image}
                      alt={item.imageAlt}
                      className="aspect-[1.28/1] h-auto w-full max-w-full rounded-ss-xl object-cover"
                    />
                    <div className="pointer-events-none absolute inset-0 rounded-ss-xl bg-linear-to-t from-card via-transparent to-transparent" />
                  </div>
                  <a
                    href="#"
                    className="group flex items-center justify-between gap-4 py-6 pe-6 ps-0 lg:py-8 lg:pe-8"
                  >
                    <h3 className="text-xl leading-tight font-semibold tracking-tight">
                      {item.title}
                    </h3>
                    <ArrowDownLeft className="size-6 shrink-0 transition-transform group-hover:translate-x-[-2px] group-hover:translate-y-[2px]" />
                  </a>
                </div>
                {i < items.length - 1 ? (
                  <>
                    <div className="relative hidden w-px shrink-0 self-stretch lg:block">
                      <DashedLine
                        orientation="vertical"
                        className="absolute inset-y-0 start-0 h-full"
                      />
                    </div>
                    <div className="relative block w-full shrink-0 py-2 lg:hidden">
                      <DashedLine orientation="horizontal" />
                    </div>
                  </>
                ) : null}
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { Feature171 };

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

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

  return (
    <div
      className={cn(
        "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_20%,black_80%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_20%,black_80%,transparent)]",
              ],
        )}
      />
    </div>
  );
};