reui-blocks/blocks/compliance6.tsx

import { LockKeyhole, ShieldCheck, Users } from "lucide-react";

import { cn } from "@/lib/utils";

interface ComplianceCertification {
  image: string;
  alt: string;
  label: string;
}

interface ComplianceFeatureCard {
  title: string;
  description: string;
}

interface Compliance6Props {
  tagline?: string;
  heading?: string;
  description?: string;
  certifications?: ComplianceCertification[];
  features?: ComplianceFeatureCard[];
  className?: string;
}

const defaultCertifications: ComplianceCertification[] = [
  {
    image: "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
    alt: "استاندارد امنیت اطلاعات",
    label: "استاندارد امنیت اطلاعات",
  },
  {
    image: "/block-media/shadcnblocks/block/compliance/GDPR.svg",
    alt: "GDPR",
    label: "GDPR",
  },
  {
    image: "/block-media/shadcnblocks/block/compliance/CCPA.svg",
    alt: "CCPA",
    label: "CCPA",
  },
  {
    image: "/block-media/shadcnblocks/block/compliance/AICPA-SOC.svg",
    alt: "AICPA SOC",
    label: "AICPA SOC",
  },
];

const defaultFeatures: ComplianceFeatureCard[] = [
  {
    title: "گواهی‌ها و استانداردهای امنیتی",
    description:
      "تمام فرایندهای سازمان با استفاده از استانداردهای معتبر امنیت اطلاعات محافظت می‌شوند.",
  },
  {
    title: "مالکیت و کنترل کامل داده‌ها",
    description:
      "داده‌های شما متعلق به سازمان شماست و دسترسی، نگهداری و اشتراک‌گذاری آن کاملاً تحت کنترل شما قرار دارد.",
  },
  {
    title: "مدیریت دقیق دسترسی کاربران",
    description:
      "سطوح دسترسی کاربران، تیم‌ها و سرویس‌ها را متناسب با نقش هر فرد مدیریت کنید.",
  },
];

const featureIcons = [LockKeyhole, ShieldCheck, Users] as const;

const Compliance6 = ({
  tagline = "امنیت و انطباق",
  heading = "اتوماسیون سازمانی با امنیت و اعتماد",
  description =
    "گردش‌کارهای حیاتی سازمان را با امنیت، پایداری و مقیاس‌پذیری بالا اجرا کنید و از حفاظت کامل اطلاعات در تمام مراحل اطمینان داشته باشید.",
  certifications = defaultCertifications,
  features = defaultFeatures,
  className,
}: Compliance6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-start justify-between gap-8 xl:flex-row">
          <div className="flex flex-col gap-6 lg:max-w-xl">
            <div className="flex items-center gap-1">
              <span className="h-2 w-4 bg-primary" />
              <span className="text-xs">{tagline}</span>
            </div>
            <h2 className="text-xl font-medium md:text-2xll lg:text-2xll">
              {heading}
            </h2>
            <p className="md:text-xl">{description}</p>
          </div>
          <div className="grid w-full shrink-0 grid-cols-2 gap-px border border-border bg-border md:w-auto md:grid-cols-4">
            {certifications.map((cert) => (
              <div
                key={cert.label}
                className="flex flex-col items-center gap-2 bg-background px-6 py-4 md:px-8 md:py-6"
              >
                <img
                  src={cert.image}
                  alt={cert.alt}
                  className="w-full max-w-16 md:max-w-24 dark:invert"
                />
                <p className="text-center text-sm font-semibold" dir="rtl">
                  {cert.label}
                </p>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-20 w-full border border-border">
          <div className="relative hidden h-16 border-b border-border md:block">
            <div className="absolute inset-0 h-full w-full bg-[repeating-linear-gradient(-45deg,theme(colors.border)_0_1px,transparent_1px_16px)]"></div>
          </div>
          <div className="grid grid-cols-1 gap-px bg-border lg:grid-cols-3">
            {features.map((feature, index) => {
              const Icon = featureIcons[index] ?? LockKeyhole;
              return (
                <div
                  key={feature.title}
                  className="flex flex-col justify-between gap-8 bg-background px-6 py-10 md:gap-16"
                >
                  <Icon className="size-8" />
                  <div className="flex flex-col gap-6 md:gap-10">
                    <h3 className="text-xl font-medium md:text-3xl">
                      {feature.title}
                    </h3>
                    <p className="text-muted-foreground md:text-lg">
                      {feature.description}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compliance6 };