103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import { BarChart, Check, Shield, Zap } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "cloud-storage",
|
|
title: "تحلیل باخت معامله",
|
|
icon: Zap,
|
|
iconColor: "text-purple-400/90",
|
|
bgGradient: "from-purple-500",
|
|
items: [
|
|
"یادآور پیگیری خودکار",
|
|
"پیش‌بینی درآمد ماهانه",
|
|
"مقایسه عملکرد نمایندگان",
|
|
],
|
|
},
|
|
{
|
|
id: "performance-scaling",
|
|
title: "هدف‌گذاری تیمی",
|
|
icon: BarChart,
|
|
iconColor: "text-teal-400/90",
|
|
bgGradient: "from-teal-500",
|
|
items: [
|
|
"ثبت دلیل باخت معامله",
|
|
"قالب ایمیل فروش آماده",
|
|
"گزارش نرخ تبدیل هر مرحله",
|
|
],
|
|
},
|
|
{
|
|
id: "security-protection",
|
|
title: "اتوماسیون پیگیری",
|
|
icon: Shield,
|
|
iconColor: "text-red-400/90",
|
|
bgGradient: "from-red-500",
|
|
items: [
|
|
"گزارش نرخ تبدیل هر مرحله",
|
|
"یادآور پیگیری خودکار",
|
|
"پیش‌بینی درآمد ماهانه",
|
|
],
|
|
},
|
|
];
|
|
|
|
interface Feature200Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature200 = ({ className }: Feature200Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-2 lg:grid-cols-3">
|
|
{FEATURES.map((feature) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<div
|
|
key={feature.id}
|
|
className={cn(
|
|
"relative h-full overflow-hidden rounded-xl bg-radial-[at_80%_14%] from-[-50%] via-zinc-950 via-75% to-zinc-950 p-6",
|
|
feature.bgGradient,
|
|
)}
|
|
>
|
|
<div className="absolute inset-0 h-full w-full bg-[radial-gradient(white_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_at_80%_14%,#000,transparent_40%)] [background-size:3px_3px] opacity-35" />
|
|
<div
|
|
className={cn(
|
|
"relative grid size-11 place-items-center rounded-full bg-gradient-to-b via-transparent p-[2px]",
|
|
`${feature.bgGradient}/50`,
|
|
`to-${feature.bgGradient.split("-")[1]}/50`,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"grid size-full place-items-center rounded-full bg-zinc-950 bg-gradient-to-b via-transparent",
|
|
`${feature.bgGradient}/30`,
|
|
`to-${feature.bgGradient.split("-")[1]}/30`,
|
|
)}
|
|
>
|
|
<Icon className={feature.iconColor} />
|
|
</div>
|
|
</div>
|
|
<h3 className="relative mt-10 text-lg font-semibold text-background dark:text-primary">
|
|
{feature.title}
|
|
</h3>
|
|
<ul className="relative mt-4 space-y-3.5 text-sm text-background/70 dark:text-primary/70">
|
|
{feature.items.map((item) => (
|
|
<li key={item} className="flex items-center gap-2 text-start">
|
|
<Check className="mt-0.5 size-4 shrink-0" />
|
|
<span className="text-pretty">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature200 };
|