190 lines
9.5 KiB
JavaScript
190 lines
9.5 KiB
JavaScript
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen bg-[#0a0a0a] text-white">
|
|
|
|
{/* Nav */}
|
|
<nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
|
|
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<span className="text-xl font-bold tracking-tight">fibe</span>
|
|
<div className="hidden md:flex items-center gap-8 text-sm text-white/60">
|
|
<a href="#features" className="hover:text-white transition-colors">Features</a>
|
|
<a href="#how" className="hover:text-white transition-colors">How it works</a>
|
|
<a href="#stack" className="hover:text-white transition-colors">Stack</a>
|
|
</div>
|
|
<a
|
|
href="https://next.fibe.live"
|
|
className="text-sm bg-white text-black font-semibold px-4 py-2 rounded-lg hover:bg-white/90 transition-colors"
|
|
>
|
|
Get started
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero */}
|
|
<section className="pt-40 pb-24 px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="inline-flex items-center gap-2 text-xs font-medium text-white/50 border border-white/10 rounded-full px-4 py-1.5 mb-8">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
|
|
Docker-native fullstack orchestration
|
|
</div>
|
|
<h1 className="text-5xl md:text-7xl font-black tracking-tight leading-[1.05] mb-6">
|
|
Ship faster.<br />
|
|
<span className="text-white/30">Break less.</span>
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-white/50 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
Fibe spins up production-like fullstack environments in seconds.
|
|
Git push. Done. No DevOps degree required.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<a
|
|
href="https://next.fibe.live"
|
|
className="bg-white text-black font-bold px-8 py-3.5 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-sm"
|
|
>
|
|
Start for free
|
|
</a>
|
|
<a
|
|
href="https://github.com/fibegg"
|
|
className="border border-white/15 text-white/70 font-semibold px-8 py-3.5 rounded-xl hover:border-white/30 hover:text-white transition-all text-sm"
|
|
>
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Terminal snippet */}
|
|
<section className="pb-24 px-6">
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
|
|
<div className="flex items-center gap-1.5 px-4 py-3 border-b border-white/5">
|
|
<span className="w-3 h-3 rounded-full bg-red-500/60"></span>
|
|
<span className="w-3 h-3 rounded-full bg-yellow-500/60"></span>
|
|
<span className="w-3 h-3 rounded-full bg-green-500/60"></span>
|
|
<span className="ml-3 text-xs text-white/30 font-mono">terminal</span>
|
|
</div>
|
|
<div className="p-6 font-mono text-sm leading-7">
|
|
<p><span className="text-white/30">$</span> <span className="text-green-400">brew install fibegg/sdk/fibe</span></p>
|
|
<p><span className="text-white/30">$</span> <span className="text-blue-400">fibe pg create</span> <span className="text-white/60">--name my-app</span></p>
|
|
<p className="text-white/40"> Launching playground... <span className="text-green-400">done</span></p>
|
|
<p className="text-white/40"> URL: <span className="text-white/70">https://my-app.fibe.me</span></p>
|
|
<p><span className="text-white/30">$</span> <span className="text-purple-400">git push</span> <span className="text-white/60">&& done.</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section id="features" className="py-24 px-6 border-t border-white/5">
|
|
<div className="max-w-6xl mx-auto">
|
|
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">Features</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Everything you need. Nothing you don't.</h2>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{[
|
|
{
|
|
icon: '⚡',
|
|
title: 'Instant Playgrounds',
|
|
desc: 'Full docker-compose environments live in under 60 seconds. Every branch, every PR.'
|
|
},
|
|
{
|
|
icon: '🔀',
|
|
title: 'Git-native workflow',
|
|
desc: 'Connect any GitHub or Gitea repo. Push code, watch it live. No config files to fight.'
|
|
},
|
|
{
|
|
icon: '🌐',
|
|
title: 'Auto SSL & routing',
|
|
desc: 'Traefik-powered subdomains with Let\'s Encrypt SSL out of the box. Zero ops.'
|
|
},
|
|
{
|
|
icon: '🐳',
|
|
title: 'Docker all the way',
|
|
desc: 'Your compose file is the spec. Fibe orchestrates the rest — on your own VPS or ours.'
|
|
},
|
|
{
|
|
icon: '🤖',
|
|
title: 'AI Genies',
|
|
desc: 'Autonomous agents that build, debug and deploy inside your Playgrounds.'
|
|
},
|
|
{
|
|
icon: '🔒',
|
|
title: 'Secrets management',
|
|
desc: 'Encrypted key-value store. Inject env vars into any service without touching code.'
|
|
},
|
|
].map(({ icon, title, desc }) => (
|
|
<div key={title} className="p-6 rounded-xl border border-white/8 bg-white/[0.02] hover:bg-white/[0.04] transition-colors">
|
|
<div className="text-2xl mb-4">{icon}</div>
|
|
<h3 className="font-semibold text-white mb-2">{title}</h3>
|
|
<p className="text-sm text-white/50 leading-relaxed">{desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How it works */}
|
|
<section id="how" className="py-24 px-6 border-t border-white/5">
|
|
<div className="max-w-3xl mx-auto">
|
|
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">How it works</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Three steps to live.</h2>
|
|
<div className="space-y-6">
|
|
{[
|
|
{ n: '01', title: 'Connect a repo', desc: 'Link your GitHub or Gitea repository as a Prop. Fibe tracks every branch.' },
|
|
{ n: '02', title: 'Launch a Playground', desc: 'Pick a Marquee (your VPS), choose a Playspec, hit launch. Docker does the rest.' },
|
|
{ n: '03', title: 'Push and iterate', desc: 'Your Playground hot-reloads on every push. Share the URL with your team instantly.' },
|
|
].map(({ n, title, desc }) => (
|
|
<div key={n} className="flex gap-6 p-6 rounded-xl border border-white/8 bg-white/[0.02]">
|
|
<span className="text-3xl font-black text-white/10 shrink-0 w-12">{n}</span>
|
|
<div>
|
|
<h3 className="font-semibold text-white mb-1">{title}</h3>
|
|
<p className="text-sm text-white/50 leading-relaxed">{desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stack */}
|
|
<section id="stack" className="py-24 px-6 border-t border-white/5">
|
|
<div className="max-w-6xl mx-auto text-center">
|
|
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest mb-4">Built on boring tech</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">Battle-tested stack.</h2>
|
|
<p className="text-white/50 mb-12">We don't chase hype. We chase reliability.</p>
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|
{['Docker', 'docker-compose', 'Traefik', 'Let\'s Encrypt', 'Go', 'PostgreSQL', 'Git', 'SSH'].map(t => (
|
|
<span key={t} className="px-4 py-2 rounded-lg border border-white/10 text-sm text-white/60 font-mono">{t}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-24 px-6 border-t border-white/5">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<h2 className="text-4xl md:text-5xl font-black mb-4">Ready to fibe?</h2>
|
|
<p className="text-white/50 mb-8">Your first Playground is free. No credit card.</p>
|
|
<a
|
|
href="https://next.fibe.live"
|
|
className="inline-block bg-white text-black font-bold px-10 py-4 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-base"
|
|
>
|
|
Start building
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 px-6 border-t border-white/5">
|
|
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-white/30">
|
|
<span className="font-bold text-white/50">fibe</span>
|
|
<span>© 2026 Fibe. Ship faster. Break less.</span>
|
|
<div className="flex gap-6">
|
|
<a href="https://github.com/fibegg" className="hover:text-white transition-colors">GitHub</a>
|
|
<a href="https://next.fibe.live" className="hover:text-white transition-colors">App</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</main>
|
|
)
|
|
}
|