Add mobile hamburger menu — all nav links accessible on mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
bc4e662ae5
commit
422421ac56
124
app/components/Nav.jsx
Normal file
124
app/components/Nav.jsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
41
app/page.jsx
41
app/page.jsx
@ -1,3 +1,5 @@
|
|||||||
|
import Nav from './components/Nav'
|
||||||
|
|
||||||
export default function Home() {
|
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">
|
||||||
@ -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: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%'}} />
|
<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 />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* ── HERO ── */}
|
{/* ── HERO ── */}
|
||||||
<section className="relative pt-44 pb-24 px-6 animate-float-up">
|
<section className="relative pt-44 pb-24 px-6 animate-float-up">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user