99 lines
3.7 KiB
TypeScript
99 lines
3.7 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("w-full max-w-full overflow-x-hidden py-32", className)}
|
|
>
|
|
<div className="border-y">
|
|
<div className="container flex min-w-0 w-full flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="h-auto max-w-full shrink gap-1 bg-card px-3 py-1.5 text-sm font-normal tracking-tight whitespace-normal text-pretty shadow-sm"
|
|
>
|
|
<PocketKnife className="size-4 shrink-0" />
|
|
<span className="min-w-0">
|
|
گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
|
|
</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 min-w-0 w-full border-x lg:px-0!">
|
|
<div className="min-w-0 items-center">
|
|
<div className="grid min-w-0 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 min-w-0 flex-col bg-background pt-5 text-start lg:pt-20"
|
|
>
|
|
<div className="min-w-0 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="min-w-0 overflow-hidden bg-muted">
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="h-auto w-full max-w-full p-6 sm:p-8 lg: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 };
|