339 lines
12 KiB
TypeScript
339 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Shield,
|
|
ArrowRight,
|
|
Lock,
|
|
Eye,
|
|
Server,
|
|
AlertTriangle,
|
|
Fingerprint,
|
|
ShieldAlert,
|
|
KeyRound,
|
|
Bug,
|
|
Wifi,
|
|
Smartphone,
|
|
Award,
|
|
Check,
|
|
} from "lucide-react";
|
|
import { GlassCard } from "@/components/GlassCard";
|
|
import { GlowingButton } from "@/components/GlowingButton";
|
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
|
import { ParticleBackground } from "@/components/ParticleBackground";
|
|
|
|
/* ── Stagger helpers ── */
|
|
const heroStagger = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.12, delayChildren: 0.2 },
|
|
},
|
|
};
|
|
const heroChild = {
|
|
hidden: { opacity: 0, y: 50, filter: "blur(4px)" },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
filter: "blur(0px)",
|
|
transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
|
|
},
|
|
};
|
|
|
|
const securityLayers = [
|
|
{
|
|
icon: Fingerprint,
|
|
title: "Identity Layer",
|
|
description:
|
|
"Multi-factor authentication, biometric verification, and continuous identity assurance.",
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: "Encryption Layer",
|
|
description:
|
|
"End-to-end encryption for data at rest and in transit. AES-256 and TLS 1.3 standards.",
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: "Monitoring Layer",
|
|
description:
|
|
"Real-time threat detection, behavioral analytics, and anomaly detection across all channels.",
|
|
},
|
|
{
|
|
icon: Server,
|
|
title: "Infrastructure Layer",
|
|
description:
|
|
"Hardened cloud infrastructure with HSM-backed key management and geo-redundant deployment.",
|
|
},
|
|
{
|
|
icon: ShieldAlert,
|
|
title: "Policy Layer",
|
|
description:
|
|
"Dynamic security policies, risk-based access control, and automated compliance enforcement.",
|
|
},
|
|
{
|
|
icon: AlertTriangle,
|
|
title: "Response Layer",
|
|
description:
|
|
"Automated incident response, instant revocation, and forensic audit capabilities.",
|
|
},
|
|
];
|
|
|
|
const threats = [
|
|
{ icon: KeyRound, name: "Credential Theft", status: "Mitigated" },
|
|
{ icon: Bug, name: "Malware & Ransomware", status: "Detected & Blocked" },
|
|
{ icon: Wifi, name: "Man-in-the-Middle", status: "Prevented" },
|
|
{ icon: Smartphone, name: "SIM Swapping", status: "Mitigated" },
|
|
{ icon: ShieldAlert, name: "Phishing Attacks", status: "Detected" },
|
|
{ icon: AlertTriangle, name: "Session Hijacking", status: "Prevented" },
|
|
{ icon: Eye, name: "Insider Threats", status: "Monitored" },
|
|
{ icon: Lock, name: "Data Exfiltration", status: "Blocked" },
|
|
{ icon: Server, name: "API Abuse", status: "Rate-Limited & Blocked" },
|
|
];
|
|
|
|
const certifications = [
|
|
{
|
|
name: "ISO 27001",
|
|
description: "Information Security Management",
|
|
},
|
|
{
|
|
name: "eIDAS",
|
|
description: "EU Electronic Identification & Trust Services",
|
|
},
|
|
{
|
|
name: "PSD2",
|
|
description: "Payment Services Directive 2 Compliance",
|
|
},
|
|
{
|
|
name: "GDPR",
|
|
description: "General Data Protection Regulation",
|
|
},
|
|
{
|
|
name: "SOC 2 Type II",
|
|
description: "Service Organization Control",
|
|
},
|
|
{
|
|
name: "Common Criteria",
|
|
description: "EAL4+ Certified Components",
|
|
},
|
|
];
|
|
|
|
export default function SecurityPage() {
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<section className="relative min-h-[70vh] flex items-center overflow-hidden">
|
|
<ParticleBackground />
|
|
|
|
{/* ── UNBOXED hero image — absolutely positioned background ── */}
|
|
<motion.div
|
|
className="absolute top-0 right-0 h-full w-[60%] hidden lg:block"
|
|
initial={{ opacity: 0, scale: 1.02 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1.4, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
|
style={{
|
|
maskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
|
WebkitMaskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/hero-security.jpg"
|
|
alt="Security Architecture"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-accent/[0.06] via-transparent to-accent-blue/[0.04] mix-blend-screen" />
|
|
</motion.div>
|
|
|
|
{/* Cinematic spotlights */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-0 right-0 w-[70%] h-[80%] bg-gradient-to-bl from-accent/[0.07] via-accent-blue/[0.03] to-transparent" />
|
|
<div className="absolute bottom-0 left-0 w-[50%] h-[60%] bg-gradient-to-tr from-accent/[0.05] via-transparent to-transparent" />
|
|
</div>
|
|
|
|
{/* Glow orb behind headline */}
|
|
<div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-cyan-500/20 blur-[120px] rounded-full pointer-events-none" />
|
|
|
|
{/* Bottom fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
|
|
|
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20">
|
|
<motion.div
|
|
variants={heroStagger}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="max-w-2xl"
|
|
>
|
|
<motion.div variants={heroChild}>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-8">
|
|
<Shield className="h-4 w-4" />
|
|
Enterprise-Grade Security
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div variants={heroChild}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
|
Security Architecture
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
variants={heroChild}
|
|
className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]"
|
|
>
|
|
Security
|
|
<br />
|
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
|
That Thinks
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={heroChild}
|
|
className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
|
|
>
|
|
Multi-layered, AI-enhanced security architecture built on 25+
|
|
years of protecting the world's most sensitive digital
|
|
interactions.
|
|
</motion.p>
|
|
|
|
<motion.div variants={heroChild} className="mt-10">
|
|
<GlowingButton href="/contact">
|
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
|
</GlowingButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Security Architecture */}
|
|
<SectionWrapper className="bg-navy-mid/50">
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
|
|
Defense-in-Depth
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Six Layers of{" "}
|
|
<span className="text-accent">Defense</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Security isn't a feature — it's the architecture. Every
|
|
layer works together to create an impenetrable trust boundary.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{securityLayers.map((layer) => (
|
|
<motion.div key={layer.title} variants={itemVariants}>
|
|
<GlassCard className="p-6 h-full">
|
|
<layer.icon className="h-8 w-8 text-accent mb-4 opacity-80" />
|
|
<h3 className="text-lg font-semibold mb-2 tracking-tight">{layer.title}</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
{layer.description}
|
|
</p>
|
|
</GlassCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* Threat Detection */}
|
|
<SectionWrapper>
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent-blue mb-4 font-medium">
|
|
Threat Intelligence
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Threats We{" "}
|
|
<span className="text-accent">Neutralize</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Real-time protection against the full spectrum of modern cyber
|
|
threats.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{threats.map((threat) => (
|
|
<motion.div key={threat.name} variants={itemVariants}>
|
|
<GlassCard className="p-5 h-full" hover={false}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<threat.icon className="h-5 w-5 text-accent" />
|
|
<span className="font-medium text-sm">{threat.name}</span>
|
|
</div>
|
|
<span className="text-xs font-medium text-green-400 bg-green-400/[0.06] border border-green-400/[0.12] backdrop-blur-sm px-2 py-1 rounded-lg">
|
|
{threat.status}
|
|
</span>
|
|
</div>
|
|
</GlassCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* Certifications */}
|
|
<SectionWrapper className="bg-navy-mid/50">
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent-violet mb-4 font-medium">
|
|
Compliance
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Certified &{" "}
|
|
<span className="text-accent">Compliant</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Meeting the highest security and compliance standards globally.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
|
{certifications.map((cert) => (
|
|
<motion.div key={cert.name} variants={itemVariants}>
|
|
<GlassCard className="p-6 text-center h-full">
|
|
<Award className="h-10 w-10 text-accent mx-auto mb-3 opacity-80" />
|
|
<h3 className="text-lg font-bold font-display tracking-tight">{cert.name}</h3>
|
|
<p className="text-slate-400 text-sm mt-1 leading-relaxed">
|
|
{cert.description}
|
|
</p>
|
|
</GlassCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* CTA */}
|
|
<section className="relative py-32 md:py-40 overflow-hidden">
|
|
{/* Ambient glow */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-accent/[0.04] via-accent-blue/[0.06] to-accent-violet/[0.04] rounded-full blur-[100px]" />
|
|
</div>
|
|
<div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
|
>
|
|
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold font-display tracking-tight">
|
|
Security Questions?{" "}
|
|
<span className="text-accent">Let's Talk.</span>
|
|
</h2>
|
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
|
Our security team is ready to walk you through our architecture,
|
|
certifications, and how we protect your most critical assets.
|
|
</p>
|
|
<div className="mt-10">
|
|
<GlowingButton href="/contact">
|
|
Book a Security Review{" "}
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</GlowingButton>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|