155 lines
7.5 KiB
TypeScript
155 lines
7.5 KiB
TypeScript
import { Clock, Zap } from "lucide-react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const AVATAR_IDS = ["1", "2", "3", "4", "5"] as const;
|
|
|
|
interface Feature261Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature261 = ({ className }: Feature261Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container min-w-0">
|
|
<div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
|
|
<div className="relative h-60 min-w-0 overflow-hidden rounded-3xl md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg"
|
|
alt="گزارش مالی یکپارچه"
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0" />
|
|
<div className="absolute inset-x-6 bottom-6 z-10 max-w-full text-white">
|
|
<p className="text-lg leading-snug font-medium text-balance break-words">
|
|
گزارش یکپارچه، سهم هر بخش از سودآوری را شفاف می‌کند.
|
|
</p>
|
|
</div>
|
|
<div className="absolute end-6 top-6 z-10">
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-white/20">
|
|
<Zap className="size-5 text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative h-60 min-w-0 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="داشبورد ERP"
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
<div className="absolute inset-x-6 bottom-6 z-10 max-w-full text-start">
|
|
<h2 className="text-sm leading-snug font-medium text-balance break-words md:text-base lg:text-xl">
|
|
عملیات سازمان را یکپارچه کنید
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
|
|
<CardContent className="flex h-full min-w-0 flex-col justify-center gap-2 p-4 text-start md:p-5">
|
|
<div className="text-xl font-bold md:text-xl lg:text-2xll">
|
|
۹۵
|
|
<span className="align-top text-xl md:text-xl lg:text-3xl">
|
|
٪
|
|
</span>
|
|
</div>
|
|
<p className="line-clamp-4 text-sm leading-snug text-pretty break-words text-muted-foreground">
|
|
مالی، انبار، خرید و فروش در یک پلتفرم؛ تصمیم‌گیری سریع‌تر با دید end-to-end.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="مدیریت عملیات"
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl bg-muted py-0 md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
|
|
<CardContent className="flex h-full min-w-0 flex-col justify-end gap-3 p-4 text-start md:p-5">
|
|
<div className="min-w-0 space-y-2">
|
|
<div className="text-xl font-normal md:text-2xll">
|
|
یکپارچگی
|
|
</div>
|
|
<p className="line-clamp-3 text-sm leading-snug text-pretty break-words text-muted-foreground md:text-base">
|
|
ببینید کدام بخش بیشترین تأثیر را روی سودآوری دارد.
|
|
</p>
|
|
<Button className="max-w-full">مشاهده گزارش‌ها</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
|
|
<CardContent className="flex h-full min-w-0 flex-col justify-center gap-3 p-4 text-start md:p-5">
|
|
<div>
|
|
<span className="text-xl font-bold md:text-3xl lg:text-2xll">
|
|
ERP
|
|
</span>
|
|
<span className="align-top text-xl font-bold md:text-xl lg:text-3xl">
|
|
+
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">تیم عملیات</p>
|
|
<div className="flex min-w-0 flex-wrap -space-x-2 rtl:space-x-reverse">
|
|
{AVATAR_IDS.map((id) => (
|
|
<Avatar
|
|
key={id}
|
|
className="size-8 border-2 border-border md:size-8 lg:size-10"
|
|
>
|
|
<AvatarImage
|
|
src={`/block-media/shadcnblocks/block/avatar-${id}.webp`}
|
|
alt={`نمای عضو تیم ${id}`}
|
|
/>
|
|
<AvatarFallback>ت{id}</AvatarFallback>
|
|
</Avatar>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-5">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="گزارش مالی یکپارچه"
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
</Card>
|
|
|
|
<Card className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg"
|
|
alt="داشبورد ERP"
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-r from-black/60 via-black/30 to-transparent rtl:bg-linear-to-l" />
|
|
<div className="absolute inset-0 z-10 flex items-center justify-start p-4 md:p-6">
|
|
<div className="min-w-0 max-w-full text-start text-white">
|
|
<div className="mb-2 flex items-center gap-2 md:gap-3">
|
|
<div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 md:size-7">
|
|
<Clock className="size-3 md:size-4" />
|
|
</div>
|
|
<span className="text-base font-semibold md:text-lg">
|
|
ERP
|
|
</span>
|
|
</div>
|
|
<p className="line-clamp-4 text-sm leading-snug text-pretty break-words opacity-90">
|
|
گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند.
|
|
<br />
|
|
<span className="font-semibold">از خرید تا فروش در یک سیستم</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature261 };
|