import { useState, useEffect } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { Menu, X } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import { navVariants, staggerContainer, staggerItem, buttonHover, buttonTap } from '@/utils/animations'; const Navigation = () => { const [isOpen, setIsOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const location = useLocation(); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const navItems = [ { name: 'Home', path: '/' }, { name: 'Services', path: '/services' }, { name: 'About', path: '/about' }, { name: 'Blog', path: '/blog' }, { name: 'Contact', path: '/contact' }, ]; const isActive = (path: string) => location.pathname === path; return ( <> {/* Skip link for accessibility */} Skip to main content
{/* Logo with animation */} Bay Area Affiliates Logo Bay Area Affiliates {/* Desktop Navigation with animations */}
{navItems.map((item, index) => ( {item.name} {/* Animated underline */} {/* Glow effect on hover */} ))} Get Started
{/* Mobile menu button with animation */} setIsOpen(!isOpen)} className="md:hidden text-white hover:text-neon transition-colors" aria-label="Toggle navigation menu" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > {isOpen ? ( ) : ( )}
{/* Mobile Navigation with smooth animations */} {isOpen && ( {navItems.map((item) => ( setIsOpen(false)} className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${isActive(item.path) ? 'text-neon bg-neon/10' : 'text-white hover:text-neon hover:bg-neon/5' }`} > {item.name} ))} setIsOpen(false)} className="block w-full text-center btn-neon mt-4" > Get Started )}
); }; export default Navigation;