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

design: Instrument Serif + Inter, phoenix logo, Fibe token system

Browse Source
This commit is contained in:
vyakymenko 2026-04-22 13:07:59 +00:00
parent 71bee93116
commit 2685727a93
3 changed files with 318 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
app/globals.css
View File

@ -2,95 +2,156 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;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&family=Instrument+Serif:ital@0;1&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; } @layer base {
:root {
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
html { /* Fibe dark tokens */
font-family: 'Inter', system-ui, sans-serif; --background: #08080a;
scroll-behavior: smooth; --foreground: #fafafa;
--card: #121214;
--card-foreground: #fafafa;
--muted: #1c1c1f;
--muted-foreground: #a1a1aa;
--accent: #1a1525;
--accent-foreground: #c4b5fd;
--border: rgba(139, 92, 246, 0.15);
--border-subtle: rgba(139, 92, 246, 0.08);
--primary: #a78bfa;
--primary-dark: #8b5cf6;
--primary-light: #c4b5fd;
--ring: #8b5cf6;
--radius: 0.75rem;
--radius-xl: 1rem;
--shadow-glass: 0 8px 32px 0 rgb(139 92 246 / 0.12);
--shadow-elevated: 0 8px 30px -4px rgb(0 0 0 / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.4);
--transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Phoenix logo animation */
@keyframes header-flame-out {
0% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); }
8% { opacity: 0.98; filter: brightness(1.12); }
28% { transform: translate(-50%,-50%) scale(0.85); opacity: 0.95; }
42% { transform: translate(-50%,-50%) scale(0.3); opacity: 0.25; filter: brightness(1.3); }
48% { transform: translate(-50%,-50%) scale(0.12); opacity: 0; }
52% { transform: translate(-50%,-50%) scale(0.08); opacity: 0; }
68% { transform: translate(-50%,-50%) scale(0.55); opacity: 0.65; filter: brightness(1.15); }
82% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.95; }
100% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes floatUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(167,139,250,0.2); }
50% { box-shadow: 0 0 50px rgba(167,139,250,0.4), 0 0 80px rgba(139,92,246,0.2); }
}
.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-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
} }
body { *, *::before, *::after { box-sizing: border-box; }
background: #0a0914;
color: #f1f5f9; html {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
background: var(--background);
color: var(--foreground);
overflow-x: hidden; overflow-x: hidden;
} }
/* Animated gradient background */ body {
font-family: var(--font-sans);
background: var(--background);
color: var(--foreground);
min-height: 100vh;
}
/* Display font for headings */
.font-display {
font-family: var(--font-display);
}
/* Animated purple-indigo gradient background */
.bg-fibe { .bg-fibe {
background: linear-gradient(135deg, #0f0c29 0%, #1a1540 30%, #302b63 60%, #24243e 100%); background: linear-gradient(135deg, #0b0916 0%, #0f0c29 25%, #1a1540 50%, #261f5a 75%, #1e1a42 100%);
background-size: 400% 400%; background-size: 400% 400%;
animation: gradientShift 15s ease infinite; animation: gradientShift 18s ease infinite;
} }
@keyframes gradientShift { /* Subtle grid */
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Grid overlay */
.grid-overlay { .grid-overlay {
background-image: background-image:
linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px), linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px); linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px);
background-size: 48px 48px; background-size: 52px 52px;
} }
/* Glassmorphism */ /* Glass card */
.glass { .glass {
background: rgba(255,255,255,0.04); background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.09); border: 1px solid var(--border);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
} }
.glass-strong { .glass-strong {
background: rgba(255,255,255,0.07); background: rgba(26,21,37,0.7);
border: 1px solid rgba(167,139,250,0.2); border: 1px solid rgba(167,139,250,0.18);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
box-shadow: var(--shadow-glass);
} }
/* Glow effects */ /* Glows */
.glow-purple { .glow-orb {
box-shadow: 0 0 60px rgba(167,139,250,0.15), 0 0 120px rgba(167,139,250,0.06); position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(1px);
} }
.text-glow { /* Gradient text — display font hero */
text-shadow: 0 0 40px rgba(167,139,250,0.4);
}
/* Accent */
.accent { color: #a78bfa; }
.accent-bg { background: #a78bfa; }
/* Gradient text */
.gradient-text { .gradient-text {
background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #60a5fa 100%); background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #818cf8 80%, #93c5fd 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
} }
/* Subtle radial glows */ /* Tags / pills */
.glow-orb-1 { .tag {
position: absolute; background: rgba(139,92,246,0.1);
width: 600px; height: 600px; border: 1px solid rgba(139,92,246,0.2);
background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%); color: #c4b5fd;
border-radius: 50%; font-size: 0.7rem;
pointer-events: none; font-family: var(--font-sans);
} font-weight: 500;
.glow-orb-2 { letter-spacing: 0.02em;
position: absolute; padding: 0.2rem 0.6rem;
width: 400px; height: 400px; border-radius: 999px;
background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
} }
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0f0c29; } ::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); } ::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.4); }

