103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import { Calendar } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface DataItem {
|
||
id: number;
|
||
number: string;
|
||
title: string;
|
||
description: string;
|
||
image: string;
|
||
imageAlt: string;
|
||
}
|
||
|
||
const DATA: DataItem[] = [
|
||
{
|
||
id: 1,
|
||
number: "۱",
|
||
title: "پاسخ آماده",
|
||
description:
|
||
"پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
|
||
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
||
imageAlt: "مدیریت تیکت",
|
||
},
|
||
{
|
||
id: 2,
|
||
number: "۲",
|
||
title: "SLA هوشمند",
|
||
description:
|
||
"همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
|
||
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
||
imageAlt: "داشبورد رضایت",
|
||
},
|
||
{
|
||
id: 3,
|
||
number: "۰۳",
|
||
title: "نظرسنجی رضایت",
|
||
description:
|
||
"تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
|
||
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
||
imageAlt: "مرکز پشتیبانی مشتری",
|
||
},
|
||
];
|
||
|
||
interface Feature191Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Feature191 = ({ className }: Feature191Props) => {
|
||
return (
|
||
<section dir="rtl" lang="fa" className={cn("bg-accent py-32", className)}>
|
||
<div className="container">
|
||
<div className="flex flex-col items-center pb-4 text-center">
|
||
<div>
|
||
<span className="my-3 mb-4 flex items-center justify-center">
|
||
<Badge variant="outline" className="gap-2 bg-background px-3 py-1">
|
||
<Calendar className="h-4 w-4" />
|
||
<span className="text-xs">تیکت</span>
|
||
</Badge>
|
||
</span>
|
||
</div>
|
||
<h2 className="pb-3 text-xl font-semibold text-balance sm:text-3xl md:text-xl lg:text-2xll">
|
||
رضایت مشتری
|
||
</h2>
|
||
<p className="max-w-md text-sm text-pretty text-muted-foreground lg:max-w-2xl lg:text-lg">
|
||
پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-1 gap-4 px-4 sm:px-6 md:grid-cols-2 md:px-8 lg:grid-cols-3 lg:px-12">
|
||
{DATA.map((feature) => (
|
||
<div
|
||
key={feature.id}
|
||
className="grid grid-cols-1 rounded-2xl border bg-background shadow-sm"
|
||
>
|
||
<div className="p-6 text-start">
|
||
<Badge className="rounded-sm bg-muted-foreground py-2 font-mono">
|
||
{feature.number}
|
||
</Badge>
|
||
<p className="text-md my-4 font-semibold">{feature.title}</p>
|
||
<p className="text-pretty text-muted-foreground">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
<div className="mt-auto flex min-h-[200px] justify-center rounded-b-2xl">
|
||
<div className="h-[200px] w-full">
|
||
<img
|
||
src={feature.image}
|
||
alt={feature.imageAlt}
|
||
className="h-full w-full rounded-b-2xl object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Feature191 };
|