81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
href: "#",
|
|
image: "/block-media/shadcnblocks/block/block-2.svg",
|
|
imageAlt: "گزارش مالی یکپارچه",
|
|
title: "خرید و تأمین",
|
|
description:
|
|
"درخواست خرید تا سفارش تأمینکننده را در یک مسیر مدیریت کنید.",
|
|
},
|
|
{
|
|
href: "#",
|
|
image: "/block-media/shadcnblocks/block/block-3.svg",
|
|
imageAlt: "داشبورد ERP",
|
|
title: "فاکتور و پرداخت",
|
|
description:
|
|
"فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
|
|
},
|
|
];
|
|
|
|
interface Feature77Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature77 = ({ className }: Feature77Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col items-center">
|
|
<div className="text-center">
|
|
<h3 className="text-xl font-semibold text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-2xll">
|
|
گردش تأیید
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="container mt-16">
|
|
<div className="relative">
|
|
<div className="grid border md:grid-cols-2 md:divide-s">
|
|
{features.map((feature) => (
|
|
<a
|
|
key={feature.title}
|
|
href={feature.href}
|
|
className="group relative flex flex-col items-center border-border pt-8 pb-8 text-center transition-all duration-200 md:border-t md:px-8 md:pt-12 md:pb-12 lg:px-12 lg:pt-16 lg:pb-20"
|
|
>
|
|
<div className="absolute top-0 h-px w-full bg-border md:hidden" />
|
|
<div className="mb-8 flex aspect-1/1 w-16 items-center justify-center md:w-[6.25rem] lg:mb-[3.25rem]">
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.imageAlt}
|
|
className="h-full w-full object-contain object-center"
|
|
/>
|
|
</div>
|
|
<h2 className="mb-4 text-xl font-semibold md:mb-5">
|
|
{feature.title}
|
|
</h2>
|
|
<p className="mb-auto text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="absolute -start-[5px] -top-[5px]">
|
|
<div className="size-[12px] rounded-full bg-primary" />
|
|
</div>
|
|
<div className="absolute -end-[5px] -top-[5px]">
|
|
<div className="size-[12px] rounded-full bg-primary" />
|
|
</div>
|
|
<div className="absolute -start-[5px] -bottom-[5px]">
|
|
<div className="size-[12px] rounded-full bg-primary" />
|
|
</div>
|
|
<div className="absolute -end-[5px] -bottom-[5px]">
|
|
<div className="size-[12px] rounded-full bg-primary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature77 };
|