129 lines
4.8 KiB
TypeScript
129 lines
4.8 KiB
TypeScript
import { ArrowDownRight } from "lucide-react";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const items = [
|
|
{
|
|
title: "تحلیل باخت معامله",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
imageAlt: "صف اولویت سرنخ‌ها",
|
|
},
|
|
{
|
|
title: "هدف‌گذاری تیمی",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
imageAlt: "داشبورد عملکرد فروش",
|
|
},
|
|
{
|
|
title: "اتوماسیون پیگیری",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
imageAlt: "نمودار نرخ تبدیل",
|
|
},
|
|
];
|
|
|
|
interface Feature171Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature171 = ({ className }: Feature171Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-secondary py-32", className)}>
|
|
<div className="container">
|
|
<div className="relative flex items-center justify-center">
|
|
<DashedLine className="text-muted-foreground" />
|
|
<span className="absolute bg-secondary px-3 font-mono text-sm font-medium tracking-wide text-muted-foreground max-lg:hidden">
|
|
با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-10 grid max-w-5xl gap-3 text-start lg:mt-24 lg:grid-cols-2">
|
|
<h2 className="text-xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
|
|
پیش‌بینی درآمد را دقیق‌تر کنید
|
|
</h2>
|
|
<p className="leading-snug font-medium text-pretty text-muted-foreground">
|
|
چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="mt-8 overflow-hidden rounded-2xl md:mt-12 lg:mt-20">
|
|
<CardContent className="flex p-0 max-lg:flex-col">
|
|
{items.map((item, i) => (
|
|
<div key={item.title} className="flex flex-1 max-lg:flex-col">
|
|
<div className="ps-6 pt-6 lg:ps-8 lg:pt-8">
|
|
<div className="relative ps-4">
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="aspect-[1.28/1] overflow-hidden rounded-ts-xl object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent" />
|
|
</div>
|
|
<a
|
|
href="#"
|
|
className="group flex items-center justify-between gap-4 p-6 ps-0! lg:p-8"
|
|
>
|
|
<h3 className="text-xl leading-tight font-semibold tracking-tight">
|
|
{item.title}
|
|
</h3>
|
|
<ArrowDownRight className="size-6 shrink-0 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
{i < items.length - 1 && (
|
|
<div className="relative hidden lg:block">
|
|
<DashedLine orientation="vertical" />
|
|
</div>
|
|
)}
|
|
{i < items.length - 1 && (
|
|
<div className="relative block lg:hidden">
|
|
<DashedLine orientation="horizontal" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature171 };
|
|
|
|
interface DashedLineProps {
|
|
orientation?: "horizontal" | "vertical";
|
|
className?: string;
|
|
}
|
|
|
|
const DashedLine = ({
|
|
orientation = "horizontal",
|
|
className,
|
|
}: DashedLineProps) => {
|
|
const isHorizontal = orientation === "horizontal";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative text-muted-foreground",
|
|
isHorizontal ? "h-px w-full" : "h-full w-px",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
isHorizontal
|
|
? [
|
|
"h-px w-full",
|
|
"bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
|
|
"[mask-image:linear-gradient(90deg,transparent,black_25%,black_45%,transparent)]",
|
|
]
|
|
: [
|
|
"h-full w-px",
|
|
"bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
|
|
"[mask-image:linear-gradient(180deg,transparent,black_25%,black_45%,transparent)]",
|
|
],
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|