121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import {
|
|
ArrowUpRight,
|
|
AudioLines,
|
|
Box,
|
|
Fingerprint,
|
|
LocateFixed,
|
|
} from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TeamFeature {
|
|
id: string;
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
}
|
|
|
|
const TEAM_FEATURES: TeamFeature[] = [
|
|
{
|
|
id: "openai-scaling",
|
|
icon: LocateFixed,
|
|
title:
|
|
"پاسخ آماده",
|
|
description: "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "collaborative-innovation",
|
|
icon: AudioLines,
|
|
title: "SLA هوشمند",
|
|
description: "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "agile-development",
|
|
icon: Box,
|
|
title: "نظرسنجی رضایت",
|
|
description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "cross-functional",
|
|
icon: Fingerprint,
|
|
title: "تخصیص خودکار",
|
|
description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
interface Feature241Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature241 = ({ className }: Feature241Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("overflow-hidden bg-background py-32", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="relative">
|
|
<header className="mb-15 max-w-2xl text-start">
|
|
<h1 className="mb-8 text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
|
|
زمان حل مسئله را کوتاه کنید
|
|
</h1>
|
|
<p className="text-lg leading-relaxed tracking-tight text-pretty text-muted-foreground md:text-xl">
|
|
پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
|
|
</p>
|
|
</header>
|
|
<div className="absolute -top-15 -end-10 hidden transition-all ease-in-out group-hover:-rotate-0 lg:block">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-tab-bars.svg"
|
|
className="size-150 md:size-100"
|
|
alt="مدیریت تیکت"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
{TEAM_FEATURES.map((feature) => {
|
|
const Icon = feature.icon;
|
|
return (
|
|
<a
|
|
key={feature.id}
|
|
href={feature.href}
|
|
className="block transition-all duration-500 ease-in-out"
|
|
>
|
|
<Card className="group relative rounded-none! border border-border bg-background p-6 shadow-none transition-all duration-500 ease-in-out hover:bg-linear-to-l hover:from-transparent hover:to-muted rtl:hover:bg-linear-to-r">
|
|
<CardContent className="flex h-full flex-col justify-between p-0 text-start">
|
|
<div className="flex size-15 items-center justify-center border border-border bg-muted transition-colors duration-500 ease-in-out group-hover:bg-background">
|
|
<Icon
|
|
size={30}
|
|
className="transition-all duration-500 ease-in-out"
|
|
/>
|
|
</div>
|
|
|
|
<h3 className="mt-4 text-xl leading-tight font-semibold tracking-tight text-balance text-foreground transition-all duration-500 ease-in-out md:text-xl lg:pe-30 lg:text-3xl">
|
|
{feature.title}
|
|
</h3>
|
|
|
|
<div className="absolute end-6 bottom-6 flex size-12 items-center justify-center border border-border bg-muted opacity-0 transition-all duration-500 ease-in-out group-hover:opacity-100">
|
|
<ArrowUpRight className="size-[27px] text-foreground transition-all duration-500 ease-in-out group-hover:rotate-45 rtl:rotate-180" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature241 };
|