reui-blocks/blocks/compare3.tsx

import {
  BadgePercent,
  CheckCircle,
  CircleMinus,
  Code2,
  Headset,
  LineChart,
  Users,
} from "lucide-react";

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

interface Compare3Props {
  className?: string;
}

const Compare3 = ({ className }: Compare3Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <div className="flex flex-col items-center gap-4">
          <Badge variant="outline">مقایسه راهکارها</Badge>
          <h2 className="mx-auto max-w-2xl text-center text-xl font-semibold sm:text-2xll">
            مقایسه قابلیت‌های محصول با رقبا
                                </h2>
          <p className="mx-auto mt-2 max-w-2xl text-center text-muted-foreground">
            بررسی تفاوت قابلیت‌ها، تجربه کاربری و ارزش تجاری در مقایسه با راهکارهای مشابه.
                                </p>
        </div>
        <div className="-mx-7 overflow-x-auto">
          <div className="mt-14 grid min-w-2xl grid-cols-3">
            <div className="border-b border-border p-5"></div>
            <div className="flex flex-col items-center gap-2 rounded-t-2xl border-b border-border bg-muted p-5">
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                alt="لوگوی ری یو آی"
                className="size-8"
              />
              <p className="text-lg font-semibold">ری یو آی</p>
              <p className="mt-1 text-center text-sm text-muted-foreground">
                طراحی‌شده بر اساس نیازهای واقعی کاربران
                                            </p>
            </div>
            <div className="flex flex-col items-center gap-2 border-b border-border p-5">
              <img
                src="/block-media/shadcnblocks/block/block-2.svg"
                alt="لوگوی Biz"
                className="size-8"
              />
              <p className="text-lg font-semibold">Biz</p>
              <p className="mt-1 text-center text-sm text-muted-foreground">
                راهکار متداول بازار
                                            </p>
            </div>
            <div className="flex items-center gap-2 border-b border-border p-5">
              <Users className="size-4 shrink-0" aria-hidden="true" />
              <span className="font-semibold">نمای کلی تیم</span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">
                داشبورد جامع
              </span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
              <span className="text-xs text-muted-foreground">
                فقط نمای کلی پایه
              </span>
            </div>
            <div className="flex items-center gap-2 border-b border-border p-5">
              <BadgePercent className="size-4 shrink-0" aria-hidden="true" />
              <span className="font-semibold">برندسازی سفارشی</span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">
                سفارشی‌سازی کامل
              </span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">
                گزینه‌های محدود
              </span>
            </div>
            <div className="flex items-center gap-2 border-b border-border p-5">
              <Code2 className="size-4 shrink-0" aria-hidden="true" />
              <span className="font-semibold">دسترسی اتصال هوشمند</span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">اتصال هوشمند کامل و مستند</span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
              <span className="text-xs text-muted-foreground">بدون اتصال هوشمند</span>
            </div>
            <div className="flex items-center gap-2 border-b border-border p-5">
              <LineChart className="size-4 shrink-0" aria-hidden="true" />
              <span className="font-semibold">تحلیل‌های پیشرفته</span>
              <Badge variant="secondary">به‌زودی</Badge>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border bg-muted p-5">
              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
              <span className="text-xs text-muted-foreground">
                در نقشه راه توسعه
                                            </span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-b border-border p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">
                گزارش‌گیری پایه
              </span>
            </div>
            <div className="flex items-center gap-2 border-border p-5">
              <Headset className="size-4 shrink-0" aria-hidden="true" />
              <span className="font-semibold">پشتیبانی مشتری</span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 border-border bg-muted p-5">
              <CheckCircle
                className="size-5 text-green-600"
                aria-hidden="true"
              />
              <span className="text-xs text-muted-foreground">
                پشتیبانی تخصصی ۲۴ ساعته
                                            </span>
            </div>
            <div className="flex flex-col items-center justify-center gap-2 p-5">
              <CircleMinus className="size-5 text-red-600" aria-hidden="true" />
              <span className="text-xs text-muted-foreground">
                فقط پشتیبانی ایمیلی
              </span>
            </div>
            <div className="border-border p-5"></div>
            <div className="flex items-center justify-center gap-2 rounded-b-2xl border-border bg-muted p-5">
              <Button className="w-full">درخواست دمو</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compare3 };