From 422421ac56021b3087be7ba3e437720633dead77 Mon Sep 17 00:00:00 2001
From: vyakymenko <rayfesoul@gmail.com>
Date: Thu, 23 Apr 2026 09:13:32 +0000
Subject: [PATCH] =?UTF-8?q?Add=20mobile=20hamburger=20menu=20=E2=80=94=20a?=
 =?UTF-8?q?ll=20nav=20links=20accessible=20on=20mobile?=
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/components/Nav.jsx | 124 +++++++++++++++++++++++++++++++++++++++++
 app/page.jsx           |  41 +-------------
 2 files changed, 127 insertions(+), 38 deletions(-)
 create mode 100644 app/components/Nav.jsx

diff --git a/app/components/Nav.jsx b/app/components/Nav.jsx
new file mode 100644
index 0000000..697718c
--- /dev/null
+++ b/app/components/Nav.jsx
@@ -0,0 +1,124 @@
+'use client'
+import { useState } from 'react'
+
+const LINKS = [
+  { href: '#manifesto', label: 'Why Fibe' },
+  { href: '#features',  label: 'Platform' },
+  { href: '#genies',    label: 'Genies' },
+  { href: '#clouds',    label: 'Cloud guides' },
+  { href: '#everything',label: 'Everything included' },
+  { href: '#stack',     label: 'Stack' },
+]
+
+export default function Nav() {
+  const [open, setOpen] = useState(false)
+  const close = () => setOpen(false)
+
+  return (
+    <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">
+
+        {/* Logo */}
+        <a href="#" className="flex items-center gap-2.5" onClick={close}>
+          <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>
+        </a>
+
+        {/* Desktop links */}
+        <div className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}>
+          {LINKS.map(l => (
+            <a key={l.href} href={l.href} className="hover:text-white transition-colors">{l.label}</a>
+          ))}
+        </div>
+
+        {/* Desktop CTA */}
+        <div className="hidden md:flex items-center gap-3">
+          <a href="https://next.fibe.live/login"
+            className="text-sm transition-colors"
+            style={{color:'rgba(161,161,170,0.7)'}}>
+            Sign in
+          </a>
+          <a href="https://next.fibe.live/register"
+            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, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}>
+            Get started free
+          </a>
+        </div>
+
+        {/* Mobile: CTA + hamburger */}
+        <div className="flex md:hidden items-center gap-2">
+          <a href="https://next.fibe.live/register"
+            className="text-xs font-semibold px-3 py-1.5 rounded-lg"
+            style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)'}}>
+            Get started
+          </a>
+          <button
+            onClick={() => setOpen(o => !o)}
+            aria-label={open ? 'Close menu' : 'Open menu'}
+            className="w-9 h-9 flex flex-col items-center justify-center gap-1.5 rounded-lg transition-colors"
+            style={{color:'rgba(161,161,170,0.8)',background: open ? 'rgba(139,92,246,0.1)' : 'transparent'}}>
+            {open ? (
+              /* X icon */
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="3" y1="3" x2="15" y2="15" />
+                <line x1="15" y1="3" x2="3" y2="15" />
+              </svg>
+            ) : (
+              /* Hamburger icon */
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="2" y1="5" x2="16" y2="5" />
+                <line x1="2" y1="9" x2="16" y2="9" />
+                <line x1="2" y1="13" x2="16" y2="13" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile dropdown */}
+      {open && (
+        <div className="md:hidden glass-strong"
+          style={{borderTop:'1px solid rgba(139,92,246,0.1)'}}>
+          <div className="px-6 py-3">
+            {LINKS.map((l, i) => (
+              <a
+                key={l.href}
+                href={l.href}
+                onClick={close}
+                className="flex items-center justify-between py-3.5 text-sm transition-colors hover:text-white"
+                style={{
+                  color:'rgba(161,161,170,0.75)',
+                  borderBottom: i < LINKS.length - 1 ? '1px solid rgba(139,92,246,0.07)' : 'none',
+                }}>
+                {l.label}
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{opacity:0.35}}>
+                  <path d="M3 7h8M8 4l3 3-3 3" />
+                </svg>
+              </a>
+            ))}
+          </div>
+          <div className="px-6 py-4 flex gap-3" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
+            <a href="https://next.fibe.live/login"
+              className="flex-1 text-center text-sm py-2.5 rounded-xl glass transition-colors"
+              style={{color:'rgba(161,161,170,0.7)'}}>
+              Sign in
+            </a>
+            <a href="https://next.fibe.live/register"
+              className="flex-1 text-center text-sm font-semibold py-2.5 rounded-xl transition-all hover:brightness-110"
+              style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)'}}>
+              Get started free
+            </a>
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}
diff --git a/app/page.jsx b/app/page.jsx
index 45e6047..757b313 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,3 +1,5 @@
+import Nav from './components/Nav'
+
 export default function Home() {
   return (
     <main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden">
@@ -7,44 +9,7 @@ export default function Home() {
       <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 ── */}
-      <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="flex items-center gap-2.5">
-            <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 className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}>
-            <a href="#manifesto" className="hover:text-white transition-colors">Why Fibe</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="#clouds"    className="hover:text-white transition-colors">Deploy</a>
-            <a href="#everything" className="hover:text-white transition-colors">Everything</a>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <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"
-              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, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}>
-              Get started free
-            </a>
-          </div>
-        </div>
-      </nav>
+      <Nav />
 
       {/* ── HERO ── */}
       <section className="relative pt-44 pb-24 px-6 animate-float-up">