95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const topCard = {
|
|
title: "تحلیل باخت معامله",
|
|
badge: "تیم فروش",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
imageAlt: "صف اولویت سرنخها",
|
|
};
|
|
|
|
const bottomCards = [
|
|
{
|
|
title: "هدفگذاری تیمی",
|
|
badge: "بستن معامله",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
imageAlt: "داشبورد عملکرد فروش",
|
|
},
|
|
{
|
|
title: "اتوماسیون پیگیری",
|
|
badge: "رشد درآمد",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
imageAlt: "نمودار نرخ تبدیل",
|
|
},
|
|
];
|
|
|
|
interface Feature144Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature144 = ({ className }: Feature144Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="text-center text-xl">
|
|
پیشبینی درآمد را دقیقتر کنید
|
|
</h2>
|
|
<p className="mx-auto mt-3 max-w-3xl text-center text-xl text-muted-foreground">
|
|
هر فرصت فروش را از دست ندهید
|
|
</p>
|
|
|
|
<Card className="mt-20 flex flex-col gap-6 p-6 md:flex-row md:gap-8 md:p-8">
|
|
<div className="flex w-full flex-col justify-between text-start">
|
|
<h6 className="text-xl md:text-3xl">{topCard.title}</h6>
|
|
<Badge
|
|
variant="outline"
|
|
className="mt-4 w-fit bg-muted px-4 py-3 md:text-base"
|
|
>
|
|
{topCard.badge}
|
|
</Badge>
|
|
</div>
|
|
<div className="w-full">
|
|
<img
|
|
src={topCard.image}
|
|
alt={topCard.imageAlt}
|
|
className="max-h-80 w-full rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="mt-6 flex flex-col gap-6 md:mt-8 md:flex-row md:gap-8">
|
|
{bottomCards.map((card) => (
|
|
<Card
|
|
key={card.title}
|
|
className="flex w-full flex-col gap-6 p-6 md:gap-8 md:p-8"
|
|
>
|
|
<div className="w-full">
|
|
<img
|
|
src={card.image}
|
|
alt={card.imageAlt}
|
|
className="max-h-80 w-full rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col justify-between text-start">
|
|
<h6 className="text-xl md:text-3xl">{card.title}</h6>
|
|
<Badge
|
|
variant="outline"
|
|
className="mt-10 w-fit bg-muted px-4 py-3 md:text-base"
|
|
>
|
|
{card.badge}
|
|
</Badge>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature144 };
|