Spaces:
Build error
Build error
File size: 3,726 Bytes
65783d9 2863dfe 65783d9 2863dfe 65783d9 2863dfe 65783d9 2863dfe 65783d9 2863dfe 65783d9 | 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 84 85 86 87 88 89 90 91 92 93 | import Link from 'next/link';
import { Menu, X } from 'lucide-react';
import { useState, useEffect } from 'react';
export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 20);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled ? 'bg-slate-900/90 backdrop-blur-md border-b border-slate-800' : 'bg-transparent'
}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-20">
<div className="flex items-center gap-2">
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
<span className="text-white font-bold text-xl">AI</span>
</div>
<span className="text-xl font-bold text-white">NeuralScroll</span>
</div>
<div className="hidden md:flex items-center gap-8">
{['Features', 'Demo', 'Pricing', 'About'].map((item) => (
<Link
key={item}
href={`#${item.toLowerCase()}`}
className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
>
{item}
</Link>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-400 hover:text-white transition-colors"
>
Built with anycoder
</a>
<button className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 transform hover:scale-105">
Get Started
</button>
</div>
<div className="md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="text-slate-300 hover:text-white p-2"
>
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
</div>
{isOpen && (
<div className="md:hidden bg-slate-900 border-b border-slate-800">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{['Features', 'Demo', 'Pricing', 'About'].map((item) => (
<Link
key={item}
href={`#${item.toLowerCase()}`}
className="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={() => setIsOpen(false)}
>
{item}
</Link>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-slate-400 hover:text-white block px-3 py-2 text-sm"
>
Built with anycoder
</a>
<button className="w-full mt-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200">
Get Started
</button>
</div>
</div>
)}
</nav>
);
} |