110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature188Resource {
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
imageSrc: string;
|
|
}
|
|
|
|
interface Feature188Props {
|
|
className?: string;
|
|
title?: string;
|
|
resources?: Feature188Resource[];
|
|
}
|
|
|
|
const defaultResources: Feature188Resource[] = [
|
|
{
|
|
title: "نصب نسخه اختصاصی برای هر مجموعه",
|
|
description:
|
|
"هر سازمان نسخهٔ جداگانه و مستقل از سامانه را روی سرور خود دریافت می‌کند. داده‌ها کاملاً در اختیار شما می‌مانند و امنیت و کنترل کامل بر اطلاعات خود دارید.",
|
|
href: "#",
|
|
imageSrc:
|
|
"https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
|
|
},
|
|
{
|
|
title: "امکان شخصی‌سازی کامل بر اساس مدل کاری",
|
|
description:
|
|
"ماژول‌ها، فیلدها و گردش‌کارها متناسب با فرایندهای داخلی مجموعهٔ شما تنظیم می‌شوند. سامانه دقیقاً با نیاز و مدل کاری شما هماهنگ می‌شود.",
|
|
href: "#",
|
|
imageSrc:
|
|
"https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
|
|
},
|
|
{
|
|
title: "پشتیبانی مستقیم و توسعه مستمر",
|
|
description:
|
|
"تیم فنی ما به‌صورت مستقیم پاسخگوی سوالات و مشکلات شماست. امکانات جدید و به‌روزرسانی‌های امنیتی و عملکردی به‌طور منظم ارائه می‌شود.",
|
|
href: "#",
|
|
imageSrc:
|
|
"https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
|
|
},
|
|
];
|
|
|
|
const Feature188 = ({
|
|
className,
|
|
title = "چرا این سامانه انتخاب مجموعه‌های حرفه‌ای است؟",
|
|
resources = defaultResources,
|
|
}: Feature188Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
className={cn(
|
|
"relative w-full overflow-hidden border-t border-border/50 bg-background py-16 md:py-24 lg:py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container mx-auto max-w-5xl px-4 sm:px-6">
|
|
<h2 className="text-center text-heading-2 font-semibold leading-[var(--line-height-heading)] text-foreground sm:text-heading-2 lg:text-heading-2">
|
|
{title}
|
|
</h2>
|
|
|
|
<div className="mx-auto mt-10 sm:mt-12 rounded-2xl border border-border bg-background overflow-hidden">
|
|
{resources.map((resource, index) => (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
index !== resources.length - 1 && "border-b border-border",
|
|
)}
|
|
>
|
|
<a
|
|
href={resource.href}
|
|
className="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-6 lg:p-6"
|
|
>
|
|
<div className="flex min-w-0 flex-1 items-start gap-4 sm:gap-5">
|
|
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted p-2 lg:h-14 lg:w-14">
|
|
<ArrowLeft className="h-5 w-5 text-muted-foreground sm:h-6 sm:w-6" />
|
|
</span>
|
|
<div className="min-w-0 flex-1 space-y-1">
|
|
<h3 className="text-heading-4 font-semibold leading-[var(--line-height-heading)] text-foreground sm:text-heading-3">
|
|
{resource.title}
|
|
</h3>
|
|
<p className="text-body-sm leading-[var(--line-height-body)] text-muted-foreground sm:text-body">
|
|
{resource.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 w-full shrink-0 md:mt-0 md:w-52 lg:w-60">
|
|
<div className="aspect-video w-full overflow-hidden rounded-lg bg-muted">
|
|
<img
|
|
src={resource.imageSrc}
|
|
alt={resource.title}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature188 };
|