reui-blocks/blocks/compare4.tsx

import { ArrowRight } from "lucide-react";

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

interface DataItem {
  title: string;
  brick: { value: string; unit?: string; desc: string };
  ghost: { value: string; unit?: string; desc: string };
}

interface Compare4Props {
  className?: string;
}

const DATA: DataItem[] = [
  {
    title: "نیازمندی سرور",
    brick: {
      value: "۲۵۰۰",
      unit: "GB",
      desc: "سرورهای اختصاصی پرقدرت",
    },
    ghost: {
      value: "۲۵۰",
      unit: "GB",
      desc: "زیرساخت بهینه‌شده برای ابر",
    },
  },
  {
    title: "اندازه تیم (تقریبی)",
    brick: { value: "۲۰", desc: "تیم توسعه داخلی کامل" },
    ghost: { value: "۵", desc: "تیم اصلی با گردش‌کار خودکار" },
  },
  {
    title: "زمان توسعه",
    brick: { value: "۴۸", unit: "هفته", desc: "چرخه توسعه سنتی" },
    ghost: { value: "۸", unit: "هفته", desc: "چارچوب استقرار سریع" },
  },
  {
    title: "راه‌اندازی اولیه",
    brick: {
      value: "۱٫۲",
      unit: "M$",
      desc: "هزینه زیرساخت سازمانی",
    },
    ghost: { value: "۴۰", unit: "k$*", desc: "مدل پرداخت متناسب با رشد" },
  },
  {
    title: "بازه بازگشت سرمایه",
    brick: { value: "۴", unit: "سال", desc: "بازه زمانی استاندارد سازمانی" },
    ghost: { value: "۸", unit: "ماه", desc: "ورود سریع‌تر به بازار" },
  },
];

const Compare4 = ({ className }: Compare4Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted/30 py-32 text-start", className)}
    >
      <div className="container grid grid-cols-4 gap-x-4 gap-y-8 md:grid-cols-8 lg:grid-cols-12">
        <div className="col-span-4 mb-8 max-w-3xl md:col-span-8 md:mb-12 lg:col-span-10 lg:col-start-2 lg:mb-16">
          <h2 className="mb-4 text-center text-3xl font-bold sm:text-start md:text-xl lg:text-2xll">
            مقایسه زیرساخت ابری و محلی
          </h2>
        </div>

        <div className="col-span-4 px-4 md:col-span-8 lg:col-span-10 lg:col-start-2">
          <div className="grid grid-cols-4 items-center gap-4 md:grid-cols-8">
            <div className="col-span-4 md:col-span-2"></div>
            <div className="col-span-2 ms-0 md:col-span-3 md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
              <h4 className="text-xs font-bold tracking-wider text-muted-foreground md:text-sm">
                سنتی
              </h4>
            </div>
            <div className="col-span-2 ms-0 md:col-span-3 md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
              <h4 className="text-xs font-bold tracking-wider md:text-sm">
                بومی ابری
              </h4>
            </div>
          </div>
        </div>

        <div className="col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2">
          {DATA.map((row, index) => (
            <div
              key={index}
              className="group border-t px-4 transition-colors first:rounded-t-xl first:border-t-0 last:rounded-b-xl hover:bg-muted/50"
            >
              <div className="grid grid-cols-4 items-start gap-4 py-6 md:grid-cols-8 md:py-8">
                <h3 className="col-span-4 mt-2 text-base font-bold md:col-span-2 md:text-lg">
                  {row.title}
                </h3>

                <div className="col-span-2 flex flex-col md:col-span-3">
                  <div className="ms-0 transition-colors group-hover:text-foreground md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
                    <p className="mb-1 flex items-baseline text-xl font-bold text-foreground md:mb-2 md:text-2xll">
                      {row.brick.value}
                      {row.brick.unit && (
                        <sup className="ms-0.5 text-xs text-foreground md:text-sm">
                          {row.brick.unit}
                        </sup>
                      )}
                    </p>
                    <p className="text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal">
                      {row.brick.desc}
                    </p>
                  </div>
                </div>

                <div className="col-span-2 flex flex-col md:col-span-3">
                  <div className="ms-0 transition-colors group-hover:text-accent-foreground md:ms-32 lg:ms-40 xl:ms-48 2xl:ms-56">
                    <p className="mb-1 flex items-baseline text-xl font-bold text-foreground md:mb-2 md:text-2xll">
                      {row.ghost.value}
                      {row.ghost.unit && (
                        <sup className="ms-0.5 text-xs text-foreground md:text-sm">
                          {row.ghost.unit}
                        </sup>
                      )}
                    </p>
                    <p className="text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal">
                      {row.ghost.desc}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2">
          <div className="flex flex-col space-y-4">
            <div className="space-y-2">
              <p className="text-xs text-muted-foreground md:text-sm">
                * بسته به نیازها و پیچیدگی پروژه متغیر است
              </p>
              <p className="text-xs text-muted-foreground md:text-sm">
                ^ زمان استقرار بسته به نیازهای یکپارچه‌سازی ممکن است تغییر کند
              </p>
              <p className="text-xs text-muted-foreground md:text-sm">
                # هزینه‌های اضافی برای قابلیت‌های ویژه ممکن است اعمال شود
              </p>
            </div>
            <div className="flex justify-start">
              <Button className="rounded-full px-8 transition-transform hover:scale-105">
                شروع همکاری
                                              <ArrowRight
                  className="ms-2 h-4 w-4 rtl:rotate-180"
                  aria-hidden="true"
                />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compare4 };