97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import { ShoppingCartIcon } from "lucide-react";
|
|
|
|
import { GlowingStarsBackgroundCard } from "@/components/aceternity/glowing-stars";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const COLLECTIONS = [
|
|
{
|
|
id: "june",
|
|
title: "تاریخچه مشتری",
|
|
price: `${(129).toLocaleString("fa-IR")}$`,
|
|
link: "#",
|
|
className: "md:col-span-1",
|
|
},
|
|
{
|
|
id: "summer",
|
|
title: "صندوق یکپارچه",
|
|
price: `${(89).toLocaleString("fa-IR")}$`,
|
|
link: "#",
|
|
className: "md:col-span-1",
|
|
},
|
|
{
|
|
id: "premium",
|
|
title: "اولویتبندی تیکت",
|
|
price: `${(199).toLocaleString("fa-IR")}$`,
|
|
link: "#",
|
|
className: "md:col-span-1",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature286Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature286 = ({ className }: Feature286Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"dark overflow-hidden bg-background py-32 text-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container flex w-full flex-col items-center justify-center px-4">
|
|
<p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">
|
|
تیکت
|
|
</p>
|
|
<h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
|
|
رضایت مشتری
|
|
</h2>
|
|
<p className="text-md mx-auto mt-5 max-w-xl px-5 text-center text-pretty text-muted-foreground lg:text-lg">
|
|
پاسخهای آماده و پایگاه دانش، زمان پاسخ را کم میکند و کیفیت را در کل تیم یکسان نگه میدارد.
|
|
</p>
|
|
|
|
<div className="mt-10 grid w-full max-w-5xl grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
|
|
{COLLECTIONS.map((card) => (
|
|
<div
|
|
key={card.id}
|
|
className="flex flex-col rounded-3xl bg-muted/60 p-4 text-start"
|
|
>
|
|
<GlowingStarsBackgroundCard className="h-55 border-none !bg-none" />
|
|
|
|
<div className="mt-3 flex items-center justify-start gap-3">
|
|
<h3 className="text-xl font-semibold tracking-tighter">
|
|
{card.title}
|
|
</h3>
|
|
<span className="inline-block rounded-xl bg-muted-foreground/20 px-3 text-sm text-foreground/60">
|
|
مرکز تماس
|
|
</span>
|
|
</div>
|
|
<div className="mt-5 flex items-center justify-between">
|
|
<div className="flex h-full items-center justify-center gap-2 rounded-full bg-muted-foreground/20 px-7 text-sm">
|
|
پشتیبانی مشتری
|
|
<ShoppingCartIcon className="size-4 shrink-0" />
|
|
</div>
|
|
<div className="text-end">
|
|
<span className="text-xs text-muted-foreground">تیکت</span>
|
|
<p className="-mt-1 text-xl font-semibold tracking-tight">
|
|
{card.price}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Button variant="secondary" className="mt-10 h-10 rounded-full !px-5">
|
|
رضایت مشتری
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature286 };
|