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

Entry-user friendly: 'Idea to live app', Genies-first, no-code manifesto

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

66
app/page.jsx
View File

@ -53,27 +53,23 @@ export default function Home() {
<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.3)',background:'rgba(139,92,246,0.1)'}}> 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" />
The fullstack development revolution No code required &nbsp;·&nbsp; no DevOps &nbsp;·&nbsp; no limits
</div> </div>
<h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8" <h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8"
style={{letterSpacing:'-0.03em'}}> style={{letterSpacing:'-0.03em'}}>
Code to live URL.<br /> Idea to live app.<br />
<em className="gradient-text not-italic">Sixty seconds.</em> <em className="gradient-text not-italic">Sixty seconds.</em>
</h1> </h1>
<p className="text-xl md:text-2xl max-w-2xl mx-auto mb-4 leading-relaxed" <p className="text-xl md:text-2xl max-w-2xl mx-auto mb-5 leading-relaxed"
style={{color:'rgba(255,255,255,0.55)'}}> style={{color:'rgba(255,255,255,0.55)'}}>
Fibe orchestrates complete fullstack environments — apps, APIs, databases, Describe what you want to build. Fibe and its AI Genies handle the code,
AI agents, preview envs, jobs — on <em className="not-italic" style={{color:'rgba(196,181,253,0.85)'}}>your</em> infrastructure. 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>
<p className="text-base max-w-xl mx-auto mb-4" <p className="text-base max-w-xl mx-auto mb-14"
style={{color:'rgba(161,161,170,0.45)'}}> style={{color:'rgba(161,161,170,0.4)'}}>
No DevOps team. No YAML hell. No lock-in. No ticket. Just ship. Zero DevOps expertise. Zero setup ceremony. Just your idea, live.
</p>
<p className="text-base max-w-xl mx-auto mb-14 font-medium"
style={{color:'rgba(167,139,250,0.55)'}}>
Or skip the code entirely — describe what you want and a Genie builds it.
</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">
@ -118,9 +114,9 @@ export default function Home() {
style={{color:'rgba(139,92,246,0.55)'}}>The old way is dead</p> 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"> <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:'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:'45-minute CI queues', alive:'Playgrounds boot in ~60s. Preview every branch on its own URL before touching main.'}, {dead:'Hiring a DevOps team', alive:'Fibe handles servers, SSL, subdomains and routing automatically. You focus on the product.'},
{dead:'The ops team bottleneck', alive:'No DevOps. No YAML archaeology. No ticket. One command: fibe launch.'}, {dead:'Needing to know how to code', alive:'No experience required. Genies write the code. You review, you direct, you ship.'},
].map(({dead, alive}) => ( ].map(({dead, alive}) => (
<div key={dead}> <div key={dead}>
<p className="font-display text-2xl mb-3" <p className="font-display text-2xl mb-3"
@ -141,35 +137,41 @@ export default function Home() {
style={{color:'rgba(139,92,246,0.6)'}}>Two ways to ship</p> style={{color:'rgba(139,92,246,0.6)'}}>Two ways to ship</p>
<div className="grid md:grid-cols-2 gap-5"> <div className="grid md:grid-cols-2 gap-5">
<div className="glass rounded-2xl p-8" style={{borderColor:'rgba(139,92,246,0.15)'}}> {/* Genies first — the entry-user path */}
<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)'}}>
Git push. Fibe builds, routes, SSLs and hot-reloads. Your entire stack, live in seconds, on your 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&nbsp;&nbsp;<span className="text-emerald-400">✓ live</span>
</div>
</div>
<div className="glass-strong rounded-2xl p-8 relative overflow-hidden" <div className="glass-strong rounded-2xl p-8 relative overflow-hidden"
style={{borderColor:'rgba(167,139,250,0.3)'}}> 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="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="relative z-10">
<div className="text-2xl mb-4">🤖</div> <div className="flex items-center gap-2 mb-4">
<h3 className="font-semibold text-white mb-3 text-lg">Genies write the code</h3> <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)'}}> <p className="text-sm leading-relaxed mb-6" style={{color:'rgba(161,161,170,0.7)'}}>
Describe the feature. A Genie plans, codes, tests and pushes. No coding experience? No problem. Describe your idea in plain English.
You review. You never open an editor. A Genie plans it, builds it, tests it and ships it. You just review and approve.
</p> </p>
<div className="font-mono text-xs px-3 py-2 rounded-lg" <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)'}}> style={{background:'rgba(139,92,246,0.12)',color:'rgba(196,181,253,0.7)',border:'1px solid rgba(167,139,250,0.2)'}}>
&ldquo;add Google OAuth&rdquo;&nbsp;&nbsp;<span className="text-emerald-400">✓ shipped</span> &ldquo;build me a SaaS landing page&rdquo;&nbsp;&nbsp;<span className="text-emerald-400">✓ shipped</span>
</div> </div>
</div> </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&nbsp;&nbsp;<span className="text-emerald-400">✓ live</span>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>