241 lines
7.9 KiB
TypeScript
241 lines
7.9 KiB
TypeScript
import { Plus } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DataItem {
|
|
title: string;
|
|
value: string;
|
|
description: string;
|
|
}
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
title: "خرید و تأمین",
|
|
value: "یکپارچگی",
|
|
description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
|
|
},
|
|
{
|
|
title: "فاکتور و پرداخت",
|
|
value: "ERP",
|
|
description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
|
|
},
|
|
{
|
|
title: "ERP",
|
|
value: "۹۵",
|
|
description: "ERP",
|
|
},
|
|
];
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
description: string;
|
|
className?: string;
|
|
}
|
|
|
|
const StatCard = ({ title, value, description, className }: StatCardProps) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-full min-w-0 max-w-md flex-col gap-3 text-start sm:max-w-52 sm:gap-4",
|
|
className,
|
|
)}
|
|
>
|
|
<span className="font-medium">{title}</span>
|
|
<div className="text-2xll font-bold">
|
|
{value}
|
|
<span className="text-muted-foreground">+</span>
|
|
</div>
|
|
<p className="text-pretty text-muted-foreground">{description}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function FeatureCard({ className }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"w-full min-w-0 rounded-2xl border bg-background p-4 text-start shadow-md",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 flex-row items-start gap-2">
|
|
<h3 className="min-w-0 text-base font-semibold text-pretty sm:text-lg">
|
|
گردش تأیید
|
|
</h3>
|
|
<Badge variant="secondary" className="ms-auto shrink-0 rounded-sm">
|
|
ERP
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-4">
|
|
<p className="text-sm text-pretty text-muted-foreground">
|
|
گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const selectItemClassName =
|
|
"ps-8 pe-1.5 text-right [&_span.absolute]:right-auto [&_span.absolute]:left-2";
|
|
|
|
function ProductCard({ className }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"w-full min-w-0 rounded-lg border bg-background p-4 text-start shadow-md",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex flex-row border-b pb-4">
|
|
<h3 className="text-base font-semibold sm:text-lg">ERP</h3>
|
|
<div className="relative ms-auto">
|
|
<Badge variant="secondary" className="rounded-sm px-1">
|
|
<Plus className="size-4" />
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex flex-col gap-4">
|
|
<Select dir="rtl">
|
|
<SelectTrigger className="w-full justify-between text-right">
|
|
<SelectValue placeholder="عملیات" />
|
|
</SelectTrigger>
|
|
<SelectContent dir="rtl" align="end" className="text-right">
|
|
<SelectItem value="category1" className={selectItemClassName}>
|
|
ERP
|
|
</SelectItem>
|
|
<SelectItem value="category2" className={selectItemClassName}>
|
|
ERP
|
|
</SelectItem>
|
|
<SelectItem value="category3" className={selectItemClassName}>
|
|
ERP
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select dir="rtl">
|
|
<SelectTrigger className="w-full justify-between text-right">
|
|
<SelectValue placeholder="ERP" />
|
|
</SelectTrigger>
|
|
<SelectContent dir="rtl" align="end" className="text-right">
|
|
<SelectItem value="sm" className={selectItemClassName}>
|
|
ERP
|
|
</SelectItem>
|
|
<SelectItem value="md" className={selectItemClassName}>
|
|
ERP
|
|
</SelectItem>
|
|
<SelectItem value="xl" className={selectItemClassName}>
|
|
مدیریت سازمان
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Feature183Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature183 = ({ className }: Feature183Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"w-full min-w-0 max-w-full overflow-x-clip pb-16 sm:pb-24 lg:pb-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container min-w-0 px-4 sm:px-6">
|
|
<div className="w-full min-w-0 pt-16 sm:pt-24 lg:pt-32">
|
|
<div className="relative mx-auto h-[22rem] w-full min-w-0 overflow-hidden rounded-3xl bg-muted bg-cover bg-center bg-no-repeat sm:h-[26rem] lg:h-96">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="100%"
|
|
height="100%"
|
|
viewBox="0 0 4200 1080"
|
|
fill="none"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
className="absolute inset-0 z-0 mask-[linear-gradient(to_bottom,transparent,white,transparent,transparent)] opacity-50"
|
|
aria-hidden="true"
|
|
>
|
|
<g clipPath="url(#clip0_feature183)">
|
|
<rect width="4200" height="1080" fill="none" />
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<line
|
|
key={`horizontal-${index}`}
|
|
y1={(index + 1) * 200 - 0.5}
|
|
x2="4200"
|
|
y2={(index + 1) * 200 - 0.5}
|
|
className="stroke-muted-foreground"
|
|
strokeWidth="1"
|
|
/>
|
|
))}
|
|
{Array.from({ length: 21 }).map((_, index) => (
|
|
<line
|
|
key={`vertical-${index}`}
|
|
x1={(index + 1) * 200 - 0.5}
|
|
y1="0"
|
|
x2={(index + 1) * 200 - 0.5}
|
|
y2="1080"
|
|
className="stroke-muted-foreground"
|
|
strokeWidth="1"
|
|
/>
|
|
))}
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_feature183">
|
|
<rect width="4200" height="1080" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div className="absolute top-6 left-1/2 z-10 w-[9.5rem] max-w-[calc(100%-2rem)] -translate-x-1/2 overflow-hidden sm:top-8 sm:w-[14rem] lg:-top-28 lg:w-[18.75rem]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/hero108/iphone.png"
|
|
alt="گزارش مالی یکپارچه"
|
|
className="relative z-20 block h-auto w-full"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
|
|
alt="داشبورد ERP"
|
|
className="absolute top-0 left-0 block w-full rounded-[2rem] sm:rounded-[40px] lg:rounded-[50px]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="absolute top-10 end-[max(0.75rem,8%)] z-20 hidden w-56 max-w-[min(14rem,38%)] -rotate-6 transform lg:block lg:w-60 lg:max-w-[min(15rem,42%)] lg:-rotate-12">
|
|
<FeatureCard />
|
|
</div>
|
|
|
|
<div className="absolute top-10 start-[max(0.75rem,8%)] z-20 hidden w-56 max-w-[min(14rem,38%)] transform lg:block lg:w-60 lg:max-w-[min(15rem,42%)]">
|
|
<ProductCard />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:hidden">
|
|
<FeatureCard />
|
|
<ProductCard />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 grid min-w-0 grid-cols-1 justify-items-stretch gap-8 sm:mt-14 sm:grid-cols-3 sm:justify-items-center lg:gap-x-16">
|
|
{DATA.map((item) => (
|
|
<StatCard key={item.title} {...item} className="sm:mx-auto" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature183 };
|