reui-blocks/blocks/compare2.tsx

import { CheckCircle2, CircleMinus } from "lucide-react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Compare2Props {
  className?: string;
}

const Compare2 = ({ className }: Compare2Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted/50 py-32 text-start", className)}
    >
      <div className="container">
        <div className="text-center">
          <h1 className="mb-6 text-xl font-semibold md:text-2xll">
            مقایسه دو راهکار برای انتخابی آگاهانه
                                </h1>
          <p className="mx-auto max-w-4xl text-muted-foreground md:text-xl">
            این مقایسه به شما کمک می‌کند تفاوت قابلیت‌ها، هزینه‌ها، مقیاس‌پذیری و تجربه کاربری دو راهکار را بررسی کرده و متناسب با نیاز کسب‌وکار خود تصمیم بگیرید.
                                </p>
        </div>
        <div className="mt-28">
          <div className="mx-auto grid max-w-3xl gap-6 md:grid-cols-2">
            <div className="rounded-xl border bg-background p-6 shadow">
              <span className="flex items-center justify-center gap-2 font-medium">
                <img
                  src="/block-media/shadcnblocks/block/block-1.svg"
                  alt="لوگوی محصول الف"
                  className="h-7"
                />
                محصول الف
              </span>
              <Separator className="my-6" />
              <ul className="space-y-2">
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  طرح پایه موجود
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  کاربران نامحدود
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  قابلیت‌های پیشرفته
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  برنامه همکاری
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  رویدادهای زنده
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  دسترسی به جامعه کاربری
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  پشتیبانی ویژه
                </li>
              </ul>
            </div>
            <div className="rounded-xl bg-border/40 p-6">
              <span className="flex items-center justify-center gap-2 font-medium">
                <img
                  src="/block-media/shadcnblocks/block/block-2.svg"
                  alt="لوگوی محصول ب"
                  className="h-7"
                />
                محصول ب
              </span>
              <Separator className="my-6" />
              <ul className="space-y-2">
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  طرح پایه موجود
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  کاربران نامحدود
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2
                    className="h-5 w-5 shrink-0 text-emerald-700"
                    aria-hidden="true"
                  />
                  قابلیت‌های پایه
                </li>
                <li className="flex items-center gap-2 text-muted-foreground line-through">
                  <CircleMinus
                    className="h-5 w-5 shrink-0 opacity-50"
                    aria-hidden="true"
                  />
                  برنامه همکاری
                </li>
                <li className="flex items-center gap-2 text-muted-foreground line-through">
                  <CircleMinus
                    className="h-5 w-5 shrink-0 opacity-50"
                    aria-hidden="true"
                  />
                  رویدادهای زنده
                </li>
                <li className="flex items-center gap-2 text-muted-foreground line-through">
                  <CircleMinus
                    className="h-5 w-5 shrink-0 opacity-50"
                    aria-hidden="true"
                  />
                  دسترسی به جامعه کاربری
                </li>
                <li className="flex items-center gap-2 text-muted-foreground line-through">
                  <CircleMinus
                    className="h-5 w-5 shrink-0 opacity-50"
                    aria-hidden="true"
                  />
                  پشتیبانی ویژه
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="mx-auto mt-16 max-w-3xl">
          <h2 className="mb-4 text-3xl font-semibold">
            چه زمانی انتخاب راهکار ساده‌تر منطقی است؟
                                </h2>
          <p className="leading-6 text-muted-foreground md:text-lg">
            اگر تیم کوچکی دارید و نیازهای شما محدود است، یک راهکار پایه می‌تواند هزینه اولیه را کاهش دهد. اما برای رشد سازمان، معمولاً به امکانات پیشرفته‌تر و قابلیت توسعه نیاز خواهید داشت.
                                </p>
          <h2 className="mt-16 mb-4 text-3xl font-semibold">
            جمع‌بندی مقایسه
                                </h2>
          <p className="leading-6 text-muted-foreground md:text-lg">
            پیش از انتخاب، علاوه بر قیمت، عواملی مانند توسعه‌پذیری، امنیت، کیفیت پشتیبانی، امکان یکپارچه‌سازی و هزینه نگهداری در بلندمدت را نیز ارزیابی کنید.
                                </p>
        </div>
      </div>
    </section>
  );
};

export { Compare2 };