93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
import { PocketKnife } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const DATA = [
|
|
{
|
|
title: "مدیریت دارایی",
|
|
description:
|
|
"درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
|
|
icon: "CircleHelp",
|
|
image: "/block-media/shadcnblocks/block/block-1.svg",
|
|
imageAlt: "گزارش مالی یکپارچه",
|
|
},
|
|
{
|
|
title: "بودجه‌بندی",
|
|
description:
|
|
"فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
|
|
icon: "Volume2",
|
|
image: "/block-media/shadcnblocks/block/block-2.svg",
|
|
imageAlt: "داشبورد ERP",
|
|
},
|
|
{
|
|
title: "مدیریت مالی",
|
|
description:
|
|
"درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
|
|
icon: "Lightbulb",
|
|
image: "/block-media/shadcnblocks/block/block-3.svg",
|
|
imageAlt: "مدیریت عملیات",
|
|
},
|
|
];
|
|
|
|
interface Feature168Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature168 = ({ className }: Feature168Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="border-y">
|
|
<div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
|
|
>
|
|
<PocketKnife className="size-4" />
|
|
<span>گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.</span>
|
|
</Badge>
|
|
<h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
|
|
عملیات سازمان را یکپارچه کنید
|
|
</h2>
|
|
<p className="max-w-[600px] text-pretty tracking-[-0.32px] text-muted-foreground">
|
|
مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="container border-x lg:px-0!">
|
|
<div className="items-center">
|
|
<div className="grid flex-1 bg-border max-lg:divide-y max-lg:border-x lg:grid-cols-3 lg:gap-px">
|
|
{DATA.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="relative isolate flex flex-col bg-background pt-5 text-start lg:pt-20"
|
|
>
|
|
<div className="flex-1 border-b border-border">
|
|
<h3 className="mt-2 px-4 text-lg font-semibold tracking-tight lg:px-8">
|
|
{item.title}
|
|
</h3>
|
|
<p className="px-4 pt-2 pb-6 text-pretty text-muted-foreground lg:px-8">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
<div className="bg-muted">
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="p-12 dark:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
|
|
<div className="container h-full w-full border-x" />
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature168 };
|