redesign: full Fibe promo — purple glass, all features, Genies, stack
This commit is contained in:
parent
5e40a68e45
commit
71bee93116
@ -2,18 +2,95 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #ffffff;
|
||||
background: #0a0914;
|
||||
color: #f1f5f9;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Animated gradient background */
|
||||
.bg-fibe {
|
||||
background: linear-gradient(135deg, #0f0c29 0%, #1a1540 30%, #302b63 60%, #24243e 100%);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
/* Grid overlay */
|
||||
.grid-overlay {
|
||||
background-image:
|
||||
linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
/* Glassmorphism */
|
||||
.glass {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.09);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid rgba(167,139,250,0.2);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
/* Glow effects */
|
||||
.glow-purple {
|
||||
box-shadow: 0 0 60px rgba(167,139,250,0.15), 0 0 120px rgba(167,139,250,0.06);
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 40px rgba(167,139,250,0.4);
|
||||
}
|
||||
|
||||
/* Accent */
|
||||
.accent { color: #a78bfa; }
|
||||
.accent-bg { background: #a78bfa; }
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #60a5fa 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Subtle radial glows */
|
||||
.glow-orb-1 {
|
||||
position: absolute;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glow-orb-2 {
|
||||
position: absolute;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: #0f0c29; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }
|
||||
|
||||
453
app/page.jsx
453
app/page.jsx
@ -1,185 +1,384 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white">
|
||||
<main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden">
|
||||
|
||||
{/* 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>
|
||||
{/* Ambient glow orbs */}
|
||||
<div className="glow-orb-1" style={{top: '-100px', right: '-100px'}} />
|
||||
<div className="glow-orb-2" style={{bottom: '20%', left: '-80px'}} />
|
||||
<div className="glow-orb-1" style={{top: '60%', right: '10%', width: '400px', height: '400px'}} />
|
||||
|
||||
{/* ── NAV ── */}
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/5 glass">
|
||||
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-lg accent-bg flex items-center justify-center text-xs font-black text-white/90">f</div>
|
||||
<span className="text-lg font-bold tracking-tight">fibe</span>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center gap-8 text-sm text-white/50">
|
||||
<a href="#build" className="hover:text-white transition-colors">What you can build</a>
|
||||
<a href="#how" className="hover:text-white transition-colors">How it works</a>
|
||||
<a href="#features" className="hover:text-white transition-colors">Features</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"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<a href="https://next.fibe.live/login" className="text-sm text-white/50 hover:text-white transition-colors hidden md:block">Sign in</a>
|
||||
<a href="https://next.fibe.live/register"
|
||||
className="text-sm font-semibold px-4 py-2 rounded-lg transition-all hover:scale-[1.03]"
|
||||
style={{background: 'linear-gradient(135deg, #a78bfa, #818cf8)'}}>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</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">
|
||||
{/* ── HERO ── */}
|
||||
<section className="relative pt-40 pb-20 px-6">
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 text-xs font-medium border rounded-full px-4 py-1.5 mb-8"
|
||||
style={{color: '#a78bfa', borderColor: 'rgba(167,139,250,0.3)', background: 'rgba(167,139,250,0.08)'}}>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
|
||||
Docker-native fullstack orchestration
|
||||
Docker-native fullstack orchestration — fra1 online
|
||||
</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 className="text-6xl md:text-8xl font-black tracking-tight leading-[1.02] mb-6">
|
||||
Your entire stack,<br />
|
||||
<span className="gradient-text text-glow">live in seconds.</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.
|
||||
Fibe spins up production-like fullstack environments from any git repo.
|
||||
Web apps, APIs, databases, AI agents, jobs — all running on your own infra.
|
||||
</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 className="flex flex-col sm:flex-row gap-3 justify-center mb-20">
|
||||
<a href="https://next.fibe.live/register"
|
||||
className="font-bold px-8 py-3.5 rounded-xl transition-all hover:scale-[1.02] hover:shadow-lg text-sm"
|
||||
style={{background: 'linear-gradient(135deg, #a78bfa, #818cf8)', boxShadow: '0 0 30px rgba(167,139,250,0.3)'}}>
|
||||
Start for free — no credit card
|
||||
</a>
|
||||
<a href="https://github.com/fibegg/sdk"
|
||||
className="border text-white/60 font-semibold px-8 py-3.5 rounded-xl hover:text-white transition-all text-sm glass"
|
||||
style={{borderColor: 'rgba(255,255,255,0.12)'}}>
|
||||
View SDK on GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-6 font-mono text-sm leading-7">
|
||||
|
||||
{/* Terminal mockup */}
|
||||
<div className="max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden glow-purple">
|
||||
<div className="flex items-center gap-1.5 px-4 py-3 border-b" style={{borderColor: 'rgba(167,139,250,0.15)'}}>
|
||||
<span className="w-3 h-3 rounded-full bg-red-500/70"></span>
|
||||
<span className="w-3 h-3 rounded-full bg-yellow-500/70"></span>
|
||||
<span className="w-3 h-3 rounded-full bg-green-500/70"></span>
|
||||
<span className="ml-3 text-xs font-mono" style={{color: 'rgba(167,139,250,0.5)'}}>fibe sdk</span>
|
||||
</div>
|
||||
<div className="p-6 font-mono text-sm text-left leading-8">
|
||||
<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>
|
||||
<p><span className="text-white/30">$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span className="text-white/40">--host 165.232.68.197</span></p>
|
||||
<p className="text-white/30"> ✓ Marquee registered — fra1</p>
|
||||
<p><span className="text-white/30">$</span> <span className="text-blue-400">fibe pg create</span> <span className="text-white/40">--name my-app --marquee fra1</span></p>
|
||||
<p className="text-white/30"> ✓ Cloning repo... building image... starting...</p>
|
||||
<p className="text-white/30"> ✓ Live at: <span className="text-white/60">https://my-app.fibe.me</span></p>
|
||||
<p><span className="text-white/30">$</span> <span className="text-yellow-400">git push</span> <span className="text-white/40">&& # hot-reload kicks in</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">
|
||||
{/* ── WHAT YOU CAN BUILD ── */}
|
||||
<section id="build" className="py-24 px-6 relative">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(167,139,250,0.6)'}}>What you can build</p>
|
||||
<h2 className="text-4xl md:text-5xl font-black tracking-tight">Anything that runs in Docker.</h2>
|
||||
<p className="text-white/40 mt-4 max-w-xl mx-auto">If it has a Dockerfile, Fibe can run it. Here's what people ship every day.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ icon: '🌐', label: 'Web Apps', desc: 'Next.js, Nuxt, SvelteKit, Remix, Rails, Django', color: 'rgba(167,139,250,0.15)' },
|
||||
{ icon: '⚙️', label: 'REST & GraphQL APIs', desc: 'Express, Fastify, Go Fiber, FastAPI, NestJS', color: 'rgba(99,102,241,0.15)' },
|
||||
{ icon: '🗄️', label: 'Databases', desc: 'Postgres, MySQL, MongoDB, Redis, SQLite', color: 'rgba(59,130,246,0.15)' },
|
||||
{ icon: '🤖', label: 'AI Agents', desc: 'Autonomous Genies that build, debug & deploy', color: 'rgba(167,139,250,0.15)' },
|
||||
{ icon: '🔄', label: 'Preview Envs', desc: 'Every branch gets its own live playground URL', color: 'rgba(34,197,94,0.12)' },
|
||||
{ icon: '⚡', label: 'Jobs & CI', desc: 'One-shot Tricks: tests, migrations, builds, cron', color: 'rgba(234,179,8,0.12)' },
|
||||
{ icon: '🧩', label: 'Microservices', desc: 'Multi-repo compose: frontend + backend + infra', color: 'rgba(239,68,68,0.1)' },
|
||||
{ icon: '🛠️', label: 'Internal Tools', desc: 'Metabase, n8n, Grafana, anything self-hosted', color: 'rgba(20,184,166,0.12)' },
|
||||
].map(({ icon, label, desc, color }) => (
|
||||
<div key={label}
|
||||
className="glass rounded-2xl p-5 hover:scale-[1.02] transition-all cursor-default group"
|
||||
style={{background: color, borderColor: 'rgba(255,255,255,0.07)'}}>
|
||||
<div className="text-3xl mb-3">{icon}</div>
|
||||
<h3 className="font-bold text-sm text-white mb-1.5">{label}</h3>
|
||||
<p className="text-xs text-white/40 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── HOW IT WORKS ── */}
|
||||
<section id="how" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(167,139,250,0.6)'}}>How it works</p>
|
||||
<h2 className="text-4xl md:text-5xl font-black tracking-tight">Four steps to a live URL.</h2>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Connector line */}
|
||||
<div className="absolute left-8 top-10 bottom-10 w-px hidden md:block"
|
||||
style={{background: 'linear-gradient(180deg, rgba(167,139,250,0.4), rgba(167,139,250,0.05))'}} />
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
n: '01', title: 'Connect a Prop',
|
||||
desc: 'Link any GitHub or Gitea repository. Fibe tracks every branch. One repo can power multiple environments.',
|
||||
badge: 'Prop'
|
||||
},
|
||||
{
|
||||
n: '02', title: 'Register a Marquee',
|
||||
desc: 'Point Fibe at any VPS or bare metal server. One command. SSH in, Docker running — that\'s all you need.',
|
||||
badge: 'Marquee'
|
||||
},
|
||||
{
|
||||
n: '03', title: 'Launch a Playground',
|
||||
desc: 'Pick a Playspec (your docker-compose blueprint), choose a branch, hit launch. Full environment in ~60s.',
|
||||
badge: 'Playground'
|
||||
},
|
||||
{
|
||||
n: '04', title: 'Push & iterate',
|
||||
desc: 'Your playground hot-reloads on every git push. Share the URL instantly. Multiple playgrounds per project.',
|
||||
badge: 'Live'
|
||||
},
|
||||
].map(({ n, title, desc, badge }) => (
|
||||
<div key={n} className="flex gap-6 glass rounded-2xl p-6 ml-0 md:ml-4">
|
||||
<div className="w-12 h-12 rounded-xl flex items-center justify-center text-xs font-black shrink-0 relative z-10"
|
||||
style={{background: 'rgba(167,139,250,0.15)', color: '#a78bfa', border: '1px solid rgba(167,139,250,0.2)'}}>
|
||||
{n}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="font-bold text-white">{title}</h3>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full font-mono"
|
||||
style={{background: 'rgba(167,139,250,0.12)', color: '#a78bfa', border: '1px solid rgba(167,139,250,0.2)'}}>
|
||||
{badge}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-white/45 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CORE FEATURES ── */}
|
||||
<section id="features" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(167,139,250,0.6)'}}>Platform</p>
|
||||
<h2 className="text-4xl md:text-5xl font-black tracking-tight">Every layer, covered.</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{[
|
||||
{
|
||||
icon: '🌀',
|
||||
title: 'Playgrounds',
|
||||
desc: 'Full docker-compose environments with live URLs. Every service wired, every port routed, every env var injected — automatically.',
|
||||
tags: ['docker-compose', 'live URL', 'hot-reload']
|
||||
},
|
||||
{
|
||||
icon: '🧬',
|
||||
title: 'Props',
|
||||
desc: 'Git repositories as first-class citizens. Connect GitHub or Gitea. Track any branch. Multi-repo setups supported out of the box.',
|
||||
tags: ['GitHub', 'Gitea', 'multi-repo']
|
||||
},
|
||||
{
|
||||
icon: '🏗️',
|
||||
title: 'Marquees',
|
||||
desc: 'Your own VPS as the compute layer. No vendor lock-in. DigitalOcean, Hetzner, bare metal — if SSH works, it works.',
|
||||
tags: ['any VPS', 'SSH', 'Docker host']
|
||||
},
|
||||
{
|
||||
icon: '📐',
|
||||
title: 'Playspecs',
|
||||
desc: 'Reusable deployment blueprints — like Helm charts but for docker-compose. Define once, launch many playgrounds from one spec.',
|
||||
tags: ['blueprints', 'reusable', 'versioned']
|
||||
},
|
||||
{
|
||||
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.'
|
||||
title: 'Tricks (Jobs)',
|
||||
desc: 'One-shot job mode for anything that runs to completion. Tests, DB migrations, cron tasks, build pipelines — all containerized.',
|
||||
tags: ['CI/CD', 'cron', 'migrations']
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI Genies',
|
||||
desc: 'Autonomous agents that build, debug and deploy inside your Playgrounds.'
|
||||
title: 'Genies (AI Agents)',
|
||||
desc: 'Autonomous AI agents that live inside your playgrounds. They build features, fix bugs, write tests and deploy — while you sleep.',
|
||||
tags: ['autonomous', 'Claude', 'in-playground']
|
||||
},
|
||||
{
|
||||
icon: '🔒',
|
||||
title: 'Secrets management',
|
||||
desc: 'Encrypted key-value store. Inject env vars into any service without touching code.'
|
||||
icon: '🔐',
|
||||
title: 'Secrets Vault',
|
||||
desc: 'Encrypted key-value store for credentials. Inject into any service at runtime — no plaintext in compose files or repos.',
|
||||
tags: ['encrypted', 'per-service', 'env injection']
|
||||
},
|
||||
].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">
|
||||
{
|
||||
icon: '🌍',
|
||||
title: 'Traefik Routing',
|
||||
desc: 'Auto-provisioned subdomains and Let\'s Encrypt SSL for every service. HTTP→HTTPS redirect, wildcard certs, zero config.',
|
||||
tags: ['SSL', 'subdomains', 'HTTP/2']
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
title: 'Webhooks & Events',
|
||||
desc: 'Git push triggers automatic rebuilds in production mode. Full audit log of every deployment, failure, and agent action.',
|
||||
tags: ['auto-deploy', 'audit log', 'git push']
|
||||
},
|
||||
].map(({ icon, title, desc, tags }) => (
|
||||
<div key={title} className="glass rounded-2xl p-6 hover:scale-[1.01] transition-all"
|
||||
style={{borderColor: 'rgba(167,139,250,0.1)'}}>
|
||||
<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>
|
||||
<h3 className="font-bold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm text-white/45 leading-relaxed mb-4">{desc}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map(t => (
|
||||
<span key={t} className="text-xs px-2 py-0.5 rounded font-mono"
|
||||
style={{background: 'rgba(167,139,250,0.08)', color: 'rgba(167,139,250,0.7)', border: '1px solid rgba(167,139,250,0.15)'}}>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</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">
|
||||
{/* ── GENIES SPOTLIGHT ── */}
|
||||
<section className="py-24 px-6 relative overflow-hidden" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="glow-orb-1" style={{top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '800px', height: '800px', opacity: 0.6}} />
|
||||
<div className="max-w-5xl mx-auto relative z-10">
|
||||
<div className="glass-strong rounded-3xl p-10 md:p-16 text-center glow-purple">
|
||||
<div className="text-5xl mb-6">🤖</div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(167,139,250,0.6)'}}>Genies — AI Agents</p>
|
||||
<h2 className="text-3xl md:text-5xl font-black tracking-tight mb-6">
|
||||
Agents that actually<br /><span className="gradient-text">ship code.</span>
|
||||
</h2>
|
||||
<p className="text-white/50 text-lg max-w-2xl mx-auto mb-8 leading-relaxed">
|
||||
Genies are autonomous Claude-powered agents that live inside your Playgrounds.
|
||||
They have full access to your codebase, terminal, Docker, and git.
|
||||
Assign them a task — they plan, implement, test and push.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-3 gap-4 text-left mt-10">
|
||||
{[
|
||||
{ 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>
|
||||
{ title: 'Full environment access', desc: 'Reads your code, runs commands, edits files, pushes commits — inside your live Playground.' },
|
||||
{ title: 'Mutter stream', desc: 'Real-time internal monologue. Watch the agent think, plan and debug. Transparent by design.' },
|
||||
{ title: 'Artefacts & Feedback', desc: 'Genies produce artefacts (files, reports) and request feedback. Full async collaboration loop.' },
|
||||
].map(({ title, desc }) => (
|
||||
<div key={title} className="glass rounded-xl p-5" style={{borderColor: 'rgba(167,139,250,0.15)'}}>
|
||||
<h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
|
||||
<p className="text-xs text-white/40 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── STACK ── */}
|
||||
<section id="stack" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(167,139,250,0.6)'}}>Built on boring tech</p>
|
||||
<h2 className="text-4xl md:text-5xl font-black tracking-tight mb-4">Battle-tested all the way down.</h2>
|
||||
<p className="text-white/40 max-w-lg mx-auto">No WASM runtimes. No experimental runtimes. Just Docker, SSH, git and Traefik doing what they've done for years.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white mb-1">{title}</h3>
|
||||
<p className="text-sm text-white/50 leading-relaxed">{desc}</p>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4 text-white/30">Platform</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Docker', 'docker-compose', 'Traefik', "Let's Encrypt", 'SSH', 'Go', 'PostgreSQL', 'Redis'].map(t => (
|
||||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||||
style={{color: '#a78bfa', borderColor: 'rgba(167,139,250,0.15)'}}>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4 text-white/30">Works with any framework</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Next.js', 'Nuxt', 'SvelteKit', 'Remix', 'Rails', 'Django', 'FastAPI', 'Go Fiber', 'NestJS', 'Laravel', 'Spring Boot', 'Elixir/Phoenix'].map(t => (
|
||||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||||
style={{color: 'rgba(241,245,249,0.5)', borderColor: 'rgba(255,255,255,0.07)'}}>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── STATS ── */}
|
||||
<section className="py-16 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ n: '60s', label: 'avg Playground boot time' },
|
||||
{ n: '∞', label: 'Playgrounds per Marquee' },
|
||||
{ n: '100%', label: 'your infra, your data' },
|
||||
{ n: '0', label: 'vendor lock-in' },
|
||||
].map(({ n, label }) => (
|
||||
<div key={label} className="text-center glass rounded-2xl p-6">
|
||||
<div className="text-4xl font-black gradient-text mb-2">{n}</div>
|
||||
<div className="text-xs text-white/40">{label}</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
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-32 px-6 relative overflow-hidden" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="glow-orb-1" style={{top: '50%', left: '50%', transform: 'translate(-50%,-50%)'}} />
|
||||
<div className="max-w-2xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight mb-4">
|
||||
Ready to <span className="gradient-text">fibe</span>?
|
||||
</h2>
|
||||
<p className="text-white/40 text-lg mb-10">Your first Playground is free. No credit card. No CLI required to start.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<a href="https://next.fibe.live/register"
|
||||
className="font-bold px-10 py-4 rounded-xl transition-all hover:scale-[1.02] text-base"
|
||||
style={{background: 'linear-gradient(135deg, #a78bfa, #818cf8)', boxShadow: '0 0 40px rgba(167,139,250,0.35)'}}>
|
||||
Start building — free
|
||||
</a>
|
||||
<a href="https://github.com/fibegg"
|
||||
className="border font-semibold px-10 py-4 rounded-xl hover:text-white transition-all text-base glass text-white/50"
|
||||
style={{borderColor: 'rgba(255,255,255,0.1)'}}>
|
||||
Explore on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</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">
|
||||
{/* ── FOOTER ── */}
|
||||
<footer className="py-10 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}>
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-md accent-bg flex items-center justify-center text-xs font-black">f</div>
|
||||
<span className="font-bold text-white/60">fibe</span>
|
||||
</div>
|
||||
<span className="text-sm text-white/25">© 2026 Fibe — Your entire stack, live in seconds.</span>
|
||||
<div className="flex gap-6 text-sm text-white/30">
|
||||
<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>
|
||||
<a href="https://git-next.fibe.live/fibegg" className="hover:text-white transition-colors">Gitea</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user