92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const STATS = [
|
|
{
|
|
id: "retention",
|
|
number: "داده سازمانی",
|
|
text: "دسترسی مبتنی بر نقش",
|
|
},
|
|
{
|
|
id: "development-time",
|
|
number: "هوش تجاری",
|
|
text: "به‌روزرسانی زمان‌بندی‌شده",
|
|
},
|
|
{
|
|
id: "adoption",
|
|
number: "گزارش‌گیری",
|
|
text: "فیلتر چندسطحی",
|
|
},
|
|
];
|
|
|
|
interface Feature220aProps {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature220a = ({ className }: Feature220aProps) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-24",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container max-w-5xl">
|
|
<div className="mb-16 text-center">
|
|
<Badge variant="secondary" className="mb-6 px-4 py-2">
|
|
هر تیم داشبورد خودش را داشته باشد
|
|
</Badge>
|
|
<h2 className="leading-tighter mb-6 text-2xll font-semibold tracking-tight text-balance lg:text-2xll">
|
|
روندها را زودتر از رقبا ببینید
|
|
<span className="block text-primary">گزارش‌هایی که مدیران واقعاً استفاده می‌کنند</span>
|
|
</h2>
|
|
<p className="mx-auto mb-8 max-w-3xl text-xl leading-relaxed font-medium text-pretty text-muted-foreground">
|
|
داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
|
|
</p>
|
|
<Button size="lg" className="gap-2 px-8 py-6 text-lg">
|
|
گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mb-16">
|
|
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-3xl">
|
|
<video
|
|
src="/block-media/shadcnblocks/block/video-8.mp4"
|
|
className="block size-full object-cover object-center"
|
|
loop
|
|
autoPlay
|
|
muted
|
|
controls={false}
|
|
aria-label="تصمیم استراتژیک را داده‌محور کنید"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
|
|
<div className="rounded-2xl bg-card p-8">
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
|
|
{STATS.map((item) => (
|
|
<div className="text-center" key={item.id}>
|
|
<div className="mb-2 text-xl font-bold text-primary">
|
|
{item.number}
|
|
</div>
|
|
<div className="text-sm font-medium text-pretty text-muted-foreground">
|
|
{item.text}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature220a };
|