122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import { ChevronRight, Zap } from "lucide-react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const cards = [
|
|
{
|
|
image:
|
|
"/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
|
|
imageAlt: "گزارش مالی یکپارچه",
|
|
badge: "یکپارچگی",
|
|
badgeVariant: "primary" as const,
|
|
title: "مدیریت دارایی",
|
|
linkText: "عملیات",
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
|
|
imageAlt: "داشبورد ERP",
|
|
badge: "مدیریت سازمان",
|
|
badgeVariant: "avatar" as const,
|
|
title: "بودجهبندی",
|
|
linkText: "ERP",
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
|
|
imageAlt: "مدیریت عملیات",
|
|
badge: "ERP",
|
|
badgeVariant: "default" as const,
|
|
title: "مدیریت مالی",
|
|
linkText: "ERP",
|
|
},
|
|
];
|
|
|
|
function CardBadge({
|
|
variant,
|
|
label,
|
|
}: {
|
|
variant: (typeof cards)[number]["badgeVariant"];
|
|
label: string;
|
|
}) {
|
|
if (variant === "avatar") {
|
|
return (
|
|
<span className="ms-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
|
|
<Avatar className="size-7 rounded-full">
|
|
<AvatarImage
|
|
src="/block-media/shadcnblocks/block/avatar-1.webp"
|
|
alt="گزارش مالی یکپارچه"
|
|
/>
|
|
</Avatar>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (variant === "primary") {
|
|
return (
|
|
<span className="ms-auto flex w-fit items-center gap-1 rounded-full bg-primary px-4 py-2.5 text-sm font-semibold text-background">
|
|
<Zap className="h-auto w-6 fill-background" />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
|
|
<Zap className="h-auto w-6 fill-background" />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
interface Feature117Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature117 = ({ className }: Feature117Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h1 className="mb-4 text-center text-xl font-semibold">
|
|
عملیات سازمان را یکپارچه کنید
|
|
</h1>
|
|
<p className="text-center text-muted-foreground">
|
|
از خرید تا فروش در یک سیستم
|
|
</p>
|
|
<div className="grid gap-5 pt-14 xl:grid-cols-3">
|
|
{cards.map((card) => (
|
|
<a
|
|
key={card.title}
|
|
href="#"
|
|
className="group relative overflow-hidden rounded-xl"
|
|
>
|
|
<img
|
|
src={card.image}
|
|
alt={card.imageAlt}
|
|
className="h-full max-h-[450px] w-full rounded-xl object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
|
|
<div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
|
|
<CardBadge variant={card.badgeVariant} label={card.badge} />
|
|
<div className="flex flex-col gap-5 text-background">
|
|
<h4 className="text-xl font-semibold lg:text-3xl">
|
|
{card.title}
|
|
</h4>
|
|
<p className="flex items-center gap-1 font-medium">
|
|
{card.linkText}
|
|
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature117 };
|