63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
import Image from 'next/image'
|
|
import { CheckCircle2 } from 'lucide-react'
|
|
|
|
const agents = [
|
|
{ name: 'Claude Code', icon: '/agents/anthropics.png', url: 'https://docs.anthropic.com/en/docs/claude-code' },
|
|
{ name: 'Codex', icon: '/agents/openai.png', url: 'https://github.com/openai/codex' },
|
|
{ name: 'Cursor', icon: '/agents/getcursor.png', url: 'https://cursor.com' },
|
|
{ name: 'Aider', icon: '/agents/aider-ai.png', url: 'https://aider.chat' },
|
|
{ name: 'Goose', icon: '/agents/block.png', url: 'https://github.com/block/goose' },
|
|
{ name: 'Amp', icon: '/agents/sourcegraph.png', url: 'https://ampcode.com' },
|
|
{ name: 'Gemini CLI', icon: '/agents/google-gemini.png', url: 'https://github.com/google-gemini/gemini-cli' },
|
|
{ name: 'Cline', icon: '/agents/cline.png', url: 'https://cline.bot' },
|
|
{ name: 'OpenCode', icon: '/agents/nicepkg.png', url: 'https://opencode.ai/' },
|
|
{ name: 'Copilot', icon: '/agents/github.png', url: 'https://github.com/features/copilot' },
|
|
]
|
|
|
|
export function Agents() {
|
|
return (
|
|
<section className="py-24 px-6 border-t border-border/30">
|
|
<div className="mx-auto max-w-5xl">
|
|
<div className="max-w-2xl mb-12">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<CheckCircle2 className="h-4 w-4 text-primary" />
|
|
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
|
|
Compatibility
|
|
</span>
|
|
</div>
|
|
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
|
|
Works with every agent.
|
|
</h2>
|
|
<p className="text-muted-foreground font-serif text-lg leading-relaxed">
|
|
All agents work perfectly inside their sandbox but can't impact anything outside
|
|
it. No agent-specific configuration needed.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3">
|
|
{agents.map((agent) => (
|
|
<a
|
|
key={agent.name}
|
|
href={agent.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
|
|
>
|
|
<Image
|
|
src={agent.icon}
|
|
alt={agent.name}
|
|
width={28}
|
|
height={28}
|
|
className="rounded-md shrink-0 bg-muted"
|
|
/>
|
|
<span className="text-sm font-sans font-medium text-foreground group-hover:text-primary truncate transition-colors">
|
|
{agent.name}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|