reui-blocks/blocks/pricing12.tsx

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

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

const featuredAddons = [
  {
    id: "addon-1",
    title: "افزونه ۱",
    description: "امکانات تکمیلی برای گسترش قابلیت‌های پایه حساب کاربری.",
    price: 199000,
  },
  {
    id: "addon-2",
    title: "افزونه ۲",
    description: "ابزارهای پیشرفته برای تیم‌های در حال رشد.",
    price: 199000,
  },
  {
    id: "addon-3",
    title: "افزونه ۳",
    description: "یکپارچه‌سازی و گزارش‌دهی حرفه‌ای برای کسب‌وکارها.",
    price: 199000,
  },
];

const otherAddons = [
  {
    id: "addon-4",
    title: "افزونه ۴",
    description: "افزودن فضای ذخیره‌سازی اضافه به حساب شما.",
    price: 90000,
    image: "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    id: "addon-5",
    title: "افزونه ۵",
    description: "دسترسی به قالب‌ها و کامپوننت‌های آماده.",
    price: 190000,
    image: "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    id: "addon-6",
    title: "افزونه ۶",
    description: "پشتیبانی اولویت‌دار و پاسخ‌گویی سریع‌تر.",
    price: 190000,
    priceFootnote: "این یک یادداشت توضیحی است.",
    image: "/block-media/shadcnblocks/block/block-4.svg",
  },
];

interface Pricing12Props {
  className?: string;
}

const Pricing12 = ({ className }: Pricing12Props) => {
  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">
              {featuredAddons.map((addon) => (
                <div
                  key={addon.id}
                  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">
                    {addon.title}
                  </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">
                      {addon.description}
                    </p>
                    <div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
                      <p>
                        <span className="font-medium lg:text-xl">
                          {formatPrice(addon.price)}
                        </span>
                        <span className="text-xs font-medium text-muted-foreground">
                          {" "}
                          در ماه
                        </span>
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="mt-6 border-t border-border md:mt-8 lg:mt-10">
            <div className="divide-y divide-border px-6 md:px-8 lg:px-12">
              {otherAddons.map((addon) => (
                <div
                  key={addon.id}
                  className="flex flex-col gap-4 py-6 last:pb-0 md:flex-row md:items-center md:justify-between md:gap-x-12 lg:py-10"
                >
                  <div className="flex items-center md:max-w-md md:gap-4 lg:max-w-full lg:gap-6">
                    <img
                      src={addon.image}
                      alt={addon.title}
                      className="hidden shrink-0 md:block md:size-16 lg:size-20"
                    />
                    <div className="max-w-md space-y-1 lg:max-w-md lg:space-y-2">
                      <p className="mb-1.5 text-lg font-medium md:text-xl lg:mb-2 lg:text-xl">
                        {addon.title}
                      </p>
                      <p className="text-xs text-muted-foreground md:text-xs lg:text-base">
                        {addon.description}
                      </p>
                    </div>
                  </div>
                  <div className="shrink-0 md:self-end md:text-end">
                    <span className="text-xl font-medium md:text-3xl lg:text-xl">
                      {formatPrice(addon.price)}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {" "}
                      در ماه
                    </span>
                    {addon.priceFootnote && (
                      <div className="mt-1 text-xs font-medium text-muted-foreground md:max-w-[8rem] lg:max-w-full">
                        * {addon.priceFootnote}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing12 };