7bbc0ddda3
- Recreated old website with Next.js 16 + Tailwind CSS - Hero section with terminal animation - Features section (Capture, Inspect, Mock) - Why section (Compliance, Cost, Speed) - CTA section - Header and Footer components - Dark theme with Inter + JetBrains Mono fonts - Static export for Docker deployment Co-Authored-By: Paperclip <noreply@paperclip.ing>
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
const features = [
|
|
{
|
|
icon: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
),
|
|
title: 'Capture',
|
|
description: 'Method, path, headers, query, body. Persists across restarts because the storage is SQLite on disk, not a hosted queue.',
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
),
|
|
title: 'Inspect',
|
|
description: 'A live SSE feed of incoming requests. Click any captured request to see the headers, the body, the timing.',
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
</svg>
|
|
),
|
|
title: 'Mock',
|
|
description: 'Return a 200, a 500, or a custom JSON payload. For testing your own retry, backoff, and error-handling logic.',
|
|
},
|
|
]
|
|
|
|
export default function Features() {
|
|
return (
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
|
|
Three things, and nothing else
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={feature.title}
|
|
className="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 hover:border-zinc-700 transition-colors"
|
|
>
|
|
<div className="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-500/10 text-blue-400 mb-4">
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
|
|
<p className="text-zinc-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|