79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Badge, Card } from "ikoncomponents";
|
|
import { Lock, ShieldCheck, Globe } from "lucide-react";
|
|
|
|
const securityFeatures = [
|
|
{
|
|
title: "SSO & MFA",
|
|
description: "Okta, Azure AD integration",
|
|
icon: Lock,
|
|
},
|
|
{
|
|
title: "SOC2 & GDPR",
|
|
description: "Regulatory compliance",
|
|
icon: ShieldCheck,
|
|
},
|
|
{
|
|
title: "Data Sovereignty",
|
|
description: "Regional data hosting",
|
|
icon: Globe,
|
|
},
|
|
];
|
|
|
|
export function SecuritySection() {
|
|
return (
|
|
<section className="py-14 md:py-20">
|
|
<div className="container mx-auto px-4">
|
|
|
|
{/* Header */}
|
|
<div className="text-center space-y-4 mb-12 md:mb-16">
|
|
<Badge
|
|
variant="outline"
|
|
className="text-gray-400 px-4 py-1"
|
|
>
|
|
Enterprise Grade
|
|
</Badge>
|
|
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
|
|
Security & Compliance
|
|
</h2>
|
|
|
|
<p className="text-gray-400 max-w-2xl mx-auto text-lg">
|
|
Built with enterprise security requirements in mind, ensuring your
|
|
data is protected at every level.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Security Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-6xl mx-auto">
|
|
{securityFeatures.map((feature, idx) => (
|
|
<Card
|
|
key={idx}
|
|
className="p-6 flex flex-col items-center text-center gap-4
|
|
group hover:border-white/10 transition-all"
|
|
>
|
|
<div className="p-4 rounded-2xl bg-indigo-500/5 border border-indigo-500/10
|
|
group-hover:bg-indigo-500/10 transition-colors">
|
|
<feature.icon
|
|
className="text-indigo-400"
|
|
size={32}
|
|
/>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-bold">
|
|
{feature.title}
|
|
</h3>
|
|
|
|
<p className="text-gray-400 text-sm">
|
|
{feature.description}
|
|
</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|