From 85af50886ba5be6dedfb529162333feb5e65af41 Mon Sep 17 00:00:00 2001
From: vyakymenko <rayfesoul@gmail.com>
Date: Thu, 23 Apr 2026 09:04:23 +0000
Subject: [PATCH] Entry-user friendly: 'Idea to live app', Genies-first,
 no-code manifesto

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.jsx | 66 +++++++++++++++++++++++++++-------------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/app/page.jsx b/app/page.jsx
index 104a51a..e08aa69 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -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"
             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" />
-            The fullstack development revolution
+            No code required &nbsp;·&nbsp; no DevOps &nbsp;·&nbsp; no limits
           </div>
 
           <h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8"
             style={{letterSpacing:'-0.03em'}}>
-            Code to live URL.<br />
+            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-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)'}}>
-            Fibe orchestrates complete fullstack environments — apps, APIs, databases,
-            AI agents, preview envs, jobs — on <em className="not-italic" style={{color:'rgba(196,181,253,0.85)'}}>your</em> infrastructure.
+            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-4"
-            style={{color:'rgba(161,161,170,0.45)'}}>
-            No DevOps team. No YAML hell. No lock-in. No ticket. Just ship.
-          </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 className="text-base max-w-xl mx-auto mb-14"
+            style={{color:'rgba(161,161,170,0.4)'}}>
+            Zero DevOps expertise. Zero setup ceremony. Just your idea, live.
           </p>
 
           <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>
           <div className="grid md:grid-cols-3 gap-12 text-center">
             {[
-              {dead:'"Works on my machine"',   alive:'Every dev gets an identical live cloud environment. Reproducible. 60 seconds to spin up.'},
-              {dead:'45-minute CI queues',      alive:'Playgrounds boot in ~60s. Preview every branch on its own URL before touching main.'},
-              {dead:'The ops team bottleneck',  alive:'No DevOps. No YAML archaeology. No ticket. One command: fibe launch.'},
+              {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"
@@ -141,35 +137,41 @@ export default function Home() {
             style={{color:'rgba(139,92,246,0.6)'}}>Two ways to ship</p>
           <div className="grid md:grid-cols-2 gap-5">
 
-            <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)'}}>
-                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>
-
+            {/* 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="text-2xl mb-4">🤖</div>
-                <h3 className="font-semibold text-white mb-3 text-lg">Genies write the code</h3>
+                <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)'}}>
-                  Describe the feature. A Genie plans, codes, tests and pushes.
-                  You review. You never open an editor.
+                  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)'}}>
-                  &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>
 
+            {/* 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>
       </section>