reui-blocks/blocks/compliance7.tsx

import { DottedGlowBackground } from "@/components/aceternity/dotted-glow-background";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

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

interface Certification {
  src: string;
  alt: string;
  status: string;
}

interface Compliance7Props {
  heading?: string;
  description?: string;
  features?: Feature[];
  certifications?: Certification[];
  complianceHeading?: string;
  complianceDescription?: string;
  className?: string;
}

const defaultFeatures: Feature[] = [
  {
    title: "اتصال‌های امن و توسعه‌پذیر",
    description:
      "اتصال‌های مستند و پایدار امکان یکپارچه‌سازی سریع با سامانه‌های داخلی و خارجی را فراهم می‌کنند.",
  },
  {
    title: "پشتیبانی تخصصی ۲۴ ساعته",
    description:
      "تیم پشتیبانی در تمام ساعات شبانه‌روز آماده رسیدگی به مسائل فنی و حفظ پایداری سرویس است.",
  },
  {
    title: "زیرساخت امن نگهداری داده",
    description:
      "اطلاعات با رمزنگاری، نسخه‌های پشتیبان منظم و زیرساختی قابل اعتماد نگهداری می‌شوند.",
  },
  {
    title: "آماده برای استانداردهای بین‌المللی",
    description:
      "معماری سامانه به‌گونه‌ای طراحی شده که پاسخ‌گوی الزامات استانداردهای بین‌المللی امنیت و انطباق باشد.",
  },
];

const defaultCertifications: Certification[] = [
  {
    src: "/block-media/shadcnblocks/block/compliance/AICPA-SOC.svg",
    alt: "استاندارد امنیت سازمانی",
    status: "در حال اخذ",
  },
  {
    src: "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
    alt: "استاندارد امنیت اطلاعات",
    status: "در حال اخذ",
  },
];

const FeatureItem = ({ title, description }: Feature) => {
  return (
    <div className="flex flex-col gap-2 text-start">
      <p className="font-semibold">{title}</p>
      <p className="font-medium text-muted-foreground">{description}</p>
    </div>
  );
};

const Compliance7 = ({
  heading = "زیرساخت ابری امن برای سازمان‌های بزرگ",
  description =
    "راهکاری جامع برای استقرار، مدیریت و توسعه سرویس‌های ابری با تمرکز بر امنیت، پایداری و عملکرد بالا.",
  features = defaultFeatures,
  certifications = defaultCertifications,
  complianceHeading = "امنیت، پایداری و مقیاس‌پذیری",
  complianceDescription =
    "زیرساختی طراحی‌شده برای رشد سازمان که با استانداردهای امنیتی بین‌المللی همسو بوده و مسیر دریافت گواهی‌های معتبر را پشتیبانی می‌کند.",
  className,
}: Compliance7Props = {}) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative grid lg:grid-cols-2">
          <div className="absolute top-0 h-5 w-full">
            <DottedGlowBackground
              radius={1.2}
              gap={6}
              speedMin={0.2}
              speedMax={5}
              speedScale={1}
              darkColor="rgba(255, 255, 255, 0.7)"
            />
          </div>
          <div className="absolute bottom-0 h-5 w-full">
            <DottedGlowBackground
              radius={1.2}
              gap={6}
              speedMin={0.2}
              speedMax={5}
              speedScale={1}
              darkColor="rgba(255, 255, 255, 0.7)"
            />
          </div>

          <div className="flex flex-col">
            <div className="border border-dashed bg-gradient-to-b from-foreground/10 to-background p-10 sm:p-20">
              <FeatureItem title={heading} description={description} />
            </div>
            <div className="grid gap-10 border border-t-0 border-dashed p-10 sm:p-20 md:grid-cols-2">
              {features.map((feature) => (
                <FeatureItem
                  key={feature.title}
                  title={feature.title}
                  description={feature.description}
                />
              ))}
            </div>
          </div>
          <div className="flex h-full flex-col items-center justify-center gap-20 border border-s-0 border-dashed bg-gradient-to-tr from-foreground/10 to-background to-30% p-10 sm:p-20 dark:from-foreground/20">
            <div className="flex items-center gap-4 sm:gap-10">
              {certifications.map((certification) => {
                return (
                  <div
                    key={certification.alt}
                    className="flex flex-col items-center justify-center gap-2"
                  >
                    <Badge variant="outline">{certification.status}</Badge>
                    <img
                      src={certification.src}
                      alt={certification.alt}
                      className="size-28 sm:size-34 dark:invert"
                    />
                  </div>
                );
              })}
            </div>
            <div className="flex flex-col gap-2 text-center">
              <p className="text-xl font-semibold">{complianceHeading}</p>
              <p className="font-medium text-muted-foreground">
                {complianceDescription}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compliance7 };