SEO/AEO

src/components/Navigation.tsx

@@ -1,30 +1,21 @@
 import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Menu, X, ChevronUp } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 
 const Navigation = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const [showScrollUp, setShowScrollUp] = useState(false);
   const location = useLocation();
 
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 50);
-      setShowScrollUp(window.scrollY > 300);
     };
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-
   const navItems = [
     { name: 'Home', path: '/' },
     { name: 'Services', path: '/services' },
@@ -36,18 +27,21 @@ const Navigation = () => {
   const isActive = (path: string) => location.pathname === path;
 
   return (
-    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-      isScrolled ? 'bg-background/90 backdrop-blur-md border-b border-border' : 'bg-transparent'
-    }`}>
+    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
+      ? 'bg-white/5 backdrop-blur-2xl border-b border-white/20 shadow-2xl shadow-black/20'
+      : '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">
           {/* Logo */}
           <Link to="/" className="flex items-center space-x-3">
-            <img 
-              src="/logo_bayarea.svg" 
-              alt="Bay Area Affiliates Logo" 
-              className="w-8 h-8 opacity-90 hover:opacity-100 transition-opacity duration-300"
-            />
+            <div className="w-12 h-12 flex items-center justify-center overflow-visible">
+              <img
+                src="/logo_bayarea.svg"
+                alt="Bay Area Affiliates Logo"
+                className="w-10 h-10 opacity-90 hover:opacity-100 transition-opacity duration-300"
+              />
+            </div>
             <span className="font-heading font-bold text-lg text-white">
               Bay Area Affiliates
             </span>
@@ -59,11 +53,10 @@ const Navigation = () => {
               <Link
                 key={item.name}
                 to={item.path}
-                className={`font-medium transition-colors duration-200 ${
-                  isActive(item.path)
-                    ? 'text-neon'
-                    : 'text-white hover:text-neon'
-                }`}
+                className={`font-medium transition-colors duration-200 ${isActive(item.path)
+                  ? 'text-neon'
+                  : 'text-white hover:text-neon'
+                  }`}
               >
                 {item.name}
               </Link>
@@ -88,18 +81,17 @@ const Navigation = () => {
 
         {/* Mobile Navigation */}
         {isOpen && (
-          <div className="md:hidden bg-background/95 backdrop-blur-md border-t border-border">
+          <div className="md:hidden bg-white/5 backdrop-blur-2xl border-t border-white/20">
             <div className="px-2 pt-2 pb-3 space-y-1">
               {navItems.map((item) => (
                 <Link
                   key={item.name}
                   to={item.path}
                   onClick={() => 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'
-                  }`}
+                  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}
                 </Link>
@@ -115,17 +107,6 @@ const Navigation = () => {
           </div>
         )}
       </div>
-
-      {/* Scroll to top button */}
-      {showScrollUp && (
-        <button
-          onClick={scrollToTop}
-          className="fixed bottom-8 right-8 z-50 w-12 h-12 bg-neon text-neon-foreground rounded-full shadow-lg hover:shadow-neon transition-all duration-300 flex items-center justify-center group hover:scale-110"
-          aria-label="Scroll to top"
-        >
-          <ChevronUp className="w-6 h-6 transition-transform group-hover:-translate-y-0.5" />
-        </button>
-      )}
     </nav>
   );
 };