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>
63 lines
3.3 KiB
TypeScript
63 lines
3.3 KiB
TypeScript
export default function Hero() {
|
|
return (
|
|
<section className="pt-32 pb-20 px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="inline-block mb-6 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium">
|
|
Open source · MIT licensed
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6 leading-tight">
|
|
Self-hostable HTTP request<br />
|
|
inspector + mocker
|
|
</h1>
|
|
|
|
<p className="text-xl text-zinc-400 mb-8 max-w-2xl mx-auto">
|
|
One Go binary. SQLite under the hood.
|
|
<code className="mx-1 px-2 py-0.5 bg-zinc-800 border border-zinc-700 rounded text-fuchsia-400 text-base">
|
|
docker compose up
|
|
</code>
|
|
, and you have an inspection endpoint and a live feed in under 30 seconds.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
|
<a
|
|
href="https://github.com/elfoundation/hatch"
|
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
</svg>
|
|
View on GitHub
|
|
</a>
|
|
<a
|
|
href="https://github.com/elfoundation/hatch#quick-start"
|
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-medium rounded-lg border border-zinc-700 transition-colors"
|
|
>
|
|
Quick Start →
|
|
</a>
|
|
</div>
|
|
|
|
{/* Terminal */}
|
|
<div className="max-w-2xl mx-auto rounded-xl overflow-hidden border border-zinc-800 bg-zinc-900/50 backdrop-blur-sm">
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-zinc-800/50 border-b border-zinc-800">
|
|
<div className="w-3 h-3 rounded-full bg-zinc-600"></div>
|
|
<div className="w-3 h-3 rounded-full bg-zinc-600"></div>
|
|
<div className="w-3 h-3 rounded-full bg-zinc-600"></div>
|
|
<span className="ml-2 text-sm text-zinc-500">terminal</span>
|
|
</div>
|
|
<pre className="p-4 text-left text-sm font-mono overflow-x-auto">
|
|
<code>
|
|
<span className="text-green-400">$</span>{' '}
|
|
<span className="text-zinc-300">docker compose up -d</span>{'\n'}
|
|
<span className="text-zinc-500">✓ hatch started on :8080</span>{'\n'}
|
|
<span className="text-green-400">$</span>{' '}
|
|
<span className="text-zinc-300">curl -X POST https://your-bin.hatch.surf/test -d {'{\'hello\':\'world\'}'}</span>{'\n'}
|
|
<span className="text-zinc-500">✓ captured — view at https://your-bin.hatch.surf/inspect</span>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|