124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
import { BadgeCheck } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { CardStack } from "@/components/aceternity/card-stack";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{ id: "instant", label: "داده سازمانی" },
|
|
{ id: "one-time", label: "هوش تجاری" },
|
|
{ id: "developer", label: "گزارش‌گیری" },
|
|
{ id: "responsive", label: "تحلیل پیشرفته" },
|
|
{ id: "production", label: "داده سازمانی" },
|
|
{ id: "support", label: "هوش تجاری" },
|
|
{ id: "updates", label: "گزارش‌گیری" },
|
|
{ id: "customizable", label: "تحلیل پیشرفته" },
|
|
{ id: "performance", label: "داده سازمانی" },
|
|
{ id: "accessibility", label: "هوش تجاری" },
|
|
{ id: "cross-browser", label: "گزارش‌گیری" },
|
|
{ id: "docs", label: "تحلیل پیشرفته" },
|
|
] as const;
|
|
|
|
export const Highlight = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500",
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const CARDS = [
|
|
{
|
|
id: 0,
|
|
name: "داده سازمانی",
|
|
designation: "هوش تجاری",
|
|
content: (
|
|
<p className="text-pretty">
|
|
پیاده‌سازی فوق‌العاده روان بود.{" "}
|
|
<Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "گزارش‌گیری",
|
|
designation: "تحلیل پیشرفته",
|
|
content: (
|
|
<p className="text-pretty">
|
|
به‌عنوان مدیر عملیات، گزارش‌های قابل اقدام برایم حیاتی است.{" "}
|
|
<Highlight>هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.</Highlight> داده خام از منابع مختلف جمع و مدل‌سازی می‌شود. کاربران غیرفنی هم می‌توانند گزارش بسازند و به پاسخ برسند.
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "داده سازمانی",
|
|
designation: "هوش تجاری",
|
|
content: (
|
|
<p className="text-pretty">
|
|
امکانات دسترس‌پذیری عالی است.{" "}
|
|
<Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.
|
|
</p>
|
|
),
|
|
},
|
|
];
|
|
|
|
interface Feature280Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature280 = ({ className }: Feature280Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative h-full w-full overflow-hidden py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container flex w-full min-w-0 max-w-6xl flex-col items-center justify-between gap-12 lg:flex-row lg:gap-8">
|
|
<div className="relative flex h-full w-full min-w-0 flex-col items-center justify-center gap-15 text-center lg:items-start lg:text-start">
|
|
<h1 className="w-full max-w-md text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
|
|
تصمیم استراتژیک را داده‌محور کنید
|
|
</h1>
|
|
|
|
<div className="flex w-full min-w-0 max-w-lg items-center gap-4 px-5">
|
|
<span className="h-px min-w-4 flex-1 bg-muted-foreground/20" />
|
|
<p className="max-w-[min(100%,16rem)] shrink text-center text-sm text-balance text-muted-foreground/50 sm:max-w-xs">
|
|
هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.
|
|
</p>
|
|
<span className="h-px min-w-4 flex-1 bg-muted-foreground/20" />
|
|
</div>
|
|
<ul className="grid w-full min-w-0 max-w-lg grid-cols-2 gap-3 text-start">
|
|
{FEATURES.map((feature) => (
|
|
<li key={feature.id} className="flex min-w-0 gap-2 lg:items-center">
|
|
<BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
|
|
<p className="min-w-0 tracking-tight text-pretty text-muted-foreground/80">
|
|
{feature.label}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="mt-24 flex w-full min-w-0 max-w-96 items-center justify-center overflow-hidden lg:mt-0 lg:shrink-0">
|
|
<CardStack items={CARDS} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature280 };
|