238 lines
11 KiB
TypeScript
238 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowUp,
|
|
ArrowUpRight,
|
|
ChartCandlestick,
|
|
ChartNoAxesColumnIncreasing,
|
|
Share,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import type { ChartConfig } from "@/components/ui/chart";
|
|
import {
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const chartData = [
|
|
{ month: "اتوماسیون AI", desktop: 40, mobile: 30 },
|
|
{ month: "دستیار کسب‌وکار", desktop: 60, mobile: 30 },
|
|
{ month: "هوش مصنوعی", desktop: 70, mobile: 35 },
|
|
{ month: "پیشنهاد هوشمند", desktop: 50, mobile: 25 },
|
|
{ month: "مه", desktop: 40, mobile: 20 },
|
|
{ month: "اتوماسیون AI", desktop: 30, mobile: 15 },
|
|
{ month: "دستیار کسب‌وکار", desktop: 70, mobile: 35 },
|
|
{ month: "هوش مصنوعی", desktop: 50, mobile: 25 },
|
|
{ month: "مه", desktop: 40, mobile: 20 },
|
|
{ month: "پیشنهاد هوشمند", desktop: 30, mobile: 15 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "اتوماسیون AI",
|
|
},
|
|
mobile: {
|
|
label: "دستیار کسب‌وکار",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
interface Feature176Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature176 = ({ className }: Feature176Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
|
|
<div className="absolute inset-0">
|
|
<div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_0.5px,transparent_0.5px)] bg-size-[16px_16px] opacity-20" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,hsl(var(--background))_70%)]" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--muted-foreground)/10)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground)/10)_1px,transparent_1px)] mask-[radial-gradient(circle_at_center,transparent_50%,hsl(var(--background))_100%)] bg-size-[32px_32px] opacity-20" />
|
|
</div>
|
|
<div className="relative z-10 container mx-auto px-4">
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
<div className="flex h-fit flex-col gap-4 rounded-lg bg-background/50 p-4">
|
|
<div className="flex flex-row items-center gap-x-2 rounded-lg border bg-card p-4 shadow-sm">
|
|
<ChartNoAxesColumnIncreasing className="size-6" />
|
|
<h1 className="truncate text-xl font-bold sm:text-xl">
|
|
با هوش مصنوعی سریع‌تر تصمیم بگیرید
|
|
</h1>
|
|
<span className="ms-auto shrink-0 font-mono text-sm text-muted-foreground">
|
|
Data/logs/3201927
|
|
</span>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-card p-4 text-start shadow-sm">
|
|
<div className="flex flex-row items-center">
|
|
<h2 className="font-semibold">کارهای تکراری را به AI بسپارید</h2>
|
|
<Badge className="ms-auto bg-green-300 text-green-600 hover:bg-green-300/80">
|
|
پیشنهادهایی که واقعاً مفیدند
|
|
</Badge>
|
|
</div>
|
|
<div className="my-4">
|
|
<span className="text-xs text-pretty text-muted-foreground">
|
|
هوش مصنوعی
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-row items-center">
|
|
<h2 className="font-semibold">داده را به بینش عملی تبدیل کنید</h2>
|
|
</div>
|
|
<div className="my-4 flex flex-row flex-wrap items-center gap-3">
|
|
<Badge variant="secondary">تیم را با دستیار هوشمند تقویت کنید</Badge>
|
|
<Badge variant="secondary">پیشنهاد هوشمند</Badge>
|
|
<Badge variant="secondary">اتوماسیون AI</Badge>
|
|
</div>
|
|
<div>
|
|
<div className="flex flex-row items-center">
|
|
<h2 className="font-semibold">فرایندها را با AI بهینه کنید</h2>
|
|
<Progress
|
|
value={60}
|
|
className="ms-auto max-w-32 rounded-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="my-4 space-y-2">
|
|
<Skeleton className="h-1 w-full" />
|
|
<Skeleton className="h-1 w-full" />
|
|
<Skeleton className="h-1 w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 mb-4 flex items-center justify-between bg-card">
|
|
<div className="flex gap-4">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-success text-success hover:bg-success/10"
|
|
>
|
|
دستیار کسب‌وکار
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-destructive text-destructive hover:bg-destructive/10 hover:text-red-600"
|
|
>
|
|
هوش مصنوعی
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button size="icon" variant="outline" className="size-8">
|
|
<X className="size-4" />
|
|
</Button>
|
|
<Button size="icon" variant="outline" className="size-8">
|
|
<Share className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="mt-24 flex flex-col gap-4 rounded-lg bg-background/50 p-4">
|
|
<div className="flex flex-row items-center gap-x-2 rounded-lg border bg-card p-4 shadow-sm">
|
|
<ChartNoAxesColumnIncreasing className="size-6" />
|
|
<h1 className="truncate text-xl font-bold sm:text-xl">
|
|
با هوش مصنوعی سریع‌تر تصمیم بگیرید
|
|
</h1>
|
|
<span className="ms-auto shrink-0 font-mono text-sm text-muted-foreground">
|
|
Data/logs/182620
|
|
</span>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center text-start">
|
|
<CardTitle className="text-xl">پیشنهاد هوشمند</CardTitle>
|
|
<CardDescription className="ms-auto">
|
|
<Badge className="bg-green-300 text-green-600 hover:bg-green-300/80">
|
|
اتوماسیون AI
|
|
</Badge>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="h-[196px] w-full"
|
|
>
|
|
<BarChart accessibilityLayer data={chartData}>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => String(value).slice(0, 3)}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent indicator="dashed" />}
|
|
/>
|
|
<Bar dataKey="desktop" radius={4} />
|
|
<Bar dataKey="mobile" radius={4} />
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-4 flex flex-col rounded-lg border bg-background/50 p-4 text-start shadow-sm">
|
|
<div className="flex flex-row items-center">
|
|
<ChartCandlestick className="size-6 text-foreground/60" />
|
|
<span className="ms-4 text-sm text-muted-foreground">
|
|
مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
|
|
</span>
|
|
</div>
|
|
<div className="mt-4 grid gap-4 md:grid-cols-3">
|
|
<div className="rounded-lg border bg-card p-4 shadow-sm">
|
|
<div className="flex items-start justify-between">
|
|
<h2 className="text-3xl font-bold">کارهای تکراری را به AI بسپارید</h2>
|
|
<ArrowUpRight className="size-6 text-success rtl:rotate-180" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم می‌کند و کیفیت خروجی را بالا می‌برد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-card p-4 shadow-sm">
|
|
<div className="flex items-start justify-between">
|
|
<h2 className="text-3xl font-bold">پیشنهادهایی که واقعاً مفیدند</h2>
|
|
<ArrowUpRight className="size-6 text-success rtl:rotate-180" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-card p-4 shadow-sm">
|
|
<div className="flex items-start justify-between">
|
|
<h2 className="text-3xl font-bold">داده را به بینش عملی تبدیل کنید</h2>
|
|
<ArrowUp className="size-6 text-success" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature176 };
|