65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Check, ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const checkedItems = [
|
|
"زمان حل مسئله را کوتاه کنید",
|
|
"تیکت",
|
|
"رضایت مشتری",
|
|
];
|
|
|
|
interface Feature124Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature124 = ({ className }: Feature124Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="w-full text-start lg:w-[40%]">
|
|
<h2 className="mb-8 text-3xl font-bold">
|
|
کیفیت پاسخگویی را قابل اندازهگیری کنید
|
|
</h2>
|
|
<p className="mb-10">
|
|
تیم پشتیبانی را هوشمندتر کنید
|
|
</p>
|
|
<ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
|
|
{checkedItems.map((item) => (
|
|
<li className="flex items-center gap-2" key={item}>
|
|
<Check className="size-5 shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button variant="outline">
|
|
مرکز تماس
|
|
<ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative flex h-[430px] w-full p-4 before:absolute before:inset-0 before:bg-primary/20 before:[mask-image:url(/block-media/shadcnblocks/block/patterns/cross-pattern.svg)] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
|
|
<div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-30" />
|
|
<div className="relative z-10 m-auto w-[80%]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="مدیریت تیکت"
|
|
className="max-h-[350px] w-full rounded-md object-cover"
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-0 z-5 bg-linear-to-l from-background/50 via-transparent to-background/50" />
|
|
<div className="absolute inset-0 z-5 bg-linear-to-t from-background/50 via-transparent to-background/50" />
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature124 };
|