reui-blocks/blocks/feature158.tsx

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

const integrations = [
  {
    id: "1",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    text: "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
    imageAlt: "صف اولویت سرنخ‌ها",
  },
  {
    id: "2",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    text: "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
    imageAlt: "داشبورد عملکرد فروش",
  },
  {
    id: "3",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    text: "الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.",
    imageAlt: "نمودار نرخ تبدیل",
  },
];

interface Feature158Props {
  className?: string;
}

const Feature158 = ({ className }: Feature158Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full min-w-0 max-w-full overflow-x-clip py-32",
        className,
      )}
    >
      <div className="container w-full min-w-0 max-w-full">
        <div className="mb-12 flex w-full min-w-0 flex-col items-center">
          <h4 className="mb-4 text-center text-muted-foreground/50">
            همکاری فروش و بازاریابی
          </h4>
          <h1 className="mb-6 max-w-full text-center text-xl font-semibold text-balance wrap-break-word sm:text-2xll lg:text-[56px]">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h1>
          <h3 className="max-w-full text-center text-xl text-pretty wrap-break-word">
            اولویت‌بندی سرنخ
          </h3>
        </div>
        <div className="flex w-full min-w-0 flex-col items-center">
          <div className="mb-16 flex w-full min-w-0 flex-col items-stretch justify-between gap-12 md:flex-row md:items-start">
            {integrations.map((item) => (
              <div
                key={item.id}
                className="min-w-0 w-full max-w-full flex-1 text-center"
              >
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="mb-8 aspect-[1.6] w-full max-w-full rounded-2xl border border-dashed object-cover"
                />
                <p className="max-w-full text-sm text-pretty wrap-break-word">
                  {item.text}
                </p>
              </div>
            ))}
          </div>
          <Button className="h-auto max-w-full shrink whitespace-normal px-4 py-2 text-center wrap-break-word">
            درخواست دمو
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Feature158 };