Files
reui-blocks/blocks/feature142.tsx
T

75 lines
3.0 KiB
TypeScript

"use client";
import { ArrowRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
const items = [
"تصمیم استراتژیک را داده‌محور کنید",
"داده سازمانی",
"هوش تجاری",
"هر تیم داشبورد خودش را داشته باشد",
];
interface Feature142Props {
className?: string;
}
const Feature142 = ({ className }: Feature142Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="mt-20 flex flex-col items-center justify-center gap-16 md:flex-row">
<div className="relative grid w-full max-w-md grid-cols-[1fr_6fr_1fr] grid-rows-[1fr_2fr_1fr_7fr] rounded-lg bg-linear-to-br from-red-100 to-blue-100 sm:max-h-[700px] md:max-w-xl">
<div className="border-e-2 border-b-2 border-muted-foreground/30 p-4" />
<div className="border-b-2 border-muted-foreground/30 p-4" />
<div className="border-b-2 border-s-2 border-muted-foreground/30 p-4" />
<div className="border-e-2 border-muted-foreground/30 p-4" />
<div className="flex items-center justify-center rounded-xl bg-background p-2 md:p-3">
<p className="text-center text-xs text-muted-foreground sm:text-sm md:text-base">
گزارش‌گیری
</p>
</div>
<div className="border-s-2 border-muted-foreground/30 p-4" />
<div className="border-t-2 border-e-2 border-b-2 border-muted-foreground/30 p-4" />
<div className="border-t-2 border-b-2 border-muted-foreground/30 p-4" />
<div className="border-t-2 border-b-2 border-s-2 border-muted-foreground/30 p-4" />
<div className="border-e-2 border-muted-foreground/30 p-4" />
<div>
<img
src="/block-media/shadcnblocks/block/placeholder-1.svg"
alt="گزارش‌ساز"
className="h-full w-full rounded-ts-xl object-cover"
/>
</div>
<div className="border-s-2 border-muted-foreground/30 p-4" />
</div>
<div className="w-full max-w-sm text-start">
<h6 className="text-3xl">
گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
</h6>
<Badge variant="outline" className="mt-8 bg-muted px-3 py-2">
تحلیل پیشرفته
</Badge>
<div className="mt-16 mb-4 h-px w-full bg-muted-foreground" />
<ul className="flex flex-col gap-2">
{items.map((item) => (
<li className="flex items-center gap-2 text-lg" key={item}>
<ArrowRight className="size-5 shrink-0 rtl:rotate-180" />
{item}
</li>
))}
</ul>
</div>
</div>
</div>
</section>
);
};
export { Feature142 };