first commit

frontend/app/home/components/IntegrationSection.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Badge, Card } from "ikoncomponents";
+import { Github, Slack, Code2 } from "lucide-react";
+import Image from "next/image";
+
+const integrations = [
+  { name: "Slack", icon: Slack, color: "text-purple-400" },
+  { name: "GitHub", icon: Github, color: "text-gray-400" },
+  { name: "Jira", image: "/jira.svg", color: "text-blue-400" },
+  { name: "API", icon: Code2, color: "text-green-400" },
+];
+
+export function IntegrationSection() {
+  return (
+    <section className="py-13">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center space-y-4 mb-8">
+          <Badge variant="outline" className="border px-4 py-1">
+            Ecosystem
+          </Badge>
+          <h2 className="text-4xl md:text-5xl font-bold  tracking-tight">
+            Seamless Integrations
+          </h2>
+          <p className="text-gray-400 max-w-2xl mx-auto text-lg">
+            Connect with your favorite tools through our RESTful API and
+            webhooks.
+          </p>
+        </div>
+
+        {/* Integration Grid */}
+        <div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
+          {integrations.map((item) => (
+            <Card
+              key={item.name}
+              className="w-32 h-36 flex flex-col items-center justify-center gap-4 transition-all cursor-pointer group"
+            >
+              <div className="p-3 rounded-xl bg-white/5 group-hover:scale-110 transition-transform">
+                {item.icon ? (
+                  <item.icon className={item.color} size={32} />
+                ) : (
+                  <Image
+                    src={item.image!}
+                    alt={item.name}
+                    width={32}
+                    height={32}
+                    className={`object-contain ${item.color}`}
+                  />
+                )}
+              </div>
+              <span className="text-gray-400 text-sm font-medium">
+                {item.name}
+              </span>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}