From def2fa6d5656cc3c1808f1cf0a19a1d1f8615ffd Mon Sep 17 00:00:00 2001
From: vyakymenko <rayfesoul@gmail.com>
Date: Thu, 23 Apr 2026 06:40:21 +0000
Subject: [PATCH] =?UTF-8?q?Lean=20into=20'you=20don't=20need=20to=20code'?=
 =?UTF-8?q?=20=E2=80=94=20Two=20ways=20to=20ship=20section=20+=20Genies=20?=
 =?UTF-8?q?headline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/app/page.jsx b/app/page.jsx
index dfb3dc8..104a51a 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -67,10 +67,14 @@ export default function Home() {
             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.
           </p>
-          <p className="text-base max-w-xl mx-auto mb-14"
+          <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>
 
           <div className="flex flex-col sm:flex-row gap-3 justify-center mb-24">
             <a href="https://next.fibe.live/register"
@@ -130,6 +134,46 @@ export default function Home() {
         </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">
+
+            <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>
+
+            <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>
+                <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.
+                </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>
+                </div>
+              </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'}}>
@@ -264,14 +308,14 @@ export default function Home() {
           <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'}}>
-              Not a chatbot.<br />
-              <em className="gradient-text not-italic">A dev agent in your codebase.</em>
+              You don&apos;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. Assign a task.
-              They plan, build, test and push.
+              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 */}