6
app/layout.jsx
View File

@ -1,13 +1,13 @@
import './globals.css' import './globals.css'
export const metadata = { export const metadata = {
title: 'Fibe — Ship faster. Break less.', title: 'Fibe — Your entire stack, live in seconds.',
description: 'Fibe is a fullstack playground orchestrator. Spin up production-like environments in seconds.', description: 'Fibe orchestrates fullstack environments from any git repo. Web apps, APIs, databases, AI agents, preview envs and jobs — on your infra, zero DevOps.',
} }
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en" className="dark">
<body>{children}</body> <body>{children}</body>
</html> </html>
) )

434
app/page.jsx
View File

@ -2,29 +2,45 @@ export default function Home() {
return ( return (
<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 glow orbs */} {/* Ambient orbs */}
<div className="glow-orb-1" style={{top: '-100px', right: '-100px'}} /> <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-2" style={{bottom: '20%', left: '-80px'}} /> <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-1" style={{top: '60%', right: '10%', width: '400px', height: '400px'}} /> <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%'}} />
{/* ── NAV ── */} {/* ── NAV ── */}
<nav className="fixed top-0 w-full z-50 border-b border-white/5 glass"> <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">
<div className="flex items-center gap-2"> {/* Phoenix logo */}
<div className="w-7 h-7 rounded-lg accent-bg flex items-center justify-center text-xs font-black text-white/90">f</div> <div className="flex items-center gap-2.5">
<span className="text-lg font-bold tracking-tight">fibe</span> <div className="relative w-8 h-8">
<div className="w-8 h-8 rounded-xl flex items-center justify-center text-sm font-black"
style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 16px rgba(139,92,246,0.4)'}}>
<span className="animate-flame-out absolute"
style={{top:'50%',left:'50%',transform:'translate(-50%,-50%)',fontSize:'13px',lineHeight:1}}>
ƒ
</span>
</div>
</div>
<span className="text-lg font-bold tracking-tight" style={{letterSpacing:'-0.02em'}}>fibe</span>
</div> </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> <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="#how" className="hover:text-white transition-colors">How it works</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="#features" className="hover:text-white transition-colors">Platform</a>
<a href="#genies" className="hover:text-white transition-colors">Genies</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>
<div className="flex items-center gap-3"> <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/login"
className="text-sm hidden md:block transition-colors"
style={{color:'rgba(161,161,170,0.7)'}}>
Sign in
</a>
<a href="https://next.fibe.live/register" <a href="https://next.fibe.live/register"
className="text-sm font-semibold px-4 py-2 rounded-lg transition-all hover:scale-[1.03]" 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, #a78bfa, #818cf8)'}}> style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}>
Get started Get started
</a> </a>
</div> </div>
@ -32,84 +48,91 @@ export default function Home() {
</nav> </nav>
{/* ── HERO ── */} {/* ── HERO ── */}
<section className="relative pt-40 pb-20 px-6"> <section className="relative pt-44 pb-24 px-6 animate-float-up">
<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 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)'}}> <div className="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-1.5 mb-10"
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span> style={{color:'#c4b5fd',border:'1px solid rgba(139,92,246,0.25)',background:'rgba(139,92,246,0.08)'}}>
Docker-native fullstack orchestration — fra1 online <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
Fullstack orchestration — fra1 · fra2 · nyc3 · your VPS
</div> </div>
<h1 className="text-6xl md:text-8xl font-black tracking-tight leading-[1.02] mb-6"> <h1 className="font-display text-6xl md:text-8xl font-normal tracking-tight leading-[1.05] mb-6"
style={{letterSpacing:'-0.02em'}}>
Your entire stack,<br /> Your entire stack,<br />
<span className="gradient-text text-glow">live in seconds.</span> <em className="gradient-text not-italic">live in seconds.</em>
</h1> </h1>
<p className="text-lg md:text-xl text-white/50 max-w-2xl mx-auto mb-10 leading-relaxed"> <p className="text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed"
Fibe spins up production-like fullstack environments from any git repo. style={{color:'rgba(161,161,170,0.8)'}}>
Web apps, APIs, databases, AI agents, jobs — all running on your own infra. Fibe orchestrates fullstack environments from any git repo — web apps, APIs, databases,
AI agents, preview envs and jobs. On your infra. Zero DevOps.
</p> </p>
<div className="flex flex-col sm:flex-row gap-3 justify-center mb-20"> <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-bold px-8 py-3.5 rounded-xl transition-all hover:scale-[1.02] hover:shadow-lg 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, #a78bfa, #818cf8)', boxShadow: '0 0 30px rgba(167,139,250,0.3)'}}> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 40px rgba(139,92,246,0.35)', color:'#fff'}}>
Start for free — no credit card Start for free — no card needed
</a> </a>
<a href="https://github.com/fibegg/sdk" <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" className="font-medium px-8 py-3.5 rounded-xl transition-all hover:text-white text-sm glass"
style={{borderColor: 'rgba(255,255,255,0.12)'}}> style={{color:'rgba(161,161,170,0.7)',borderColor:'rgba(139,92,246,0.15)'}}>
View SDK on GitHub brew install fibegg/sdk/fibe ↗
</a> </a>
</div> </div>
{/* Terminal mockup */} {/* Terminal */}
<div className="max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden glow-purple"> <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 border-b" style={{borderColor: 'rgba(167,139,250,0.15)'}}> <div className="flex items-center gap-1.5 px-4 py-3"
<span className="w-3 h-3 rounded-full bg-red-500/70"></span> style={{borderBottom:'1px solid rgba(139,92,246,0.12)'}}>
<span className="w-3 h-3 rounded-full bg-yellow-500/70"></span> <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(239,68,68,0.6)'}} />
<span className="w-3 h-3 rounded-full bg-green-500/70"></span> <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(234,179,8,0.6)'}} />
<span className="ml-3 text-xs font-mono" style={{color: 'rgba(167,139,250,0.5)'}}>fibe sdk</span> <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>
<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 className="text-white/30">$</span> <span className="text-green-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 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><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 className="text-white/30"> ✓ Marquee registered — fra1</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><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><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 className="text-white/30"> ✓ Cloning repo... building image... starting...</p> <p style={{color:'rgba(255,255,255,0.25)'}}> ✓ Cloning · building · routing · SSL</p>
<p className="text-white/30"> ✓ Live at: <span className="text-white/60">https://my-app.fibe.me</span></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><span className="text-white/30">$</span> <span className="text-yellow-400">git push</span> <span className="text-white/40">&amp;&amp; # hot-reload kicks in</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>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* ── WHAT YOU CAN BUILD ── */} {/* ── WHAT YOU CAN BUILD ── */}
<section id="build" className="py-24 px-6 relative"> <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">
<div className="text-center mb-16"> <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> <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="text-4xl md:text-5xl font-black tracking-tight">Anything that runs in Docker.</h2> <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
<p className="text-white/40 mt-4 max-w-xl mx-auto">If it has a Dockerfile, Fibe can run it. Here&apos;s what people ship every day.</p> Anything that runs in Docker.
</h2>
<p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}>
If it has a Dockerfile, Fibe can run it, expose it, route it and SSL it.
</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', color: 'rgba(167,139,250,0.15)' }, {icon:'🌐', label:'Web Apps', desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel', glow:'rgba(139,92,246,0.12)'},
{ icon: '⚙️', label: 'REST & GraphQL APIs', desc: 'Express, Fastify, Go Fiber, FastAPI, NestJS', color: 'rgba(99,102,241,0.15)' }, {icon:'⚙️', label:'REST & GraphQL', desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC', glow:'rgba(99,102,241,0.12)'},
{ icon: '🗄️', label: 'Databases', desc: 'Postgres, MySQL, MongoDB, Redis, SQLite', color: 'rgba(59,130,246,0.15)' }, {icon:'🗄️', label:'Databases', desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse', glow:'rgba(59,130,246,0.1)'},
{ icon: '🤖', label: 'AI Agents', desc: 'Autonomous Genies that build, debug & deploy', color: 'rgba(167,139,250,0.15)' }, {icon:'🤖', label:'AI Agents', desc:'Autonomous Genies — Claude-powered, in-playground coders', glow:'rgba(167,139,250,0.12)'},
{ icon: '🔄', label: 'Preview Envs', desc: 'Every branch gets its own live playground URL', color: 'rgba(34,197,94,0.12)' }, {icon:'🔄', label:'Preview Envs', desc:'Every branch gets its own subdomain & live URL automatically',glow:'rgba(34,197,94,0.09)'},
{ icon: '⚡', label: 'Jobs & CI', desc: 'One-shot Tricks: tests, migrations, builds, cron', color: 'rgba(234,179,8,0.12)' }, {icon:'⚡', label:'Jobs & CI', desc:'One-shot Tricks: tests, migrations, cron, build pipelines', glow:'rgba(234,179,8,0.09)'},
{ icon: '🧩', label: 'Microservices', desc: 'Multi-repo compose: frontend + backend + infra', color: 'rgba(239,68,68,0.1)' }, {icon:'🧩', label:'Microservices', desc:'Multi-repo compose: frontend + backend + workers + infra', glow:'rgba(239,68,68,0.08)'},
{ icon: '🛠️', label: 'Internal Tools', desc: 'Metabase, n8n, Grafana, anything self-hosted', color: 'rgba(20,184,166,0.12)' }, {icon:'🛠️', label:'Internal Tools', desc:'Metabase, n8n, Grafana, Gitea, anything self-hosted', glow:'rgba(20,184,166,0.09)'},
].map(({ icon, label, desc, color }) => ( ].map(({icon, label, desc, glow}) => (
<div key={label} <div key={label} className="glass rounded-2xl p-5 transition-all hover:scale-[1.02] hover:brightness-110 cursor-default"
className="glass rounded-2xl p-5 hover:scale-[1.02] transition-all cursor-default group" style={{background:glow, borderColor:'rgba(255,255,255,0.06)'}}>
style={{background: color, borderColor: 'rgba(255,255,255,0.07)'}}>
<div className="text-3xl mb-3">{icon}</div> <div className="text-3xl mb-3">{icon}</div>
<h3 className="font-bold text-sm text-white mb-1.5">{label}</h3> <h3 className="font-semibold text-sm text-white mb-1.5">{label}</h3>
<p className="text-xs text-white/40 leading-relaxed">{desc}</p> <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
</div> </div>
))} ))}
</div> </div>
@ -117,140 +140,73 @@ export default function Home() {
</section> </section>
{/* ── HOW IT WORKS ── */} {/* ── HOW IT WORKS ── */}
<section id="how" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}> <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="max-w-4xl mx-auto">
<div className="text-center mb-16"> <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> <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="text-4xl md:text-5xl font-black tracking-tight">Four steps to a live URL.</h2> <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
Four steps to a live URL.
</h2>
</div> </div>
<div className="relative"> <div className="space-y-4 relative">
{/* Connector line */} <div className="absolute left-[2.35rem] top-12 bottom-12 w-px hidden md:block"
<div className="absolute left-8 top-10 bottom-10 w-px hidden md:block" 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(167,139,250,0.4), rgba(167,139,250,0.05))'}} />
<div className="space-y-6"> {[
{[ {n:'01', title:'Connect a Prop', badge:'Prop', desc:'Link any GitHub or Gitea repo. Fibe tracks every branch. One repo → unlimited 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: '01', title: 'Connect a Prop', {n:'03', title:'Launch a Playground',badge:'Playground', desc:'Pick a Playspec (your docker-compose blueprint), choose a branch, launch. Full env in ~60s.'},
desc: 'Link any GitHub or Gitea repository. Fibe tracks every branch. One repo can power multiple environments.', {n:'04', title:'Push & iterate', badge:'Live →', desc:'Hot-reload on every push. Share the URL with your team. SSL, subdomains, routing — automatic.'},
badge: 'Prop' ].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"
n: '02', title: 'Register a Marquee', style={{background:'rgba(139,92,246,0.15)',color:'#a78bfa',border:'1px solid rgba(139,92,246,0.25)'}}>
desc: 'Point Fibe at any VPS or bare metal server. One command. SSH in, Docker running — that\'s all you need.', {n}
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 className="flex-1 min-w-0">
</div> <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>
</div> </div>
</section> </section>
{/* ── CORE FEATURES ── */} {/* ── PLATFORM FEATURES ── */}
<section id="features" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}> <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="max-w-7xl mx-auto">
<div className="text-center mb-16"> <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> <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Platform</p>
<h2 className="text-4xl md:text-5xl font-black tracking-tight">Every layer, covered.</h2> <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.7)'}}>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: '🌀', {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.'},
title: 'Playgrounds', {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.'},
desc: 'Full docker-compose environments with live URLs. Every service wired, every port routed, every env var injected — automatically.', {icon:'📐', title:'Playspecs', tags:['blueprints','reusable','versioned'], desc:'Reusable deployment blueprints — like Helm charts for docker-compose. Define once, launch infinite playgrounds.'},
tags: ['docker-compose', 'live URL', 'hot-reload'] {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:'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:'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: '🧬', {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.'},
title: 'Props', {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.'},
desc: 'Git repositories as first-class citizens. Connect GitHub or Gitea. Track any branch. Multi-repo setups supported out of the box.', ].map(({icon, title, desc, tags}) => (
tags: ['GitHub', 'Gitea', 'multi-repo'] <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)'}}>
{
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: '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: '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 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']
},
{
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> <div className="text-2xl mb-4">{icon}</div>
<h3 className="font-bold text-white mb-2">{title}</h3> <h3 className="font-semibold text-white mb-2">{title}</h3>
<p className="text-sm text-white/45 leading-relaxed mb-4">{desc}</p> <p className="text-sm leading-relaxed mb-4" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5">
{tags.map(t => ( {tags.map(t => <span key={t} className="tag">{t}</span>)}
<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>
))} ))}
@ -259,29 +215,30 @@ export default function Home() {
</section> </section>
{/* ── GENIES SPOTLIGHT ── */} {/* ── GENIES SPOTLIGHT ── */}
<section className="py-24 px-6 relative overflow-hidden" style={{borderTop: '1px solid rgba(167,139,250,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-1" style={{top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '800px', height: '800px', opacity: 0.6}} /> <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="max-w-5xl mx-auto relative z-10"> <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="glass-strong rounded-3xl p-10 md:p-16 text-center">
<div className="text-5xl mb-6">🤖</div> <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> <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Agents</p>
<h2 className="text-3xl md:text-5xl font-black tracking-tight mb-6"> <h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
Agents that actually<br /><span className="gradient-text">ship code.</span> Agents that actually<br /><em className="gradient-text not-italic">ship code.</em>
</h2> </h2>
<p className="text-white/50 text-lg max-w-2xl mx-auto mb-8 leading-relaxed"> <p className="text-lg max-w-2xl mx-auto mb-12 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
Genies are autonomous Claude-powered agents that live inside your Playgrounds. Genies are autonomous Claude-powered agents that live inside your Playgrounds.
They have full access to your codebase, terminal, Docker, and git. Full access to your codebase, terminal, Docker and git.
Assign them a task — they plan, implement, test and push. Assign a task — they plan, build, test and push.
</p> </p>
<div className="grid md:grid-cols-3 gap-4 text-left mt-10">
<div className="grid md:grid-cols-3 gap-4 text-left">
{[ {[
{ title: 'Full environment access', desc: 'Reads your code, runs commands, edits files, pushes commits — inside your live Playground.' }, {title:'Full environment access', desc:'Reads code, runs commands, edits files, pushes commits — inside a live Playground with real Docker services running.'},
{ title: 'Mutter stream', desc: 'Real-time internal monologue. Watch the agent think, plan and debug. Transparent by design.' }, {title:'Mutter stream', desc:'Real-time internal monologue. Watch the agent reason, plan and debug. Transparent by design. No black boxes.'},
{ title: 'Artefacts & Feedback', desc: 'Genies produce artefacts (files, reports) and request feedback. Full async collaboration loop.' }, {title:'Artefacts & Feedback', desc:'Genies produce artefacts (files, reports, PRs) and request feedback. A proper async collaboration loop.'},
].map(({ title, desc }) => ( ].map(({title, desc}) => (
<div key={title} className="glass rounded-xl p-5" style={{borderColor: 'rgba(167,139,250,0.15)'}}> <div key={title} className="glass rounded-xl p-5" style={{borderColor:'rgba(139,92,246,0.15)'}}>
<h4 className="font-semibold text-white text-sm mb-2">{title}</h4> <h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
<p className="text-xs text-white/40 leading-relaxed">{desc}</p> <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
</div> </div>
))} ))}
</div> </div>
@ -290,32 +247,36 @@ export default function Home() {
</section> </section>
{/* ── STACK ── */} {/* ── STACK ── */}
<section id="stack" className="py-24 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}> <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="max-w-6xl mx-auto">
<div className="text-center mb-16"> <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> <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="text-4xl md:text-5xl font-black tracking-tight mb-4">Battle-tested all the way down.</h2> <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
<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&apos;ve done for years.</p> 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&apos;ve done for a decade.
</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-10">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-widest mb-4 text-white/30">Platform</p> <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"> <div className="flex flex-wrap gap-2">
{['Docker', 'docker-compose', 'Traefik', "Let's Encrypt", 'SSH', 'Go', 'PostgreSQL', 'Redis'].map(t => ( {['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" <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)'}}> style={{color:'#a78bfa',borderColor:'rgba(139,92,246,0.2)'}}>
{t} {t}
</span> </span>
))} ))}
</div> </div>
</div> </div>
<div> <div>
<p className="text-xs font-semibold uppercase tracking-widest mb-4 text-white/30">Works with any framework</p> <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"> <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 => ( {['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" <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)'}}> style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(255,255,255,0.06)'}}>
{t} {t}
</span> </span>
))} ))}
@ -326,41 +287,41 @@ export default function Home() {
</section> </section>
{/* ── STATS ── */} {/* ── STATS ── */}
<section className="py-16 px-6" style={{borderTop: '1px solid rgba(167,139,250,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"> <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6"> {[
{[ {n:'~60s', label:'avg Playground boot'},
{ n: '60s', label: 'avg Playground boot time' }, {n:'∞', label:'Playgrounds per Marquee'},
{ n: '∞', label: 'Playgrounds per Marquee' }, {n:'100%', label:'your infra, your data'},
{ n: '100%', label: 'your infra, your data' }, {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="text-center glass rounded-2xl p-6"> <div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>
<div className="text-4xl font-black gradient-text mb-2">{n}</div> <div className="text-xs" style={{color:'rgba(161,161,170,0.5)'}}>{label}</div>
<div className="text-xs text-white/40">{label}</div> </div>
</div> ))}
))}
</div>
</div> </div>
</section> </section>
{/* ── CTA ── */} {/* ── CTA ── */}
<section className="py-32 px-6 relative overflow-hidden" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}> <section className="py-36 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
<div className="glow-orb-1" style={{top: '50%', left: '50%', transform: 'translate(-50%,-50%)'}} /> <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="max-w-2xl mx-auto text-center relative z-10"> <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"> <h2 className="font-display text-5xl md:text-7xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
Ready to <span className="gradient-text">fibe</span>? Ready to <em className="gradient-text not-italic">fibe</em>?
</h2> </h2>
<p className="text-white/40 text-lg mb-10">Your first Playground is free. No credit card. No CLI required to start.</p> <p className="text-lg mb-10" style={{color:'rgba(161,161,170,0.65)'}}>
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"> <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-bold px-10 py-4 rounded-xl transition-all hover:scale-[1.02] 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, #a78bfa, #818cf8)', boxShadow: '0 0 40px rgba(167,139,250,0.35)'}}> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 50px rgba(139,92,246,0.4)'}}>
Start building — free Start building — free
</a> </a>
<a href="https://github.com/fibegg" <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" className="font-medium px-10 py-4 rounded-xl transition-all hover:text-white text-base glass"
style={{borderColor: 'rgba(255,255,255,0.1)'}}> style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(139,92,246,0.15)'}}>
Explore on GitHub Explore on GitHub
</a> </a>
</div> </div>
@ -368,14 +329,15 @@ export default function Home() {
</section> </section>
{/* ── FOOTER ── */} {/* ── FOOTER ── */}
<footer className="py-10 px-6" style={{borderTop: '1px solid rgba(167,139,250,0.08)'}}> <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="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="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> <div className="w-6 h-6 rounded-md flex items-center justify-center text-xs font-black"
<span className="font-bold text-white/60">fibe</span> style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div>
<span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span>
</div> </div>
<span className="text-sm text-white/25">© 2026 Fibe — Your entire stack, live in seconds.</span> <span className="text-sm" style={{color:'rgba(161,161,170,0.25)'}}>© 2026 Fibe — Your entire stack, live in seconds.</span>
<div className="flex gap-6 text-sm text-white/30"> <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>
<a href="https://git-next.fibe.live/fibegg" className="hover:text-white transition-colors">Gitea</a> <a href="https://git-next.fibe.live/fibegg" className="hover:text-white transition-colors">Gitea</a>