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() {
|
||||
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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user