vyakymenko/fibe-me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hype overhaul: manifesto, ticker, everything-included checklist, revolution CTA

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
vyakymenko 2026-04-23 06:32:45 +00:00
parent ba7541c259
commit a0a2bf3229
2 changed files with 199 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/globals.css
View File

@ -60,9 +60,15 @@
50% { box-shadow: 0 0 50px rgba(167,139,250,0.4), 0 0 80px rgba(139,92,246,0.2); } 50% { box-shadow: 0 0 50px rgba(167,139,250,0.4), 0 0 80px rgba(139,92,246,0.2); }
} }
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-33.3333%); }
}
.animate-flame-out { animation: header-flame-out 3.2s cubic-bezier(0.4,0,0.2,1) infinite; } .animate-flame-out { animation: header-flame-out 3.2s cubic-bezier(0.4,0,0.2,1) infinite; }
.animate-float-up { animation: floatUp 0.6s ease-out forwards; } .animate-float-up { animation: floatUp 0.6s ease-out forwards; }
.animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; } .animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
.animate-ticker { animation: ticker 50s linear infinite; }
} }
*, *::before, *::after { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; }

240
app/page.jsx
View File

@ -3,14 +3,13 @@ export default function Home() {
<main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden"> <main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden">
{/* Ambient orbs */} {/* Ambient orbs */}
<div className="glow-orb" style={{width:700,height:700,background:'radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%)',top:-200,right:-150}} /> <div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.16) 0%, transparent 70%)',top:-350,right:-250}} />
<div className="glow-orb" style={{width:500,height:500,background:'radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 70%)',bottom:'15%',left:-150}} /> <div className="glow-orb" style={{width:600,height:600,background:'radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%)',bottom:'10%',left:-200}} />
<div className="glow-orb" style={{width:400,height:400,background:'radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%)',top:'55%',right:'5%'}} /> <div className="glow-orb" style={{width:400,height:400,background:'radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%)',top:'50%',right:'3%'}} />
{/* ── NAV ── */} {/* ── NAV ── */}
<nav className="fixed top-0 w-full z-50 glass" style={{borderBottom:'1px solid rgba(139,92,246,0.1)'}}> <nav className="fixed top-0 w-full z-50 glass" style={{borderBottom:'1px solid rgba(139,92,246,0.1)'}}>
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
{/* Phoenix logo */}
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="relative w-8 h-8"> <div className="relative w-8 h-8">
<div className="w-8 h-8 rounded-xl flex items-center justify-center text-sm font-black" <div className="w-8 h-8 rounded-xl flex items-center justify-center text-sm font-black"
@ -25,10 +24,10 @@ export default function Home() {
</div> </div>
<div className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}> <div className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}>
<a href="#build" className="hover:text-white transition-colors">Build</a> <a href="#manifesto" className="hover:text-white transition-colors">Why Fibe</a>
<a href="#how" className="hover:text-white transition-colors">How it works</a>
<a href="#features" className="hover:text-white transition-colors">Platform</a> <a href="#features" className="hover:text-white transition-colors">Platform</a>
<a href="#genies" className="hover:text-white transition-colors">Genies</a> <a href="#genies" className="hover:text-white transition-colors">Genies</a>
<a href="#everything" className="hover:text-white transition-colors">Everything</a>
<a href="#stack" className="hover:text-white transition-colors">Stack</a> <a href="#stack" className="hover:text-white transition-colors">Stack</a>
</div> </div>
@ -41,7 +40,7 @@ export default function Home() {
<a href="https://next.fibe.live/register" <a href="https://next.fibe.live/register"
className="text-sm font-semibold px-4 py-2 rounded-xl transition-all hover:scale-[1.03] hover:brightness-110" className="text-sm font-semibold px-4 py-2 rounded-xl transition-all hover:scale-[1.03] hover:brightness-110"
style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}> style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}>
Get started Get started free
</a> </a>
</div> </div>
</div> </div>
@ -52,27 +51,31 @@ export default function Home() {
<div className="max-w-5xl mx-auto text-center"> <div className="max-w-5xl mx-auto text-center">
<div className="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-1.5 mb-10" <div className="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-1.5 mb-10"
style={{color:'#c4b5fd',border:'1px solid rgba(139,92,246,0.25)',background:'rgba(139,92,246,0.08)'}}> style={{color:'#c4b5fd',border:'1px solid rgba(139,92,246,0.3)',background:'rgba(139,92,246,0.1)'}}>
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" /> <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
Fullstack orchestration — fra1 · fra2 · nyc3 · your VPS The fullstack development revolution
</div> </div>
<h1 className="font-display text-6xl md:text-8xl font-normal tracking-tight leading-[1.05] mb-6" <h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8"
style={{letterSpacing:'-0.02em'}}> style={{letterSpacing:'-0.03em'}}>
Your entire stack,<br /> Code to live URL.<br />
<em className="gradient-text not-italic">live in seconds.</em> <em className="gradient-text not-italic">Sixty seconds.</em>
</h1> </h1>
<p className="text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed" <p className="text-xl md:text-2xl max-w-2xl mx-auto mb-4 leading-relaxed"
style={{color:'rgba(161,161,170,0.8)'}}> style={{color:'rgba(255,255,255,0.55)'}}>
Fibe orchestrates fullstack environments from any git repo — web apps, APIs, databases, Fibe orchestrates complete fullstack environments — apps, APIs, databases,
AI agents, preview envs and jobs. On your infra. Zero DevOps. AI agents, preview envs, jobs — on <em className="not-italic" style={{color:'rgba(196,181,253,0.85)'}}>your</em> infrastructure.
</p>
<p className="text-base max-w-xl mx-auto mb-14"
style={{color:'rgba(161,161,170,0.45)'}}>
No DevOps team. No YAML hell. No lock-in. No ticket. Just ship.
</p> </p>
<div className="flex flex-col sm:flex-row gap-3 justify-center mb-24"> <div className="flex flex-col sm:flex-row gap-3 justify-center mb-24">
<a href="https://next.fibe.live/register" <a href="https://next.fibe.live/register"
className="font-semibold px-8 py-3.5 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-sm" className="font-semibold px-8 py-3.5 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-sm"
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 40px rgba(139,92,246,0.35)', color:'#fff'}}> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 50px rgba(139,92,246,0.4)', color:'#fff'}}>
Start for free — no card needed Start for free — no card needed
</a> </a>
<a href="https://github.com/fibegg/sdk" <a href="https://github.com/fibegg/sdk"
@ -93,17 +96,53 @@ export default function Home() {
</div> </div>
<div className="p-6 font-mono text-sm text-left leading-8"> <div className="p-6 font-mono text-sm text-left leading-8">
<p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-emerald-400">brew install fibegg/sdk/fibe</span></p> <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-emerald-400">brew install fibegg/sdk/fibe</span></p>
<p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--host 165.232.68.197</span></p> <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--host my-vps.io</span></p>
<p style={{color:'rgba(255,255,255,0.25)'}}> ✓ Marquee <span style={{color:'rgba(255,255,255,0.5)'}}>fra1</span> registered</p> <p style={{color:'rgba(255,255,255,0.25)'}}> <span className="text-emerald-400">✓</span> Marquee registered <span style={{color:'rgba(255,255,255,0.3)'}}>— Traefik, SSL, Docker ready</span></p>
<p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-blue-400">fibe pg create</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--name my-app --marquee fra1</span></p> <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-blue-400">fibe launch</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--repo github.com/you/app --branch main</span></p>
<p style={{color:'rgba(255,255,255,0.25)'}}> ✓ Cloning · building · routing · SSL</p> <p style={{color:'rgba(255,255,255,0.25)'}}> <span className="text-emerald-400">✓</span> Cloning · building · routing · SSL · live</p>
<p style={{color:'rgba(255,255,255,0.25)'}}> ✓ Live → <span style={{color:'rgba(196,181,253,0.8)'}}>https://my-app.fibe.me</span></p> <p style={{color:'rgba(255,255,255,0.25)'}}> <span className="text-emerald-400">✓</span> <span style={{color:'rgba(196,181,253,0.9)'}}>https://app.your-domain.com</span></p>
<p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-yellow-400">git push</span> <span style={{color:'rgba(255,255,255,0.25)'}}> # hot-reload. done.</span></p> <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-yellow-400">git push</span> <span style={{color:'rgba(255,255,255,0.25)'}}># hot-reload. always.</span></p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* ── MANIFESTO ── */}
<section id="manifesto" className="py-20 px-6 relative" style={{borderTop:'1px solid rgba(139,92,246,0.08)',background:'rgba(139,92,246,0.025)'}}>
<div className="max-w-5xl mx-auto">
<p className="text-xs font-semibold uppercase tracking-widest text-center mb-14"
style={{color:'rgba(139,92,246,0.55)'}}>The old way is dead</p>
<div className="grid md:grid-cols-3 gap-12 text-center">
{[
{dead:'"Works on my machine"', alive:'Every dev gets an identical live cloud environment. Reproducible. 60 seconds to spin up.'},
{dead:'45-minute CI queues', alive:'Playgrounds boot in ~60s. Preview every branch on its own URL before touching main.'},
{dead:'The ops team bottleneck', alive:'No DevOps. No YAML archaeology. No ticket. One command: fibe launch.'},
].map(({dead, alive}) => (
<div key={dead}>
<p className="font-display text-2xl mb-3"
style={{color:'rgba(161,161,170,0.25)',letterSpacing:'-0.01em',textDecoration:'line-through'}}>
{dead}
</p>
<p className="text-sm leading-relaxed" style={{color:'rgba(196,181,253,0.65)'}}>{alive}</p>
</div>
))}
</div>
</div>
</section>
{/* ── TECH TICKER ── */}
<div className="py-6 overflow-hidden relative select-none" style={{borderTop:'1px solid rgba(139,92,246,0.05)'}}>
<div className="flex gap-12 animate-ticker" style={{width:'max-content'}}>
{[...Array(3)].flatMap((_, i) =>
['Next.js','Rails','Django','FastAPI','Go Fiber','Laravel','NestJS','SvelteKit','Nuxt','Remix','Spring Boot','Bun',
'Postgres','Redis','MongoDB','ClickHouse','Docker','Traefik','Gitea','Elixir/Phoenix','SQLite','Kotlin','MySQL'].map(t => (
<span key={`${i}-${t}`} className="text-xs font-mono shrink-0"
style={{color:'rgba(139,92,246,0.22)'}}>{t}</span>
))
)}
</div>
</div>
{/* ── WHAT YOU CAN BUILD ── */} {/* ── WHAT YOU CAN BUILD ── */}
<section id="build" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}> <section id="build" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
@ -112,21 +151,21 @@ export default function Home() {
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}> <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
Anything that runs in Docker. Anything that runs in Docker.
</h2> </h2>
<p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}> <p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.6)'}}>
If it has a Dockerfile, Fibe can run it, expose it, route it and SSL it. If it has a Dockerfile, Fibe clones it, builds it, exposes it, routes it and SSLs it. Full stop.
</p> </p>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[ {[
{icon:'🌐', label:'Web Apps', desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel', glow:'rgba(139,92,246,0.12)'}, {icon:'🌐', label:'Web Apps', desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel — live URL, hot-reload, any framework', glow:'rgba(139,92,246,0.12)'},
{icon:'⚙️', label:'REST & GraphQL', desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC', glow:'rgba(99,102,241,0.12)'}, {icon:'⚙️', label:'REST & GraphQL', desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC — backend services wired and routed automatically', glow:'rgba(99,102,241,0.12)'},
{icon:'🗄️', label:'Databases', desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse', glow:'rgba(59,130,246,0.1)'}, {icon:'🗄️', label:'Databases', desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse — persistent volumes, zero extra config', glow:'rgba(59,130,246,0.1)'},
{icon:'🤖', label:'AI Agents', desc:'Multi-provider Genies — Claude, Gemini, GPT, OpenCode — terminal, editor & MCP in every Playground', glow:'rgba(167,139,250,0.12)'}, {icon:'🤖', label:'AI Agents', desc:'Multi-provider Genies — Claude, Gemini, GPT, OpenCode — with terminal, editor & MCP in every Playground', glow:'rgba(167,139,250,0.14)'},
{icon:'🔄', label:'Preview Envs', desc:'Every branch gets its own subdomain & live URL automatically',glow:'rgba(34,197,94,0.09)'}, {icon:'🔄', label:'Preview Envs', desc:'Every branch gets its own subdomain, live URL and fully isolated environment — automatically', glow:'rgba(34,197,94,0.09)'},
{icon:'⚡', label:'Jobs & CI', desc:'One-shot Tricks: tests, migrations, cron, build pipelines', glow:'rgba(234,179,8,0.09)'}, {icon:'⚡', label:'Jobs & CI', desc:'One-shot Tricks: tests, migrations, cron tasks, build pipelines — containerized, logged, audited', glow:'rgba(234,179,8,0.09)'},
{icon:'🧩', label:'Microservices', desc:'Multi-repo compose: frontend + backend + workers + infra', glow:'rgba(239,68,68,0.08)'}, {icon:'🧩', label:'Microservices', desc:'Multi-repo compose: frontend + backend + workers + infra, all wired in one Playground', glow:'rgba(239,68,68,0.08)'},
{icon:'🛠️', label:'Internal Tools', desc:'Metabase, n8n, Grafana, Gitea, anything self-hosted', glow:'rgba(20,184,166,0.09)'}, {icon:'🛠️', label:'Internal Tools', desc:'Metabase, n8n, Grafana, Gitea, anything self-hosted — one command, your domain, SSL', glow:'rgba(20,184,166,0.09)'},
].map(({icon, label, desc, glow}) => ( ].map(({icon, label, desc, glow}) => (
<div key={label} className="glass rounded-2xl p-5 transition-all hover:scale-[1.02] hover:brightness-110 cursor-default" <div key={label} className="glass rounded-2xl p-5 transition-all hover:scale-[1.02] hover:brightness-110 cursor-default"
style={{background:glow, borderColor:'rgba(255,255,255,0.06)'}}> style={{background:glow, borderColor:'rgba(255,255,255,0.06)'}}>
@ -147,6 +186,9 @@ export default function Home() {
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}> <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
Four steps to a live URL. Four steps to a live URL.
</h2> </h2>
<p className="mt-4" style={{color:'rgba(161,161,170,0.6)'}}>
No architecture meetings. No ops tickets. No environment parity nightmares.
</p>
</div> </div>
<div className="space-y-4 relative"> <div className="space-y-4 relative">
@ -154,10 +196,10 @@ export default function Home() {
style={{background:'linear-gradient(180deg, rgba(139,92,246,0.5) 0%, rgba(139,92,246,0.05) 100%)'}} /> style={{background:'linear-gradient(180deg, rgba(139,92,246,0.5) 0%, rgba(139,92,246,0.05) 100%)'}} />
{[ {[
{n:'01', title:'Connect a Prop', badge:'Prop', desc:'Link any GitHub or Gitea repo. Fibe tracks every branch. One repo → unlimited environments.'}, {n:'01', title:'Connect a Prop', badge:'Prop', desc:'Link any GitHub or Gitea repo. Fibe tracks every branch. One repo → unlimited isolated environments.'},
{n:'02', title:'Register a Marquee', badge:'Marquee', desc:'Point Fibe at any VPS or bare metal. One SSH connection is all it needs. No agents installed.'}, {n:'02', title:'Register a Marquee', badge:'Marquee', desc:'Point Fibe at any VPS or bare metal. One SSH connection. No agents installed. DigitalOcean, Hetzner, yours.'},
{n:'03', title:'Launch a Playground',badge:'Playground', desc:'Pick a Playspec (your docker-compose blueprint), choose a branch, launch. Full env in ~60s.'}, {n:'03', title:'Launch a Playground', badge:'Playground', desc:'Pick a Playspec (docker-compose blueprint), choose a branch, hit launch. Full env in ~60 seconds.'},
{n:'04', title:'Push & iterate', badge:'Live →', desc:'Hot-reload on every push. Share the URL with your team. SSL, subdomains, routing — automatic.'}, {n:'04', title:'Push & ship', badge:'Live →', desc:'Hot-reload on every git push. Share the URL. SSL, subdomains, routing — all automatic. Forever.'},
].map(({n, title, badge, desc}) => ( ].map(({n, title, badge, desc}) => (
<div key={n} className="flex gap-5 glass rounded-2xl p-6 relative z-10"> <div key={n} className="flex gap-5 glass rounded-2xl p-6 relative z-10">
<div className="w-12 h-12 rounded-xl flex items-center justify-center text-xs font-black shrink-0" <div className="w-12 h-12 rounded-xl flex items-center justify-center text-xs font-black shrink-0"
@ -185,20 +227,20 @@ export default function Home() {
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}> <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
Every layer, covered. Every layer, covered.
</h2> </h2>
<p className="mt-4" style={{color:'rgba(161,161,170,0.7)'}}>No glue code. No YAML hell. No ops team required.</p> <p className="mt-4" style={{color:'rgba(161,161,170,0.65)'}}>No glue code. No YAML hell. No ops team required.</p>
</div> </div>
<div className="grid md:grid-cols-3 gap-5"> <div className="grid md:grid-cols-3 gap-5">
{[ {[
{icon:'🌀', title:'Playgrounds', tags:['docker-compose','live URL','hot-reload'], desc:'Full docker-compose environments with live URLs. Every service wired, every port routed, every env var injected — automatically.'}, {icon:'🌀', title:'Playgrounds', tags:['docker-compose','live URL','hot-reload'], desc:'Complete docker-compose environments, live in ~60s. Every service wired, every port routed, every env var injected — zero config.'},
{icon:'🧬', title:'Props', tags:['GitHub','Gitea','multi-repo'], desc:'Git repositories as first-class citizens. Connect GitHub or Gitea. Track any branch. Multi-repo setups native.'}, {icon:'🧬', title:'Props', tags:['GitHub','Gitea','multi-repo'], desc:'Git repos as first-class citizens. GitHub or Gitea. Any branch. Multi-repo compose setups native.'},
{icon:'🏗️', title:'Marquees', tags:['any VPS','SSH','no lock-in'], desc:'Your VPS as compute. DigitalOcean, Hetzner, bare metal — if SSH + Docker work, it works. You own the infra.'}, {icon:'🏗️', title:'Marquees', tags:['any VPS','SSH','no lock-in'], desc:'Your infra as compute. DigitalOcean, Hetzner, bare metal — SSH + Docker is all it needs. Your servers, your data, forever.'},
{icon:'📐', title:'Playspecs', tags:['blueprints','reusable','versioned'], desc:'Reusable deployment blueprints — like Helm charts for docker-compose. Define once, launch infinite playgrounds.'}, {icon:'📐', title:'Playspecs', tags:['blueprints','reusable','versioned'], desc:'Reusable deployment blueprints — like Helm charts for docker-compose. Define once, launch unlimited Playgrounds.'},
{icon:'⚡', title:'Tricks (Jobs)', tags:['CI/CD','cron','one-shot'], desc:'Job mode for anything that runs to completion. Tests, migrations, cron tasks, build pipelines — all containerized.'}, {icon:'⚡', title:'Tricks (Jobs)', tags:['CI/CD','cron','one-shot'], desc:'Job mode for anything that finishes. Tests, migrations, cron tasks, build pipelines — containerized, audited, retryable.'},
{icon:'🔐', title:'Secrets Vault', tags:['encrypted','per-service','env injection'], desc:'Encrypted key-value store. Inject credentials at runtime — no plaintext in compose files, repos, or logs.'}, {icon:'🔐', title:'Secrets Vault', tags:['encrypted','per-service','env injection'], desc:'Encrypted key-value store. Inject secrets at runtime. No plaintext in compose files, repos or logs. Ever.'},
{icon:'🌍', title:'Traefik Routing', tags:['auto SSL','subdomains','HTTP/2'], desc:"Auto-provisioned subdomains + Let's Encrypt SSL for every service. Wildcard certs. HTTP→HTTPS. Zero config."}, {icon:'🌍', title:'Traefik Routing', tags:['auto SSL','subdomains','HTTP/2'], desc:"Wildcard subdomains + Let's Encrypt SSL for every service, automatically. HTTP→HTTPS redirect. Zero configuration."},
{icon:'🔔', title:'Webhooks & Events', tags:['auto-deploy','audit log','git push'], desc:'Git push triggers automatic rebuilds in production mode. Full audit trail of every deploy, failure, and rollback.'}, {icon:'🔔', title:'Webhooks & Events', tags:['auto-deploy','audit log','git push'], desc:'Git push triggers production rebuilds. Full audit trail of every deploy, failure and rollback. Nothing is invisible.'},
{icon:'🧪', title:'Ephemeral Envs', tags:['per-PR','branch URLs','auto-teardown'], desc:'Every PR gets a live, isolated environment with its own URL. Auto-teardown on merge. Perfect for review workflows.'}, {icon:'🧪', title:'Ephemeral Envs', tags:['per-PR','branch URLs','auto-teardown'], desc:'Every PR gets a live isolated environment with its own URL. Auto-teardown on merge. Review workflows, perfected.'},
].map(({icon, title, desc, tags}) => ( ].map(({icon, title, desc, tags}) => (
<div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105" <div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
style={{borderColor:'rgba(139,92,246,0.12)'}}> style={{borderColor:'rgba(139,92,246,0.12)'}}>
@ -216,18 +258,20 @@ export default function Home() {
{/* ── GENIES SPOTLIGHT ── */} {/* ── GENIES SPOTLIGHT ── */}
<section id="genies" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}> <section id="genies" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} /> <div className="glow-orb" style={{width:1000,height:1000,background:'radial-gradient(circle, rgba(139,92,246,0.11) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
<div className="max-w-6xl mx-auto relative z-10"> <div className="max-w-6xl mx-auto relative z-10">
<div className="text-center mb-16"> <div className="text-center mb-16">
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Development Agents</p> <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Development Agents</p>
<h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}> <h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
Agents that actually<br /><em className="gradient-text not-italic">ship code.</em> Not a chatbot.<br />
<em className="gradient-text not-italic">A dev agent in your codebase.</em>
</h2> </h2>
<p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}> <p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed"
Genies are autonomous AI agents that live inside your Playgrounds. style={{color:'rgba(161,161,170,0.75)'}}>
Full access to your codebase, a real terminal, a file editor and Docker. Genies are autonomous AI agents that live inside your Playgrounds — with a real terminal,
Assign a task — they plan, build, test and push. a file editor, Docker access and your full codebase. Assign a task.
They plan, build, test and push.
</p> </p>
{/* Provider chips */} {/* Provider chips */}
@ -246,14 +290,13 @@ export default function Home() {
</div> </div>
</div> </div>
{/* 6-card grid */}
<div className="grid md:grid-cols-3 gap-4 mb-6"> <div className="grid md:grid-cols-3 gap-4 mb-6">
{[ {[
{icon:'⬛', title:'In-browser Terminal', desc:'Full PTY terminal via xterm.js. Watch your agent run commands, install packages and start servers — live, in the browser.'}, {icon:'⬛', title:'In-browser Terminal', desc:'Full PTY terminal via xterm.js. Watch your agent run commands, install packages and start servers — live, in the browser.'},
{icon:'📝', title:'CodeMirror 6 Editor', desc:'Production-grade file editor built in. Agents edit code; you see every change — syntax-highlighted, diff-aware, instant.'}, {icon:'📝', title:'CodeMirror 6 Editor', desc:'Production-grade file editor built in. Agents edit code; you see every change — syntax-highlighted, diff-aware, instant.'},
{icon:'🧠', title:'Activity & Thinking', desc:'Live reasoning sidebar. Thinking steps, planning and debugging surface in real time. No black boxes, no guessing.'}, {icon:'🧠', title:'Activity & Thinking', desc:'Live reasoning sidebar. Thinking steps, planning and debugging surface in real time. No black boxes, no guessing.'},
{icon:'🔌', title:'MCP Server support', desc:'Connect any Model Context Protocol server — HTTP or stdio. Extend Genie capabilities with custom tools and data sources.'}, {icon:'🔌', title:'MCP Server Support', desc:'Connect any Model Context Protocol server — HTTP or stdio. Extend Genie capabilities with custom tools and data sources.'},
{icon:'💬', title:'Mutter stream', desc:'Real-time internal monologue. Agents surface blockers, proofs and problems as structured mutters you can act on immediately.'}, {icon:'💬', title:'Mutter Stream', desc:'Real-time internal monologue. Agents surface blockers, proofs and problems as structured mutters you can act on immediately.'},
{icon:'📦', title:'Artefacts & Feedback', desc:'Genies produce files, reports and PRs as artefacts. Leave feedback. A proper async human-in-the-loop collaboration loop.'}, {icon:'📦', title:'Artefacts & Feedback', desc:'Genies produce files, reports and PRs as artefacts. Leave feedback. A proper async human-in-the-loop collaboration loop.'},
].map(({icon, title, desc}) => ( ].map(({icon, title, desc}) => (
<div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105" <div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
@ -265,7 +308,6 @@ export default function Home() {
))} ))}
</div> </div>
{/* Feature strip */}
<div className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.1)'}}> <div className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.1)'}}>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
{[ {[
@ -281,7 +323,68 @@ export default function Home() {
))} ))}
</div> </div>
</div> </div>
</div>
</section>
{/* ── EVERYTHING INCLUDED ── */}
<section id="everything" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="max-w-5xl mx-auto">
<div className="text-center mb-14">
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Everything included</p>
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
No add-ons. No tiers. No surprises.
</h2>
<p className="mt-4" style={{color:'rgba(161,161,170,0.6)'}}>
Every feature ships in the box. Always.
</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-0">
{[
"Auto SSL (Let's Encrypt)",
'Wildcard subdomains',
'Git push deploys',
'Branch preview URLs',
'Ephemeral environments',
'Auto-teardown on merge',
'Encrypted secrets vault',
'Multi-repo compose',
'Hot-reload in dev',
'Production mode',
'Custom domains',
'Any VPS / bare metal',
'Traefik reverse proxy',
'HTTP → HTTPS redirect',
'SSH tunneling',
'Playspec blueprints',
'Versioned blueprints',
'One-shot Tricks (jobs)',
'Cron jobs',
'CI/CD pipelines',
'Full audit logs',
'Webhook triggers',
'Rollbacks',
'AI Genies (4 providers)',
'In-browser PTY terminal',
'CodeMirror 6 editor',
'MCP server support',
'Agent mutter stream',
'Artefacts & Feedback',
'GHCR multi-arch images',
'GDPR export & delete',
'File uploads ≤ 20 MB',
'Persistent conversations',
'Real-time thinking sidebar',
'STEERING.md guidance',
'Docker multi-arch builds',
].map(feature => (
<div key={feature} className="flex items-center gap-2.5 py-2.5"
style={{borderBottom:'1px solid rgba(139,92,246,0.05)'}}>
<span className="text-emerald-400 text-xs shrink-0">✓</span>
<span className="text-sm" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</span>
</div>
))}
</div>
</div> </div>
</section> </section>
@ -294,7 +397,8 @@ export default function Home() {
Battle-tested all the way down. Battle-tested all the way down.
</h2> </h2>
<p className="max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}> <p className="max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}>
No WASM runtimes. No experimental protocols. Docker, SSH, git and Traefik — doing what they&apos;ve done for a decade. No WASM runtimes. No experimental protocols. Docker, SSH, git and Traefik —
doing what they&apos;ve done for a decade.
</p> </p>
</div> </div>
@ -340,9 +444,9 @@ export default function Home() {
<section className="py-20 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}> <section className="py-20 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5"> <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5">
{[ {[
{n:'~60s', label:'avg Playground boot'}, {n:'~60s', label:'git to live URL'},
{n:'∞', label:'Playgrounds per Marquee'}, {n:'∞', label:'Playgrounds per Marquee'},
{n:'100%', label:'your infra, your data'}, {n:'4', label:'AI providers built-in'},
{n:'0', label:'vendor lock-in'}, {n:'0', label:'vendor lock-in'},
].map(({n, label}) => ( ].map(({n, label}) => (
<div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}> <div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
@ -354,19 +458,23 @@ export default function Home() {
</section> </section>
{/* ── CTA ── */} {/* ── CTA ── */}
<section className="py-36 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}> <section className="py-40 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="glow-orb" style={{width:800,height:800,background:'radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} /> <div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
<div className="max-w-2xl mx-auto text-center relative z-10"> <div className="max-w-2xl mx-auto text-center relative z-10">
<p className="text-xs font-semibold uppercase tracking-widest mb-6" style={{color:'rgba(139,92,246,0.55)'}}>Join the revolution</p>
<h2 className="font-display text-5xl md:text-7xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}> <h2 className="font-display text-5xl md:text-7xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
Ready to <em className="gradient-text not-italic">fibe</em>? Ready to <em className="gradient-text not-italic">fibe</em>?
</h2> </h2>
<p className="text-lg mb-10" style={{color:'rgba(161,161,170,0.65)'}}> <p className="text-lg mb-2" style={{color:'rgba(161,161,170,0.65)'}}>
Your first Playground is free. No credit card. No CLI required to start. Your first Playground is free. No credit card. No CLI required to start.
</p> </p>
<p className="text-sm mb-10" style={{color:'rgba(139,92,246,0.45)'}}>
Ship your first app in the next 5 minutes.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center"> <div className="flex flex-col sm:flex-row gap-3 justify-center">
<a href="https://next.fibe.live/register" <a href="https://next.fibe.live/register"
className="font-semibold px-10 py-4 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-base" className="font-semibold px-10 py-4 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-base"
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 50px rgba(139,92,246,0.4)'}}> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 60px rgba(139,92,246,0.45)'}}>
Start building — free Start building — free
</a> </a>
<a href="https://github.com/fibegg" <a href="https://github.com/fibegg"
@ -386,7 +494,7 @@ export default function Home() {
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div>
<span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span> <span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span>
</div> </div>
<span className="text-sm" style={{color:'rgba(161,161,170,0.25)'}}>© 2026 Fibe — Your entire stack, live in seconds.</span> <span className="text-sm" style={{color:'rgba(161,161,170,0.2)'}}>© 2026 Fibe — The fullstack development revolution.</span>
<div className="flex gap-6 text-sm" style={{color:'rgba(161,161,170,0.35)'}}> <div className="flex gap-6 text-sm" style={{color:'rgba(161,161,170,0.35)'}}>
<a href="https://github.com/fibegg" className="hover:text-white transition-colors">GitHub</a> <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://next.fibe.live" className="hover:text-white transition-colors">App</a>