reui-blocks/blocks/feature163.tsx

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

interface Feature163Props {
  className?: string;
}

const Feature163 = ({ className }: Feature163Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 grid-rows-4 gap-4 lg:grid-cols-5 lg:grid-rows-2">
          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-3">
            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
              <span className="font-semibold">درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.</span> مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
            </div>
            <div className="ms-10 flex-1 basis-auto rounded-ts-[36px] rounded-ee-[36px] p-1 pe-0 pb-0">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="دستیار هوش مصنوعی"
                className="h-full w-full rounded-ts-[36px] rounded-ee-[36px] object-cover object-bottom transition-all duration-500"
              />
            </div>
          </div>
          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-2">
            <div className="max-w-md p-10 text-start text-lg text-pretty">
              <span className="font-semibold">مشتریان در معرض ریزش را زودتر شناسایی کنید.</span> متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.
            </div>
            <div className="mx-20 flex-1 basis-auto rounded-t-[36px] p-1 pb-0">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="پیشنهادهای هوشمند"
                className="h-full w-full rounded-t-[36px] object-cover object-bottom transition-all duration-500"
              />
            </div>
          </div>
          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-2">
            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
              <span className="font-semibold">بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.</span> درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.
            </div>
            <div className="me-10 flex-1 basis-auto rounded-te-[36px] rounded-es-[36px] p-1 pb-0 ps-0">
              <img
                src="/block-media/shadcnblocks/block/placeholder-3.svg"
                alt="تحلیل با AI"
                className="h-full w-full rounded-te-[36px] rounded-es-[36px] object-cover object-bottom transition-all duration-500"
              />
            </div>
          </div>
          <div className="col-span-1 row-span-1 flex flex-col rounded-[36px] border border-gray-200 lg:col-span-3">
            <div className="max-w-md px-10 pt-10 pb-16 text-start text-lg text-pretty">
              <span className="font-semibold">مشتریان در معرض ریزش را زودتر شناسایی کنید.</span>{" "}
              یادداشت‌ها و پیش‌نویس‌ها را ذخیره کنید تا هیچ جزئیاتی در گردش کار
              از قلم نیفتد.
            </div>
            <div className="mx-10 mb-10 flex-1 basis-auto rounded-[36px] p-1">
              <img
                src="/block-media/shadcnblocks/block/placeholder-4.svg"
                alt="دستیار هوش مصنوعی"
                className="h-full w-full rounded-[36px] object-cover object-bottom transition-all duration-500"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature163 };