116 lines
4.8 KiB
TypeScript
116 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { AudioLines, Box, Globe, LayoutDashboard, ShieldUser, Users } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { SparklesCore } from "@/components/shadcnblocks/sparkles";
|
|
|
|
const features = [
|
|
{
|
|
icon: Globe,
|
|
title: "یکپارچه‌سازی آسان",
|
|
description: "ساخته‌شده با فناوری‌های روز و APIهای تمیز برای ادغام بی‌دردسر با سامانه‌های شما.",
|
|
},
|
|
{
|
|
icon: Box,
|
|
title: "عملکرد سریع",
|
|
description: "بهینه‌سازی شده برای بارگذاری فوری و حداقل مصرف منابع.",
|
|
},
|
|
{
|
|
icon: ShieldUser,
|
|
title: "امنیت پیش‌فرض",
|
|
description: "امنیت در سطح سازمان با حفاظت داخلی و رعایت استانداردها.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "همکاری تیمی",
|
|
description: "طراحی‌شده برای تیم‌ها با همکاری لحظه‌ای و کنترل دسترسی.",
|
|
},
|
|
{
|
|
icon: AudioLines,
|
|
title: "یکپارچگی صوتی",
|
|
description: "پردازش پیشرفته با پشتیبانی از درک زبان طبیعی.",
|
|
},
|
|
{
|
|
icon: LayoutDashboard,
|
|
title: "امکانات جامع پلتفرم",
|
|
description: "قیمت لحظه‌ای، مدیریت سفارش و مانده حساب آنلاین، ریز معاملات ۲۴/۷، کنترل وضعیت بازار و پنل ادمین.",
|
|
},
|
|
];
|
|
|
|
interface Feature294Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature294 = ({ className }: Feature294Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative w-full max-w-full overflow-x-hidden overflow-y-hidden bg-background py-32 text-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative container mx-auto flex h-full flex-col items-center justify-center px-6" dir="rtl">
|
|
<div className="w-full max-w-lg text-center">
|
|
<p className="text-caption relative z-20 font-medium leading-[var(--line-height-body)] tracking-wide text-muted-foreground/80">
|
|
راهکار
|
|
</p>
|
|
<h2 className="text-heading-2 relative z-20 mt-2 text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
یک پلتفرم اختصاصی
|
|
<br />
|
|
برای مدیریت کامل معاملات
|
|
</h2>
|
|
</div>
|
|
<div className="relative mt-5 mb-10 h-40 w-[40rem]">
|
|
{/* Gradients */}
|
|
<div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-primary to-transparent blur-sm" />
|
|
<div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-primary to-transparent" />
|
|
<div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-secondary to-transparent blur-sm" />
|
|
<div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-secondary to-transparent" />
|
|
|
|
{/* Core component */}
|
|
<SparklesCore
|
|
background="transparent"
|
|
minSize={0.4}
|
|
maxSize={1}
|
|
particleDensity={500}
|
|
className="h-full w-full"
|
|
particleColor="#FFFFFF"
|
|
/>
|
|
|
|
{/* Radial Gradient to prevent sharp edges */}
|
|
<div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_130px_at_top,transparent_20%,white)]"></div>
|
|
</div>
|
|
|
|
<p className="text-body-sm mb-6 text-center font-medium leading-[var(--line-height-body)] text-muted-foreground">
|
|
ویژگی‌های کلیدی:
|
|
</p>
|
|
|
|
<div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-15 text-right md:grid-cols-2 md:text-start lg:grid-cols-3">
|
|
{features.map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="flex min-h-[140px] flex-row-reverse gap-4 rounded-lg border border-border/50 bg-card/30 p-4 transition-colors hover:bg-card/50 dark:border-primary/10 dark:bg-card/20 dark:hover:bg-card/30 md:flex-row"
|
|
>
|
|
<IconComponent className="mt-0.5 w-12 shrink-0 stroke-1 text-primary" />
|
|
<div className="min-w-0 space-y-2">
|
|
<h4 className="text-heading-4 font-medium leading-[var(--line-height-heading)] text-foreground">{feature.title}</h4>
|
|
<p className="text-body-sm leading-[var(--line-height-body)] text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature294 };
|