121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCircle2, OctagonX } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const rows = [
|
|
{
|
|
label: "راهاندازی",
|
|
lightbox: "۱–۲ روز",
|
|
freelance: "۳۰ روز",
|
|
},
|
|
{
|
|
label: "محدوده قیمت",
|
|
lightbox: "۱۰٪",
|
|
freelance: "۵۰–۶۰٪",
|
|
},
|
|
{
|
|
label: "امتیاز کیفیت",
|
|
lightbox: "۳٪ برتر",
|
|
freelance: "متغیر",
|
|
},
|
|
{
|
|
label: "احراز هویت",
|
|
lightbox: "فرآیند احراز هویت چندمرحلهای",
|
|
freelance: "بررسی پایه",
|
|
hasIcon: true,
|
|
},
|
|
{
|
|
label: "انطباقپذیری",
|
|
lightbox: "کاملاً انعطافپذیر",
|
|
freelance: "محدود",
|
|
hasIcon: true,
|
|
},
|
|
{
|
|
label: "پشتیبانی",
|
|
lightbox: "تیم اختصاصی ۲۴/۷",
|
|
freelance: "ساعات محدود",
|
|
hasIcon: true,
|
|
},
|
|
];
|
|
|
|
interface Compare1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Compare1 = ({ className }: Compare1Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("py-32 text-start", className)}
|
|
>
|
|
<div className="container">
|
|
<h1 className="mb-8 text-3xl font-bold md:mb-12 md:text-2xll">
|
|
مقایسه راهکارها
|
|
</h1>
|
|
<div className="-me-4 overflow-x-auto">
|
|
<div className="min-w-[672px] overflow-hidden">
|
|
<div className="grid grid-cols-3 [&>:last-child_div]:rounded-b-md [&>div:nth-last-child(-n+3)]:rounded-b-md [&>div:nth-last-child(-n+3)]:border-b-0">
|
|
<div className="flex items-center p-3 text-base font-medium md:p-4 md:text-lg">
|
|
ویژگی
|
|
</div>
|
|
<div className="flex items-center rounded-t-md bg-green-100 p-3 md:p-4">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg"
|
|
alt="لوگوی سرویس اول"
|
|
className="h-7 md:h-8"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center rounded-t-md bg-red-100 p-3 md:p-4">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
|
|
alt="لوگوی سرویس دوم"
|
|
className="h-7 md:h-8"
|
|
/>
|
|
</div>
|
|
{rows.map((row, idx) => (
|
|
<React.Fragment key={idx}>
|
|
<div className="flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg">
|
|
{row.label}
|
|
</div>
|
|
<div className="border-b bg-green-50 p-3 md:p-6">
|
|
<div className="flex items-center gap-2">
|
|
{row.hasIcon && (
|
|
<CheckCircle2
|
|
className="h-5 w-5 shrink-0 text-green-600"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
<span className="text-base md:text-lg">
|
|
{row.lightbox}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="border-b bg-red-50 p-3 md:p-6">
|
|
<div className="flex items-center gap-2">
|
|
{row.hasIcon && (
|
|
<OctagonX
|
|
className="h-5 w-5 shrink-0 text-red-600"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
<span className="text-base md:text-lg">
|
|
{row.freelance}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Compare1 };
|