282 lines
13 KiB
TypeScript
282 lines
13 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 w-full max-w-full overflow-x-hidden 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 min-w-0 px-4">
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
|
|
<div className="flex h-fit min-w-0 flex-col gap-4 rounded-lg bg-background/50 p-3 sm:p-4">
|
|
<div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:gap-x-2 sm:p-4">
|
|
<div className="flex min-w-0 items-center gap-x-2">
|
|
<ChartNoAxesColumnIncreasing className="size-5 shrink-0 sm:size-6" />
|
|
<h1 className="min-w-0 text-base font-bold text-pretty sm:truncate sm:text-xl">
|
|
با هوش مصنوعی سریع‌تر تصمیم بگیرید
|
|
</h1>
|
|
</div>
|
|
<span className="shrink-0 font-mono text-xs text-muted-foreground sm:ms-auto sm:text-sm">
|
|
Data/logs/3201927
|
|
</span>
|
|
</div>
|
|
|
|
<div className="min-w-0 rounded-lg border bg-card p-3 text-start shadow-sm sm:p-4">
|
|
<div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
|
|
<h2 className="min-w-0 font-semibold text-pretty">
|
|
کارهای تکراری را به AI بسپارید
|
|
</h2>
|
|
<Badge className="h-auto max-w-full shrink whitespace-normal bg-green-300 text-green-600 hover:bg-green-300/80 sm:ms-auto">
|
|
پیشنهادهایی که واقعاً مفیدند
|
|
</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 text-pretty">
|
|
داده را به بینش عملی تبدیل کنید
|
|
</h2>
|
|
</div>
|
|
<div className="my-4 flex flex-row flex-wrap items-center gap-2 sm:gap-3">
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-auto max-w-full whitespace-normal"
|
|
>
|
|
تیم را با دستیار هوشمند تقویت کنید
|
|
</Badge>
|
|
<Badge variant="secondary" className="h-auto whitespace-normal">
|
|
پیشنهاد هوشمند
|
|
</Badge>
|
|
<Badge variant="secondary" className="h-auto whitespace-normal">
|
|
اتوماسیون AI
|
|
</Badge>
|
|
</div>
|
|
<div>
|
|
<div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
|
|
<h2 className="min-w-0 font-semibold text-pretty">
|
|
فرایندها را با AI بهینه کنید
|
|
</h2>
|
|
<Progress
|
|
value={60}
|
|
className="w-full max-w-none rounded-sm sm:ms-auto sm:max-w-32"
|
|
/>
|
|
</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-8 mb-2 flex flex-col gap-3 bg-card sm:mt-12 sm:mb-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex min-w-0 flex-wrap gap-2 sm: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 className="min-w-0">
|
|
<div className="mt-0 flex flex-col gap-4 rounded-lg bg-background/50 p-3 sm:p-4 lg:mt-24">
|
|
<div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:gap-x-2 sm:p-4">
|
|
<div className="flex min-w-0 items-center gap-x-2">
|
|
<ChartNoAxesColumnIncreasing className="size-5 shrink-0 sm:size-6" />
|
|
<h1 className="min-w-0 text-base font-bold text-pretty sm:truncate sm:text-xl">
|
|
با هوش مصنوعی سریع‌تر تصمیم بگیرید
|
|
</h1>
|
|
</div>
|
|
<span className="shrink-0 font-mono text-xs text-muted-foreground sm:ms-auto sm:text-sm">
|
|
Data/logs/182620
|
|
</span>
|
|
</div>
|
|
|
|
<Card className="min-w-0 gap-0 overflow-hidden py-4">
|
|
<CardHeader className="flex flex-col gap-2 text-start sm:flex-row sm:items-center">
|
|
<CardTitle className="text-lg sm:text-xl">
|
|
پیشنهاد هوشمند
|
|
</CardTitle>
|
|
<CardDescription className="sm:ms-auto">
|
|
<Badge className="bg-green-300 text-green-600 hover:bg-green-300/80">
|
|
اتوماسیون AI
|
|
</Badge>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="min-w-0 overflow-hidden px-3 sm:px-4">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="aspect-auto! h-[180px] w-full min-w-0 sm:h-[196px]"
|
|
>
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{ left: 0, right: 0, top: 0, bottom: 0 }}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
axisLine={false}
|
|
interval="preserveStartEnd"
|
|
minTickGap={24}
|
|
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-2 flex min-w-0 flex-col rounded-lg border bg-background/50 p-3 text-start shadow-sm sm:mt-4 sm:p-4">
|
|
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start">
|
|
<ChartCandlestick className="size-6 shrink-0 text-foreground/60" />
|
|
<span className="min-w-0 text-sm text-pretty text-muted-foreground sm:ms-4">
|
|
مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا
|
|
می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
|
|
</span>
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
|
|
<div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:p-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
|
|
کارهای تکراری را به AI بسپارید
|
|
</h2>
|
|
<ArrowUpRight className="size-5 shrink-0 text-success sm:size-6 rtl:rotate-180" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-pretty text-muted-foreground">
|
|
از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم
|
|
می‌کند و کیفیت خروجی را بالا می‌برد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:p-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
|
|
پیشنهادهایی که واقعاً مفیدند
|
|
</h2>
|
|
<ArrowUpRight className="size-5 shrink-0 text-success sm:size-6 rtl:rotate-180" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-pretty text-muted-foreground">
|
|
سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای
|
|
دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:col-span-2 sm:p-4 lg:col-span-1">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
|
|
داده را به بینش عملی تبدیل کنید
|
|
</h2>
|
|
<ArrowUp className="size-5 shrink-0 text-success sm:size-6" />
|
|
</div>
|
|
<p className="mt-2 text-sm text-pretty text-muted-foreground">
|
|
مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا
|
|
می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature176 };
|