113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature {
|
|
id: string;
|
|
heading: string;
|
|
label: string;
|
|
description: string;
|
|
image: string;
|
|
url: string;
|
|
}
|
|
|
|
interface Feature13Props {
|
|
title?: string;
|
|
features?: Feature[];
|
|
className?: string;
|
|
}
|
|
|
|
const Feature13 = ({
|
|
title = "هر سرنخ را تا قرارداد دنبال کنید",
|
|
features = [
|
|
{
|
|
id: "feature-1",
|
|
heading: "تقسیم خودکار سرنخ",
|
|
label: "مدیریت فروش",
|
|
description:
|
|
"تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
url: "https://ShadcnBlocks",
|
|
},
|
|
{
|
|
id: "feature-2",
|
|
heading: "گزارش عملکرد فروش",
|
|
label: "سامانه مدیریت ارتباط با مشتری",
|
|
description:
|
|
"وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
url: "https://ShadcnBlocks",
|
|
},
|
|
{
|
|
id: "feature-3",
|
|
heading: "مدیریت قرارداد",
|
|
label: "ارتباط با مشتری",
|
|
description:
|
|
"بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
url: "https://ShadcnBlocks",
|
|
},
|
|
{
|
|
id: "feature-4",
|
|
heading: "تاریخچه تعاملات",
|
|
label: "پایپ‌لاین فروش",
|
|
description:
|
|
"پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-dark-4.svg",
|
|
url: "https://ShadcnBlocks",
|
|
},
|
|
],
|
|
className,
|
|
}: Feature13Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
{title && (
|
|
<div className="mx-auto mb-16 max-w-3xl text-center">
|
|
<h2 className="text-xl font-medium text-pretty lg:text-2xll">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
)}
|
|
<div className="grid gap-8 lg:grid-cols-2">
|
|
{features.map((feature) => (
|
|
<div
|
|
key={feature.id}
|
|
className="flex flex-col justify-between rounded-lg bg-muted"
|
|
>
|
|
<div className="flex justify-between gap-10 border-b">
|
|
<div className="flex flex-col justify-between gap-8 py-6 ps-4 md:gap-14 md:py-10 md:ps-8 lg:justify-normal">
|
|
<span className="font-mono text-xs text-muted-foreground">
|
|
{feature.label}
|
|
</span>
|
|
<a href={feature.url}>
|
|
<h3 className="text-xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-xl">
|
|
{feature.heading}
|
|
</h3>
|
|
</a>
|
|
</div>
|
|
<div className="md:1/3 w-2/5 shrink-0 rounded-s-lg border-s">
|
|
<a href={feature.url}>
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.heading}
|
|
className="h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p className="p-4 text-muted-foreground md:p-8">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature13 };
|