Spaces:
Sleeping
Sleeping
File size: 2,953 Bytes
84ee872 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import Link from 'next/link';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';
export default function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const navigation = [
{ name: 'Features', href: '#features' },
{ name: 'Specifications', href: '#specs' },
{ name: 'Applications', href: '#applications' },
{ name: 'Documentation', href: '#docs' },
];
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800">
<nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-xl">R</span>
</div>
<span className="text-xl font-bold">Reachy Mini</span>
</div>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-8">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="text-gray-300 hover:text-white transition-colors duration-200"
>
{item.name}
</Link>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary-400 hover:text-primary-300 transition-colors"
>
Built with anycoder
</a>
</div>
{/* Mobile menu button */}
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="md:hidden p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
>
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Mobile Navigation */}
{isMenuOpen && (
<div className="md:hidden py-4 border-t border-gray-800">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="block py-2 text-gray-300 hover:text-white transition-colors"
onClick={() => setIsMenuOpen(false)}
>
{item.name}
</Link>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="block py-2 text-primary-400 hover:text-primary-300 transition-colors"
>
Built with anycoder
</a>
</div>
)}
</nav>
</header>
);
} |