Handlenavigate

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
-import { Link } from "react-router-dom"
 import Logo from "../../assets/pictures/Logo"
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
 
 const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
 
@@ -8,6 +8,9 @@ const Footer = () => {
   const [isVisible, setIsVisible] = useState(false)
   const footerRef = useRef(null)
 
+  // ✅ Használjuk a navigációs függvényeket
+  const { goLanding, goAbout, goContacts } = HandleNavigate()
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -16,14 +19,10 @@ const Footer = () => {
       { threshold: 0.3 }
     )
 
-    if (footerRef.current) {
-      observer.observe(footerRef.current)
-    }
+    if (footerRef.current) observer.observe(footerRef.current)
 
     return () => {
-      if (footerRef.current) {
-        observer.unobserve(footerRef.current)
-      }
+      if (footerRef.current) observer.unobserve(footerRef.current)
     }
   }, [])
 
@@ -40,10 +39,18 @@ const Footer = () => {
       <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
         {/* Logó */}
         <div className="flex flex-col items-center">
-          <a href="/" className="hover:scale-105 hover:brightness-110">
+          <button
+            onClick={goLanding}
+            className="hover:scale-105 hover:brightness-110 transition-transform"
+          >
             <Logo size={100} />
-          </a>
-          <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
+          </button>
+          <button
+            onClick={goLanding}
+            className="font-extrabold text-xl mt-2 tracking-wide text-white hover:text-green-500 transition-colors"
+          >
+            SerpentRace
+          </button>
         </div>
 
         {/* Oldalak */}
@@ -51,15 +58,24 @@ const Footer = () => {
           <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-500">
+          <button
+            onClick={goLanding}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Főoldal
-          </a>
-          <a href="/about" className="hover:underline hover:text-green-500">
+          </button>
+          <button
+            onClick={goAbout}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Rólunk
-          </a>
-          <a href="/contacts" className="hover:underline hover:text-green-500">
+          </button>
+          <button
+            onClick={goContacts}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Kapcsolat
-          </a>
+          </button>
         </div>
 
         {/* Közösség */}
@@ -103,7 +119,7 @@ const Footer = () => {
       {isVisible && (
         <button
           onClick={scrollToTop}
-          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110"
+          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110 transition-transform"
           aria-label="Ugrás az oldal tetejére"
         >
           <ArrowUpIcon />