Memory Engineering MCP

'use client'; import { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { Brain, Github, Menu, X } from 'lucide-react'; export default function Navigation() { const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const navItems = [ { href: '#code-search', label: 'Code Search' }, { href: '#memory', label: 'Memory' }, { href: '#features', label: 'Features' }, { href: '#performance', label: 'Performance' }, { href: '#demo', label: 'Demo' }, { href: '#installation', label: 'Get Started' }, ]; return ( <motion.nav initial={{ y: -100 }} animate={{ y: 0 }} className={`fixed top-0 w-full z-50 transition-all duration-300 ${ isScrolled ? 'bg-gray-900/95 backdrop-blur-md shadow-lg' : '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-16"> <div className="flex items-center space-x-3"> <Brain className="w-8 h-8 text-blue-500" /> <span className="font-bold text-xl">Memory Engineering MCP</span> </div> {/* Desktop Navigation */} <div className="hidden md:flex items-center space-x-8"> {navItems.map((item) => ( <a key={item.href} href={item.href} className="text-gray-300 hover:text-white transition-colors" > {item.label} </a> ))} <a href="https://github.com/romiluz13/memory-engineering-mcp" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors" > <Github className="w-5 h-5" /> <span>GitHub</span> </a> </div> {/* Mobile Menu Button */} <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="md:hidden p-2" > {isMobileMenuOpen ? <X /> : <Menu />} </button> </div> {/* Mobile Menu */} {isMobileMenuOpen && ( <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="md:hidden bg-gray-800 rounded-lg mt-2 p-4" > {navItems.map((item) => ( <a key={item.href} href={item.href} className="block py-2 text-gray-300 hover:text-white transition-colors" onClick={() => setIsMobileMenuOpen(false)} > {item.label} </a> ))} <a href="https://github.com/romiluz13/memory-engineering-mcp" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors mt-4" > <Github className="w-5 h-5" /> <span>GitHub</span> </a> </motion.div> )} </div> </motion.nav> ); }