79e74b4810
- Hero: gradient text, enhanced CTAs, improved terminal styling - Features: color-coded cards (blue/purple/cyan) with hover effects - Why: card grid layout with color-coded left borders - CTA: stronger visual hierarchy with gradient text - Accessibility: skip-to-content link, main landmark - Remove duplicate main tag from page.tsx Co-Authored-By: Paperclip <noreply@paperclip.ing>
63 lines
3.7 KiB
TypeScript
63 lines
3.7 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-5 py-2 rounded-full bg-blue-500/10 border border-blue-500/30 text-blue-400 text-sm font-medium">
|
|
Open source · MIT licensed
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6 leading-tight bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">
|
|
Self-hostable HTTP request<br />
|
|
inspector + mocker
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-zinc-400 mb-10 max-w-2xl mx-auto leading-relaxed">
|
|
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-16">
|
|
<a
|
|
href="https://github.com/elfoundation/hatch"
|
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-all shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40 hover:-translate-y-0.5"
|
|
>
|
|
<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-8 py-4 bg-zinc-800 hover:bg-zinc-700 text-white font-semibold rounded-lg border border-zinc-700 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
|
|
>
|
|
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 shadow-2xl">
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-gradient-to-r from-zinc-800/50 to-zinc-800/30 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-5 text-left text-sm font-mono overflow-x-auto">
|
|
<code>
|
|
<span className="text-blue-400 font-semibold">$</span>{' '}
|
|
<span className="text-zinc-300">docker compose up -d</span>{'\n'}
|
|
<span className="text-emerald-400">✓ hatch started on :8080</span>{'\n'}
|
|
<span className="text-blue-400 font-semibold">$</span>{' '}
|
|
<span className="text-zinc-300">curl -X POST https://your-bin.hatch.surf/test -d {'{\'hello\':\'world\'}'}</span>{'\n'}
|
|
<span className="text-emerald-400">✓ captured — view at https://your-bin.hatch.surf/inspect</span>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|