Security & Compliance

Enterprise Security

Built for trust and scale

We maintain the highest standards of security and compliance to keep your data safe, secure, and private.

SOC 2 Type II

Independently audited for security, availability, and confidentiality.

ISO 27001

Internationally recognized standard for information security management.

GDPR Compliant

Fully compliant with General Data Protection Regulation requirements.

Bank-grade Encryption

AES-256 encryption at rest and TLS 1.3 in transit ensures your data is always protected.

DDoS Protection

Advanced mitigation systems protect against volumetric and application-layer attacks.

Audit Logging

Comprehensive logs of all system access and changes for complete visibility.

Data Residency

Choose from multiple global regions to meet your local data residency requirements.

Global Infrastructure

Our distributed infrastructure spans 12 regions across 4 continents, ensuring low latency and high availability for your users worldwide.

99.99% Uptime SLA

Multi-region Redundancy

24/7/365 Monitoring

12 Regions Active

Installation

Install dependencies

npm install framer-motion lucide-react

Copy and paste the following code into your project.

"use client";
 
import { motion } from "framer-motion";
import {
  Shield,
  Lock,
  Globe,
  FileCheck,
  Server,
  Eye,
  CheckCircle2,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
 
interface SecurityFeature {
  icon: LucideIcon;
  title: string;
  description: string;
}
 
interface Certification {
  name: string;
  logo: LucideIcon;
  description: string;
}
 
interface SecurityComplianceProps {
  className?: string;
}
 
const features: SecurityFeature[] = [
  {
    icon: Lock,
    title: "Bank-grade Encryption",
    description:
      "AES-256 encryption at rest and TLS 1.3 in transit ensures your data is always protected.",
  },
  {
    icon: Shield,
    title: "DDoS Protection",
    description:
      "Advanced mitigation systems protect against volumetric and application-layer attacks.",
  },
  {
    icon: Eye,
    title: "Audit Logging",
    description:
      "Comprehensive logs of all system access and changes for complete visibility.",
  },
  {
    icon: Server,
    title: "Data Residency",
    description:
      "Choose from multiple global regions to meet your local data residency requirements.",
  },
];
 
const certifications: Certification[] = [
  {
    name: "SOC 2 Type II",
    logo: FileCheck,
    description:
      "Independently audited for security, availability, and confidentiality.",
  },
  {
    name: "ISO 27001",
    logo: Globe,
    description:
      "Internationally recognized standard for information security management.",
  },
  {
    name: "GDPR Compliant",
    logo: Shield,
    description:
      "Fully compliant with General Data Protection Regulation requirements.",
  },
];
 
export function SecurityCompliance({
  className,
}: SecurityComplianceProps) {
  return (
    <section
      className={cn(
        "py-24 bg-neutral-950 text-white overflow-hidden relative",
        className,
      )}
    >
      {/* Background Gradients */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <div className="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px]" />
        <div className="absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-[100px]" />
      </div>
 
      <div className="container mx-auto px-6 relative z-10">
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium mb-6"
          >
            <Shield className="w-4 h-4" />
            <span>Enterprise Security</span>
          </motion.div>
 
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-4xl md:text-5xl font-bold tracking-tight mb-6 bg-gradient-to-r from-white via-neutral-200 to-neutral-400 bg-clip-text text-transparent"
          >
            Built for trust and scale
          </motion.h2>
 
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-lg text-neutral-400"
          >
            We maintain the highest standards of security and compliance to keep
            your data safe, secure, and private.
          </motion.p>
        </div>
 
        {/* Certifications Badges */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.3 }}
          className="flex flex-wrap justify-center gap-6 mb-24"
        >
          {certifications.map((cert, index) => (
            <div
              key={index}
              className="flex items-center gap-4 p-4 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors backdrop-blur-sm min-w-[280px]"
            >
              <div className="w-12 h-12 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
                <cert.logo className="w-6 h-6" />
              </div>
              <div>
                <h3 className="font-semibold text-white">{cert.name}</h3>
                <p className="text-xs text-neutral-400 mt-1">
                  {cert.description}
                </p>
              </div>
            </div>
          ))}
        </motion.div>
 
        {/* Features Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-24">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
              className="p-6 rounded-2xl bg-neutral-900/50 border border-white/5 hover:border-blue-500/30 transition-all group"
            >
              <div className="w-12 h-12 rounded-lg bg-neutral-800 flex items-center justify-center text-white mb-6 group-hover:scale-110 transition-transform duration-300">
                <feature.icon className="w-6 h-6" />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-white group-hover:text-blue-400 transition-colors">
                {feature.title}
              </h3>
              <p className="text-neutral-400 leading-relaxed">
                {feature.description}
              </p>
            </motion.div>
          ))}
        </div>
 
        {/* Infrastructure / Map Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden relative"
        >
          <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:32px_32px]" />
          <div className="relative p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-12">
            <div className="max-w-lg">
              <h3 className="text-2xl font-bold mb-4">Global Infrastructure</h3>
              <p className="text-neutral-400 mb-8">
                Our distributed infrastructure spans 12 regions across 4
                continents, ensuring low latency and high availability for your
                users worldwide.
              </p>
              <div className="space-y-3">
                {[
                  "99.99% Uptime SLA",
                  "Multi-region Redundancy",
                  "24/7/365 Monitoring",
                ].map((item, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-3 text-sm text-neutral-300"
                  >
                    <CheckCircle2 className="w-4 h-4 text-blue-400" />
                    <span>{item}</span>
                  </div>
                ))}
              </div>
            </div>
 
            {/* Abstract Map Visualization */}
            <div className="relative w-full max-w-md aspect-video rounded-xl bg-neutral-900/50 border border-white/10 p-4 flex items-center justify-center">
              <div className="absolute inset-0 opacity-20">
                {/* Simple dot pattern to represent map */}
                {Array.from({ length: 20 }).map((_, i) => (
                  <div
                    key={i}
                    className="absolute w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"
                    style={{
                      top: `${Math.random() * 80 + 10}%`,
                      left: `${Math.random() * 80 + 10}%`,
                      animationDelay: `${Math.random() * 2}s`,
                    }}
                  />
                ))}
              </div>
              <div className="text-center z-10">
                <Globe className="w-16 h-16 text-blue-500/20 mx-auto mb-4" />
                <div className="text-sm font-medium text-blue-400">
                  12 Regions Active
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

Update the import paths to match your project setup.

Features

✅ Trust Badges - Prominent display of SOC 2, ISO 27001, and GDPR compliance
✅ Feature Grid - Clean cards highlighting key security features
✅ Global Infrastructure - Visual representation of data center locations
✅ Premium Design - Dark mode aesthetic with subtle gradients and glassmorphism
✅ Animations - Smooth entrance animations using Framer Motion
✅ Responsive - Adapts perfectly to all screen sizes

Usage

import SecurityCompliance from "@/components/ui/security-compliance";
 
export default function Page() {
  return <SecurityCompliance />;
}

Customization

Changing Colors

The component uses Tailwind's color palette. You can customize the accent colors (currently blue/purple) by finding and replacing the color classes:

bg-blue-500/10 -> bg-emerald-500/10
text-blue-400 -> text-emerald-400
bg-purple-500/10 -> bg-indigo-500/10

Modifying Content

The content is defined in constant arrays at the top of the component file:

features: Array of security features (icon, title, description)
certifications: Array of compliance badges (name, logo, description)

const features = [
  {
    icon: Lock,
    title: "Custom Feature",
    description: "Your custom security feature description.",
  },
  // ...
];