62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|