first commit

frontend/app/home/components/SecuritySection.tsx

@@ -0,0 +1,78 @@
+"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>
+  );
+}