reui-blocks/blocks/pricing13.tsx

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

const formatPrice = (value: string | number) =>
  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;

interface Pricing13Props {
  className?: string;
}

const Pricing13 = ({ className }: Pricing13Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="rounded-xl border border-border py-6 md:py-8 lg:pt-16 lg:pb-12">
          <div className="px-6 md:px-8 lg:px-12">
            <div className="mb-8 md:mb-10 md:flex md:justify-between lg:mb-9">
              <div className="lg:w-2/3">
                <h1 className="mb-4 text-xl font-medium md:text-3xl lg:text-xl">
                  افزونه‌های تکمیلی
                </h1>
                <p className="text-xs text-muted-foreground md:text-sm lg:text-base">
                  با افزودن ماژول‌های تکمیلی، امکانات حساب خود را متناسب با
                  نیازتان گسترش دهید.
                </p>
              </div>
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                alt="افزونه‌ها"
                className="hidden size-24 md:block lg:size-32"
              />
            </div>
            <div className="flex flex-col gap-x-8 gap-y-3 xl:flex-row">
              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
                  افزونه ۱
                </h2>
                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
                    امکانات پایه برای شروع سریع و بدون پیچیدگی.
                  </p>
                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
                    <p>
                      <span className="font-medium lg:text-xl">
                        {formatPrice(90000)}
                      </span>
                      <span className="text-xs font-medium text-muted-foreground">
                        {" "}
                        در ماه
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
                  افزونه ۲
                </h2>
                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
                    ابزارهای پیشرفته برای تیم‌های در حال رشد.
                  </p>
                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
                    <p>
                      <span className="font-medium lg:text-xl">
                        {formatPrice(990000)}
                      </span>
                      <span className="text-xs font-medium text-muted-foreground">
                        {" "}
                        در ماه
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
                <h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
                  افزونه ۳
                </h2>
                <div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
                  <p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
                    راهکار سفارشی برای سازمان‌های بزرگ.
                  </p>
                  <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
                    <p>
                      <span className="font-medium lg:text-xl">
                        گفتگو با فروش
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing13 };