97 lines
4.0 KiB
TypeScript
97 lines
4.0 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const featuredCard = {
|
|
href: "#",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
imageAlt: "داشبورد مدیریت ارتباط با مشتری",
|
|
tag: "مدیریت فروش",
|
|
title: "پروفایل ۳۶۰ درجه مشتری",
|
|
description:
|
|
"تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
|
|
};
|
|
|
|
const listItems = [
|
|
{
|
|
href: "#",
|
|
title: "اتوماسیون مراحل فروش",
|
|
},
|
|
{
|
|
href: "#",
|
|
title: "پیش‌بینی درآمد",
|
|
},
|
|
{
|
|
href: "#",
|
|
title: "یادآور پیگیری هوشمند",
|
|
},
|
|
];
|
|
|
|
interface Feature79Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature79 = ({ className }: Feature79Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col items-center gap-16 sm:gap-20 md:gap-24 lg:px-16">
|
|
<div className="text-center">
|
|
<p className="mb-6 text-xs font-medium tracking-wider">
|
|
سامانه مدیریت ارتباط با مشتری
|
|
</p>
|
|
<h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
|
|
ارتباط با مشتری
|
|
</h3>
|
|
<p className="text-muted-foreground lg:max-w-2xl lg:text-lg">
|
|
تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-y-12 md:col-span-2 md:grid md:grid-cols-2 md:gap-x-6 lg:gap-8">
|
|
<a
|
|
href={featuredCard.href}
|
|
className="group overflow-clip rounded-t-xl border border-border transition-shadow hover:shadow-lg md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
|
|
>
|
|
<div>
|
|
<img
|
|
src={featuredCard.image}
|
|
alt={featuredCard.imageAlt}
|
|
className="aspect-16/9 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
|
|
<p className="mb-6 text-xs font-medium tracking-wider text-muted-foreground">
|
|
{featuredCard.tag}
|
|
</p>
|
|
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
|
|
{featuredCard.title}
|
|
</h3>
|
|
<p className="mb-8 text-muted-foreground lg:text-lg">
|
|
{featuredCard.description}
|
|
</p>
|
|
<ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
</a>
|
|
<div className="flex flex-col justify-between gap-y-12 md:px-8 lg:px-10">
|
|
{listItems.map((item) => (
|
|
<a
|
|
key={item.title}
|
|
href={item.href}
|
|
className="group flex flex-col justify-between gap-4 border border-border px-8 py-8 md:flex-row md:items-center md:border-0 md:border-b md:px-0 md:py-10 lg:py-12"
|
|
>
|
|
<h3 className="mb-3 text-lg font-semibold md:mb-0 md:text-xl">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex w-fit items-center rounded-full border-0 border-border transition-transform group-hover:translate-x-1 md:border md:px-6 md:py-3 md:group-hover:bg-primary md:group-hover:text-primary-foreground rtl:group-hover:-translate-x-1">
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature79 };
|