127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ComplianceBadge {
|
|
image: string;
|
|
alt: string;
|
|
}
|
|
|
|
interface ComplianceFeature {
|
|
title: string;
|
|
description: string;
|
|
badgeImage: string;
|
|
badgeAlt: string;
|
|
}
|
|
|
|
interface Compliance1Props {
|
|
tagline?: string;
|
|
heading?: string;
|
|
description?: string;
|
|
badges?: ComplianceBadge[];
|
|
features?: ComplianceFeature[];
|
|
className?: string;
|
|
}
|
|
|
|
const Compliance1 = ({
|
|
tagline = "امنیت و انطباق",
|
|
heading = "زیرساختی امن و منطبق با استانداردهای بین‌المللی",
|
|
description =
|
|
"پلتفرم ما با رعایت استانداردهای بین‌المللی امنیت و حریم خصوصی، به سازمان‌ها کمک می‌کند الزامات قانونی، حفاظت از داده‌ها و فرایندهای ممیزی را با اطمینان مدیریت کنند.",
|
|
badges = [
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/compliance/GDPR.svg",
|
|
alt: "GDPR",
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/compliance/CCPA.svg",
|
|
alt: "CCPA",
|
|
},
|
|
],
|
|
features = [
|
|
{
|
|
title: "ثبت خودکار رویدادها و ممیزی",
|
|
description:
|
|
"تمام فعالیت‌های کاربران به‌صورت خودکار ثبت و زمان‌بندی می‌شوند تا گزارش‌های ممیزی دقیق، قابل استناد و غیرقابل تغییر در دسترس باشد.",
|
|
badgeImage:
|
|
"/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
|
|
badgeAlt: "ISO 27001",
|
|
},
|
|
{
|
|
title: "پایش مستمر انطباق",
|
|
description:
|
|
"سامانه به‌صورت مداوم وضعیت انطباق با استانداردها و الزامات امنیتی را بررسی کرده و در صورت بروز مغایرت هشدار می‌دهد.",
|
|
badgeImage:
|
|
"/block-media/shadcnblocks/block/compliance/ISO-27017.svg",
|
|
badgeAlt: "ISO 27017",
|
|
},
|
|
{
|
|
title: "گزارش‌های آماده ممیزی",
|
|
description:
|
|
"گزارش‌های موردنیاز برای ممیزی، ارزیابی امنیت و الزامات قانونی تنها با چند کلیک تولید می‌شوند.",
|
|
badgeImage:
|
|
"/block-media/shadcnblocks/block/compliance/ISO-27018.svg",
|
|
badgeAlt: "ISO 27018",
|
|
},
|
|
],
|
|
className,
|
|
}: Compliance1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid gap-9 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-5">
|
|
<Badge variant="outline" className="gap-1.5 bg-background">
|
|
<span className="size-1.5 rounded-full bg-green-500" />
|
|
{tagline}
|
|
</Badge>
|
|
<h1 className="text-xl font-medium text-balance lg:text-2xll">
|
|
{heading}
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">{description}</p>
|
|
<div className="flex items-center gap-6">
|
|
{badges.map((badge, index) => (
|
|
<img
|
|
key={index}
|
|
src={badge.image}
|
|
alt={badge.alt}
|
|
className="h-22 opacity-50 grayscale md:h-28 dark:invert"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-border bg-background">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"relative overflow-hidden p-6 lg:px-8 lg:py-11",
|
|
index === 0 && "border-b border-border",
|
|
index === features.length - 1 && "border-t border-border",
|
|
)}
|
|
>
|
|
<div>
|
|
<h2 className="text-xl font-medium lg:text-xl">
|
|
{feature.title}
|
|
</h2>
|
|
<p className="mt-2 w-3/4 pe-10 text-sm text-muted-foreground md:text-base">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={feature.badgeImage}
|
|
alt={feature.badgeAlt}
|
|
className="absolute end-4 -bottom-7 size-24 text-muted-foreground opacity-80 grayscale lg:end-8 lg:size-32 dark:invert"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Compliance1 };
|