819 lines
50 KiB
JavaScript
819 lines
50 KiB
JavaScript
import Nav from './components/Nav'
|
||
|
||
export default function Home() {
|
||
return (
|
||
<main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden">
|
||
|
||
{/* Ambient orbs */}
|
||
<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: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:'50%',right:'3%'}} />
|
||
|
||
<Nav />
|
||
|
||
{/* ── HERO ── */}
|
||
<section className="relative pt-44 pb-24 px-6 animate-float-up">
|
||
<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"
|
||
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" />
|
||
No code required · any device · anywhere in the world
|
||
</div>
|
||
|
||
<h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8"
|
||
style={{letterSpacing:'-0.03em'}}>
|
||
Idea to live app.<br />
|
||
<em className="gradient-text not-italic">Sixty seconds.</em>
|
||
</h1>
|
||
|
||
<p className="text-xl md:text-2xl max-w-2xl mx-auto mb-5 leading-relaxed"
|
||
style={{color:'rgba(255,255,255,0.55)'}}>
|
||
Describe what you want to build. Fibe and its AI Genies handle the code,
|
||
the servers, the SSL and the deploy — 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.4)'}}>
|
||
Zero DevOps. Zero local setup. Zero powerful hardware.
|
||
Any device, anywhere in the world.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-3 justify-center mb-24">
|
||
<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"
|
||
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
|
||
</a>
|
||
<a href="https://github.com/fibegg/sdk"
|
||
className="font-medium px-8 py-3.5 rounded-xl transition-all hover:text-white text-sm glass"
|
||
style={{color:'rgba(161,161,170,0.7)',borderColor:'rgba(139,92,246,0.15)'}}>
|
||
brew install fibegg/sdk/fibe ↗
|
||
</a>
|
||
</div>
|
||
|
||
{/* Terminal */}
|
||
<div className="max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden animate-pulse-glow">
|
||
<div className="flex items-center gap-1.5 px-4 py-3"
|
||
style={{borderBottom:'1px solid rgba(139,92,246,0.12)'}}>
|
||
<span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(239,68,68,0.6)'}} />
|
||
<span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(234,179,8,0.6)'}} />
|
||
<span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(34,197,94,0.6)'}} />
|
||
<span className="ml-3 text-xs font-mono" style={{color:'rgba(139,92,246,0.5)'}}>~ fibe sdk</span>
|
||
</div>
|
||
<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 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)'}}> <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 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)'}}> <span className="text-emerald-400">✓</span> Cloning · building · routing · SSL · live</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. always.</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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:'Waiting weeks to go live', alive:'Describe your idea. A Genie builds it. Fibe ships it. Your app is live in minutes, not sprints.'},
|
||
{dead:'Hiring a DevOps team', alive:'Fibe handles servers, SSL, subdomains and routing automatically. You focus on the product.'},
|
||
{dead:'Needing to know how to code', alive:'No experience required. Genies write the code. You review, you direct, you ship.'},
|
||
].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>
|
||
|
||
{/* ── TWO WAYS ── */}
|
||
<section className="py-24 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||
<div className="max-w-4xl mx-auto">
|
||
<p className="text-xs font-semibold uppercase tracking-widest text-center mb-12"
|
||
style={{color:'rgba(139,92,246,0.6)'}}>Two ways to ship</p>
|
||
<div className="grid md:grid-cols-2 gap-5">
|
||
|
||
{/* Genies first — the entry-user path */}
|
||
<div className="glass-strong rounded-2xl p-8 relative overflow-hidden"
|
||
style={{borderColor:'rgba(167,139,250,0.3)'}}>
|
||
<div className="glow-orb" style={{width:300,height:300,background:'radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%)',top:-80,right:-80}} />
|
||
<div className="relative z-10">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<span className="text-2xl">🤖</span>
|
||
<span className="tag" style={{background:'rgba(167,139,250,0.15)',borderColor:'rgba(167,139,250,0.3)',color:'#c4b5fd'}}>recommended</span>
|
||
</div>
|
||
<h3 className="font-semibold text-white mb-3 text-lg">Let Genies write the code</h3>
|
||
<p className="text-sm leading-relaxed mb-6" style={{color:'rgba(161,161,170,0.7)'}}>
|
||
No coding experience? No problem. Describe your idea in plain English.
|
||
A Genie plans it, builds it, tests it and ships it. You just review and approve.
|
||
</p>
|
||
<div className="font-mono text-xs px-3 py-2 rounded-lg"
|
||
style={{background:'rgba(139,92,246,0.12)',color:'rgba(196,181,253,0.7)',border:'1px solid rgba(167,139,250,0.2)'}}>
|
||
“build me a SaaS landing page” <span className="text-emerald-400">✓ shipped</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Dev path */}
|
||
<div className="glass rounded-2xl p-8" style={{borderColor:'rgba(139,92,246,0.15)'}}>
|
||
<div className="text-2xl mb-4">👨💻</div>
|
||
<h3 className="font-semibold text-white mb-3 text-lg">You write the code</h3>
|
||
<p className="text-sm leading-relaxed mb-6" style={{color:'rgba(161,161,170,0.65)'}}>
|
||
Already a developer? Git push and Fibe handles the rest — builds,
|
||
routes, SSLs, hot-reloads. Your entire stack, live in seconds, on your own infra.
|
||
</p>
|
||
<div className="font-mono text-xs px-3 py-2 rounded-lg"
|
||
style={{background:'rgba(139,92,246,0.08)',color:'rgba(139,92,246,0.6)',border:'1px solid rgba(139,92,246,0.12)'}}>
|
||
git push origin main <span className="text-emerald-400">✓ live</span>
|
||
</div>
|
||
</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 ── */}
|
||
<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="text-center mb-16">
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>What you can build</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
|
||
Anything that runs in Docker.
|
||
</h2>
|
||
<p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.6)'}}>
|
||
If it has a Dockerfile, Fibe clones it, builds it, exposes it, routes it and SSLs it. Full stop.
|
||
</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, 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 — backend services wired and routed automatically', glow:'rgba(99,102,241,0.12)'},
|
||
{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 — 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 and fully isolated environment — automatically', glow:'rgba(34,197,94,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, all wired in one Playground', glow:'rgba(239,68,68,0.08)'},
|
||
{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}) => (
|
||
<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)'}}>
|
||
<div className="text-3xl mb-3">{icon}</div>
|
||
<h3 className="font-semibold text-sm text-white mb-1.5">{label}</h3>
|
||
<p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── HOW IT WORKS ── */}
|
||
<section id="how" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,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(139,92,246,0.7)'}}>How it works</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
|
||
Four steps to a live URL.
|
||
</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 className="space-y-4 relative">
|
||
<div className="absolute left-[2.35rem] top-12 bottom-12 w-px hidden md:block"
|
||
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 isolated environments.'},
|
||
{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 (docker-compose blueprint), choose a branch, hit launch. Full env in ~60 seconds.'},
|
||
{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}) => (
|
||
<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"
|
||
style={{background:'rgba(139,92,246,0.15)',color:'#a78bfa',border:'1px solid rgba(139,92,246,0.25)'}}>
|
||
{n}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-3 mb-1.5">
|
||
<h3 className="font-semibold text-white">{title}</h3>
|
||
<span className="tag">{badge}</span>
|
||
</div>
|
||
<p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>{desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CLOUD PROVIDER GUIDES ── */}
|
||
<section id="clouds" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,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(139,92,246,0.7)'}}>
|
||
Works on any cloud
|
||
</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||
Your cloud. 5 minutes to ready.
|
||
</h2>
|
||
<p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
|
||
No prior cloud experience needed. Pick your provider, spin up a server,
|
||
connect it to Fibe. Same three steps everywhere.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Shared steps callout */}
|
||
<div className="glass rounded-2xl p-5 mb-8 max-w-2xl mx-auto"
|
||
style={{borderColor:'rgba(139,92,246,0.15)',background:'rgba(139,92,246,0.04)'}}>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-3 text-center"
|
||
style={{color:'rgba(139,92,246,0.6)'}}>
|
||
Steps 2 & 3 are identical on every provider
|
||
</p>
|
||
<div className="font-mono text-xs leading-7 text-center" style={{color:'rgba(161,161,170,0.6)'}}>
|
||
<span style={{color:'rgba(255,255,255,0.2)'}}>$</span>{' '}
|
||
<span className="text-emerald-400">curl -fsSL https://get.docker.com | sh</span>
|
||
{' '}<span style={{color:'rgba(255,255,255,0.2)'}}>← install Docker</span>
|
||
<br />
|
||
<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 YOUR_IP</span>
|
||
{' '}<span className="text-emerald-400">✓ done</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-5">
|
||
{[
|
||
{
|
||
name: 'DigitalOcean',
|
||
badge: 'Easiest to start',
|
||
badgeColor: '#34d399',
|
||
color: '#0080ff',
|
||
step1: 'Create a Droplet',
|
||
step1desc: 'Dashboard → Create → Droplet → Ubuntu 22.04 → Basic → 2 vCPU / 4 GB ($24/mo) → Create',
|
||
step1link: 'https://cloud.digitalocean.com/droplets/new',
|
||
tip: 'Enable "Add SSH key" during creation — you\'ll need it to connect.',
|
||
},
|
||
{
|
||
name: 'Amazon AWS',
|
||
badge: 'Most popular',
|
||
badgeColor: '#fb923c',
|
||
color: '#f90',
|
||
step1: 'Launch an EC2 instance',
|
||
step1desc: 'Console → EC2 → Launch instance → Ubuntu 22.04 → t3.medium → Create key pair → Launch',
|
||
step1link: 'https://console.aws.amazon.com/ec2/v2/home#LaunchInstances:',
|
||
tip: 'In Security Group, open port 22 (SSH), 80 (HTTP) and 443 (HTTPS).',
|
||
},
|
||
{
|
||
name: 'Google Cloud',
|
||
badge: 'Great free tier',
|
||
badgeColor: '#60a5fa',
|
||
color: '#4285f4',
|
||
step1: 'Create a Compute Engine VM',
|
||
step1desc: 'Console → Compute Engine → Create instance → e2-medium → Ubuntu 22.04 LTS → Allow HTTP & HTTPS → Create',
|
||
step1link: 'https://console.cloud.google.com/compute/instancesAdd',
|
||
tip: 'Under "Firewall" check both "Allow HTTP traffic" and "Allow HTTPS traffic".',
|
||
},
|
||
{
|
||
name: 'Microsoft Azure',
|
||
badge: '$200 free credit',
|
||
badgeColor: '#c4b5fd',
|
||
color: '#0078d4',
|
||
step1: 'Create a Virtual Machine',
|
||
step1desc: 'Portal → Create resource → Virtual Machine → Ubuntu 22.04 → Standard B2s (2 vCPU / 4 GB) → SSH public key → Review + create',
|
||
step1link: 'https://portal.azure.com/#create/Microsoft.VirtualMachine-ARM',
|
||
tip: 'In "Networking", add inbound rules for ports 80 and 443 after creation.',
|
||
},
|
||
].map(({ name, badge, badgeColor, color, step1, step1desc, step1link, tip }) => (
|
||
<div key={name} className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-5">
|
||
<h3 className="font-bold text-white text-lg">{name}</h3>
|
||
<span className="text-xs font-semibold px-2.5 py-1 rounded-full"
|
||
style={{color: badgeColor, background: badgeColor + '18', border: `1px solid ${badgeColor}35`}}>
|
||
{badge}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Step 1 */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>1</span>
|
||
<span className="text-sm font-semibold text-white">{step1}</span>
|
||
</div>
|
||
<p className="text-xs leading-relaxed pl-7 mb-2" style={{color:'rgba(161,161,170,0.6)'}}>{step1desc}</p>
|
||
<a href={step1link} target="_blank" rel="noopener noreferrer"
|
||
className="text-xs pl-7 inline-flex items-center gap-1 transition-colors hover:opacity-80"
|
||
style={{color}}>
|
||
Open {name} Console ↗
|
||
</a>
|
||
</div>
|
||
|
||
{/* Step 2 */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>2</span>
|
||
<span className="text-sm font-semibold text-white">Install Docker</span>
|
||
</div>
|
||
<div className="ml-7 font-mono text-xs px-3 py-2 rounded-lg"
|
||
style={{background:'rgba(0,0,0,0.3)',color:'rgba(52,211,153,0.8)',border:'1px solid rgba(139,92,246,0.1)'}}>
|
||
curl -fsSL https://get.docker.com | sh
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 3 */}
|
||
<div className="mb-5">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>3</span>
|
||
<span className="text-sm font-semibold text-white">Connect to Fibe</span>
|
||
</div>
|
||
<div className="ml-7 font-mono text-xs px-3 py-2 rounded-lg"
|
||
style={{background:'rgba(0,0,0,0.3)',color:'#a78bfa',border:'1px solid rgba(139,92,246,0.1)'}}>
|
||
fibe marquees connect --host YOUR_IP
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tip */}
|
||
<div className="rounded-xl px-4 py-3 text-xs leading-relaxed"
|
||
style={{background:'rgba(139,92,246,0.06)',border:'1px solid rgba(139,92,246,0.1)',color:'rgba(196,181,253,0.6)'}}>
|
||
<span style={{color:'rgba(167,139,250,0.7)'}}>Tip:</span> {tip}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-center text-sm mt-8" style={{color:'rgba(161,161,170,0.4)'}}>
|
||
Have a different provider or bare metal server?{' '}
|
||
<span style={{color:'rgba(167,139,250,0.6)'}}>If it runs Ubuntu + Docker, it works.</span>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── PLATFORM FEATURES ── */}
|
||
<section id="features" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,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(139,92,246,0.7)'}}>Platform</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
|
||
Every layer, covered.
|
||
</h2>
|
||
<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 className="grid md:grid-cols-3 gap-5">
|
||
{[
|
||
{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 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 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 unlimited Playgrounds.'},
|
||
{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 secrets at runtime. No plaintext in compose files, repos or logs. Ever.'},
|
||
{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 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. Review workflows, perfected.'},
|
||
].map(({icon, title, desc, tags}) => (
|
||
<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)'}}>
|
||
<div className="text-2xl mb-4">{icon}</div>
|
||
<h3 className="font-semibold text-white mb-2">{title}</h3>
|
||
<p className="text-sm leading-relaxed mb-4" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{tags.map(t => <span key={t} className="tag">{t}</span>)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── GENIES SPOTLIGHT ── */}
|
||
<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: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="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>
|
||
<h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
|
||
You don't have to write<br />
|
||
<em className="gradient-text not-italic">a single line of code.</em>
|
||
</h2>
|
||
<p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed"
|
||
style={{color:'rgba(161,161,170,0.75)'}}>
|
||
Genies are autonomous AI agents that live inside your Playgrounds —
|
||
with a real terminal, a file editor, Docker access and your full codebase.
|
||
Describe the feature. They plan it, build it, test it and push it.
|
||
</p>
|
||
|
||
{/* Provider chips */}
|
||
<div className="flex flex-wrap justify-center gap-2">
|
||
{[
|
||
{label:'Claude Code', color:'#a78bfa'},
|
||
{label:'Gemini CLI', color:'#34d399'},
|
||
{label:'OpenAI Codex', color:'#60a5fa'},
|
||
{label:'OpenCode', color:'#fb923c'},
|
||
].map(({label, color}) => (
|
||
<span key={label} className="px-3 py-1 rounded-full text-xs font-semibold"
|
||
style={{color, border:`1px solid ${color}40`, background:`${color}18`}}>
|
||
{label}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<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:'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:'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:'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}) => (
|
||
<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.15)'}}>
|
||
<div className="text-2xl mb-3">{icon}</div>
|
||
<h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
|
||
<p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<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">
|
||
{[
|
||
{val:'≤ 20 MB', label:'file uploads'},
|
||
{val:'persistent', label:'multi-conversation memory'},
|
||
{val:'GHCR', label:'multi-arch Docker images'},
|
||
{val:'GDPR', label:'export & delete built-in'},
|
||
].map(({val, label}) => (
|
||
<div key={label}>
|
||
<div className="font-semibold text-sm gradient-text mb-0.5">{val}</div>
|
||
<div className="text-xs" style={{color:'rgba(161,161,170,0.4)'}}>{label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── ANY DEVICE ANYWHERE ── */}
|
||
<section id="anywhere" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||
<div className="max-w-5xl mx-auto text-center">
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>
|
||
Develop from anywhere
|
||
</p>
|
||
<h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
|
||
Your phone is now<br />
|
||
<em className="gradient-text not-italic">a development machine.</em>
|
||
</h2>
|
||
<p className="text-lg max-w-2xl mx-auto mb-14 leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>
|
||
The entire dev environment lives in the cloud. Your device is just a window into it.
|
||
Open a browser, describe your idea, watch Genies build it —
|
||
from a Tokyo coffee shop, your couch or a $200 Chromebook.
|
||
Same experience everywhere.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
|
||
{[
|
||
{icon:'📱', label:'Smartphone', desc:'Full terminal, editor and Genie control from your thumb. iOS or Android.'},
|
||
{icon:'📲', label:'Tablet', desc:'Perfect for reviewing Genie progress, leaving feedback and approving changes.'},
|
||
{icon:'💻', label:'Laptop / PC', desc:'The classic dev experience — but zero local setup. No Node, no Docker, nothing.'},
|
||
{icon:'🖥️', label:'Any browser', desc:'Chrome, Safari, Firefox, Arc. If it has a browser, it runs Fibe.'},
|
||
].map(({icon, label, desc}) => (
|
||
<div key={label} className="glass rounded-2xl p-5 text-center transition-all hover:scale-[1.02] hover:brightness-105"
|
||
style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||
<div className="text-3xl mb-3">{icon}</div>
|
||
<h3 className="font-semibold text-white text-sm mb-2">{label}</h3>
|
||
<p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.55)'}}>{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-wrap justify-center gap-3">
|
||
{[
|
||
'No local install. Ever.',
|
||
'No powerful hardware required.',
|
||
'Works on a $200 Chromebook.',
|
||
'New device? Ready in 30 seconds.',
|
||
'Internet + browser = full dev environment.',
|
||
'Ship from anywhere in the world.',
|
||
].map(s => (
|
||
<span key={s} className="px-4 py-2 rounded-full text-sm glass"
|
||
style={{color:'rgba(196,181,253,0.65)',borderColor:'rgba(139,92,246,0.12)'}}>
|
||
{s}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── OWN EVERYTHING ── */}
|
||
<section id="ownership" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||
<div className="glow-orb" style={{width:700,height:700,background:'radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
|
||
<div className="max-w-6xl mx-auto relative z-10">
|
||
<div className="text-center mb-16">
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Security & Ownership</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||
Your code. Your data.<br />
|
||
<em className="gradient-text not-italic">Your servers. Always.</em>
|
||
</h2>
|
||
<p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
|
||
Fibe never stores, scans or touches your application data. It orchestrates — your infrastructure, your rules, your jurisdiction.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-5">
|
||
{[
|
||
{icon:'🔒', title:'Zero vendor access', desc:'Your code runs on your servers. Fibe connects via SSH to orchestrate — it never reads, stores or processes your application data.'},
|
||
{icon:'🌍', title:'Data sovereignty', desc:'Deploy in any region worldwide. Your data stays in your jurisdiction. GDPR, HIPAA, enterprise compliance — by architecture, not policy.'},
|
||
{icon:'💰', title:'No compute markup', desc:'You pay AWS, DigitalOcean, GCP or Hetzner directly. Fibe never touches your cloud bill. No bandwidth fees. No egress charges. Ever.'},
|
||
{icon:'🏗️', title:'Isolated by design', desc:'Every environment is fully isolated. No shared resources, no noisy neighbors. Complete separation between projects, teams and branches.'},
|
||
{icon:'🔑', title:'You hold the keys', desc:'SSH into any server at any time. Your infrastructure works with or without Fibe — no dependency trap, no hostage situation.'},
|
||
{icon:'👁️', title:'No black boxes', desc:'Open SDK. Inspect every compose file Fibe generates. Audit, modify, run anywhere. Nothing hidden, nothing proprietary.'},
|
||
].map(({icon, title, desc}) => (
|
||
<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)'}}>
|
||
<div className="text-2xl mb-4">{icon}</div>
|
||
<h3 className="font-semibold text-white mb-2">{title}</h3>
|
||
<p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Pricing hint */}
|
||
<div className="mt-8 glass rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-4"
|
||
style={{borderColor:'rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.03)'}}>
|
||
<p className="text-sm" style={{color:'rgba(161,161,170,0.6)'}}>
|
||
<span className="text-white font-medium">Start from ~$12/month</span> on a DigitalOcean Droplet.
|
||
Scale to whatever your project needs. Pay your cloud provider — not us.
|
||
</p>
|
||
<a href="https://next.fibe.live/register"
|
||
className="shrink-0 text-sm font-semibold px-5 py-2 rounded-xl transition-all hover:brightness-110"
|
||
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>
|
||
Start free
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── COMPARISON ── */}
|
||
<section className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||
<div className="max-w-4xl 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)'}}>How Fibe compares</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||
The platform others can't be.
|
||
</h2>
|
||
<p style={{color:'rgba(161,161,170,0.6)'}}>Your infra. Your AI. Your rules. No one else can offer all three.</p>
|
||
</div>
|
||
|
||
<div className="glass rounded-2xl overflow-hidden" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||
{/* Header */}
|
||
<div className="grid grid-cols-5 text-xs font-semibold uppercase tracking-widest px-6 py-4"
|
||
style={{borderBottom:'1px solid rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.05)'}}>
|
||
<div className="col-span-2" style={{color:'rgba(161,161,170,0.4)'}}>Feature</div>
|
||
<div className="text-center gradient-text">Fibe</div>
|
||
<div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Vercel / Railway</div>
|
||
<div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Kubernetes</div>
|
||
</div>
|
||
|
||
{[
|
||
['Your own infrastructure', true, false, true ],
|
||
['Zero vendor lock-in', true, false, true ],
|
||
['No compute markup', true, false, true ],
|
||
['No code required (AI agents)', true, false, false],
|
||
['60-second environment boot', true, false, false],
|
||
['Data stays on your servers', true, false, true ],
|
||
['Any Docker workload', true, 'part', true ],
|
||
['No ops expertise needed', true, true, false],
|
||
['AI agents with full env access',true, false, false],
|
||
['SSH access anytime', true, false, true ],
|
||
['Free to start', true, true, false],
|
||
].map(([feature, fibe, vercel, k8s], i, arr) => {
|
||
const cell = (v) => v === true
|
||
? <span className="text-emerald-400 text-base">✓</span>
|
||
: v === false
|
||
? <span style={{color:'rgba(161,161,170,0.18)',fontSize:'1.1rem'}}>—</span>
|
||
: <span style={{color:'rgba(234,179,8,0.55)',fontSize:'0.75rem'}}>partial</span>
|
||
return (
|
||
<div key={feature} className="grid grid-cols-5 px-6 py-3 text-sm items-center"
|
||
style={{borderBottom: i < arr.length-1 ? '1px solid rgba(139,92,246,0.05)' : 'none'}}>
|
||
<div className="col-span-2" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</div>
|
||
<div className="text-center">{cell(fibe)}</div>
|
||
<div className="text-center">{cell(vercel)}</div>
|
||
<div className="text-center">{cell(k8s)}</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>
|
||
</section>
|
||
|
||
{/* ── STACK ── */}
|
||
<section id="stack" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,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(139,92,246,0.7)'}}>Built on boring tech</p>
|
||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||
Battle-tested all the way down.
|
||
</h2>
|
||
<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've done for a decade.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-10 mb-10">
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Platform</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{['Docker','docker-compose','Traefik',"Let's Encrypt",'SSH','Go','PostgreSQL','Redis','Gitea'].map(t => (
|
||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||
style={{color:'#a78bfa',borderColor:'rgba(139,92,246,0.2)'}}>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>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','Bun'].map(t => (
|
||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||
style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(255,255,255,0.06)'}}>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Genies stack</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{['xterm.js','CodeMirror 6','WebSocket / PTY','Claude Code','Gemini CLI','OpenAI Codex','OpenCode','MCP','GHCR multi-arch'].map(t => (
|
||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||
style={{color:'rgba(167,139,250,0.75)',borderColor:'rgba(139,92,246,0.18)'}}>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── STATS ── */}
|
||
<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">
|
||
{[
|
||
{n:'~60s', label:'idea to live app'},
|
||
{n:'0', label:'bytes of your code on Fibe servers'},
|
||
{n:'4', label:'AI providers built-in'},
|
||
{n:'∞', label:'possibilities'},
|
||
].map(({n, label}) => (
|
||
<div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||
<div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>
|
||
<div className="text-xs" style={{color:'rgba(161,161,170,0.5)'}}>{label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CTA ── */}
|
||
<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: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">
|
||
<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'}}>
|
||
Ready to <em className="gradient-text not-italic">fibe</em>?
|
||
</h2>
|
||
<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.
|
||
</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">
|
||
<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"
|
||
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 60px rgba(139,92,246,0.45)'}}>
|
||
Start building — free
|
||
</a>
|
||
<a href="https://github.com/fibegg"
|
||
className="font-medium px-10 py-4 rounded-xl transition-all hover:text-white text-base glass"
|
||
style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(139,92,246,0.15)'}}>
|
||
Explore on GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="py-10 px-6" style={{borderTop:'1px solid rgba(139,92,246,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 flex items-center justify-center text-xs font-black"
|
||
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div>
|
||
<span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span>
|
||
</div>
|
||
<span className="text-sm" style={{color:'rgba(161,161,170,0.2)'}}>© 2026 Fibe — Build anything. Ship everything.</span>
|
||
<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://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>
|
||
|
||
</main>
|
||
)
|
||
}
|