50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import { Server, Code, Cpu, Terminal, FlaskConical, Link2 } from 'lucide-react';
|
|
|
|
const tools = [
|
|
{ icon: Server, text: 'REST API', color: 'text-cyan-400' },
|
|
{ icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' },
|
|
{ icon: Cpu, text: 'MCP Server', color: 'text-purple-400' },
|
|
{ icon: Terminal, text: 'CLI', color: 'text-green-400' },
|
|
{ icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' },
|
|
{ icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true },
|
|
];
|
|
|
|
export function IntegrationsSection() {
|
|
return (
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-6xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
|
|
<p className="text-gray-400 mb-12 max-w-2xl mx-auto">
|
|
Use what fits your workflow. All methods, same capabilities.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
|
{tools.map((tool, i) => (
|
|
<div
|
|
key={i}
|
|
className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
|
|
tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
|
|
}`}
|
|
>
|
|
<tool.icon className={`w-5 h-5 ${tool.color}`} />
|
|
<span>{tool.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
|
|
<p className="text-sm text-gray-400">
|
|
<strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
|
|
API. Generate images, build flows, browse your gallery, and explore all capabilities
|
|
with ready-to-use code snippets.
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-gray-500 text-sm mt-6">
|
|
Perfect for Claude Code, Cursor, and any AI-powered workflow.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|