SEO

src/components/Navigation.tsx

@@ -1,21 +1,30 @@
 import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Menu, X } from 'lucide-react';
+import { Menu, X, ChevronUp } 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' },
@@ -106,6 +115,17 @@ 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>
   );
 };