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 };
|