Files
reui-blocks/blocks/feature112.tsx
T

72 lines
2.3 KiB
TypeScript

import { ChevronRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
const cards = [
{
title: "پاسخ آماده",
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
imageAlt: "مدیریت تیکت",
},
{
title: "SLA هوشمند",
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
imageAlt: "داشبورد رضایت",
},
{
title: "نظرسنجی رضایت",
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
imageAlt: "مرکز پشتیبانی مشتری",
},
];
interface Feature112Props {
className?: string;
}
const Feature112 = ({ className }: Feature112Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
<Badge variant="outline">زمان حل مسئله را کوتاه کنید</Badge>
<h2 className="text-3xl font-semibold md:text-2xll">
کیفیت پاسخگویی را قابل اندازه‌گیری کنید
</h2>
<p className="text-muted-foreground md:text-lg">
تیم پشتیبانی را هوشمندتر کنید
</p>
<a
href="#"
className="flex items-center gap-1 text-sm font-medium md:text-base"
>
تیکت
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
</a>
</div>
<div className="mt-20 grid gap-6 md:grid-cols-3 lg:gap-10">
{cards.map((card) => (
<div key={card.title} className="flex flex-col rounded-lg border">
<img
src={card.image}
alt={card.imageAlt}
className="aspect-video size-full rounded-t-lg object-cover"
/>
<div className="p-6">
<h3 className="mb-2.5 font-semibold md:text-xl">{card.title}</h3>
<a href="#" className="flex items-center gap-1 text-sm">
بیشتر بدانید
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
</a>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature112 };