[#83] Abouthttps://project.mdnd-it.cc/work_packages/83

2025-07-30 20:10:27 +02:00
parent 6720375fa1
commit 3e82b19480
13 changed files with 304 additions and 60 deletions
@@ -1,54 +1,112 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
+import { Link } from "react-router-dom"
 import Logo from "../../assets/pictures/Logo"

-const Footer = () => (
-  <footer className="bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8">
-    <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
-      <div className="flex flex-col items-center">
-        <Logo size={100} />
-        <span className="font-bold text-lg mt-2">SerpentRace</span>
+
+const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
+
+const Footer = () => {
+  const [isVisible, setIsVisible] = useState(false)
+  const footerRef = useRef(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      },
+      { threshold: 0.3 }
+    )
+
+    if (footerRef.current) {
+      observer.observe(footerRef.current)
+    }
+
+    return () => {
+      if (footerRef.current) {
+        observer.unobserve(footerRef.current)
+      }
+    }
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  return (
+    <footer
+      ref={footerRef}
+      className={`relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8 transition-all duration-700 ease-out ${
+        isVisible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-10"
+      }`}
+      style={{ transformOrigin: "bottom center" }}
+    >
+      <style>
+        {`
+          .footer-animate {
+            transition: opacity 0.8s ease, transform 0.8s ease;
+          }
+        `}
+      </style>
+
+      <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 footer-animate">
+          <a
+            href="/"
+            className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
+          >
+            <Logo size={100} />
+          </a>
+          <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
+        </div>
+
+        {/* Oldalak */}
+        <div className="flex flex-col gap-1 footer-animate">
+          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+            Oldalak
+          </span>
+          <a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
+          <a href="/about" className="hover:underline hover:text-green-400 transition">
+            Rólunk
+          </a>
+          <a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
+        </div>
+
+        {/* Közösség */}
+        <div className="flex flex-col gap-1 footer-animate">
+          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+            Közösség
+          </span>
+          <a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
+          <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</a>
+        </div>
+
+        {/* Elérhetőség */}
+        <div className="flex flex-col gap-1 footer-animate">
+          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
+            Elérhetőség
+          </span>
+          <span className="opacity-80">Email: info@serpentrace.hu</span>
+          <span className="opacity-80">Telefon: +36 30 123 4567</span>
+        </div>
      </div>
-      <div className="flex flex-col gap-1">
-        <span className="font-bold mb-2">Oldalak</span>
-        <a href="/" className="hover:underline hover:text-green-400 transition">
-          Főoldal
-        </a>
-        <a href="/about" className="hover:underline hover:text-green-400 transition">
-          Rólunk
-        </a>
-        <a href="/contact" className="hover:underline hover:text-green-400 transition">
-          Kapcsolat
-        </a>
+
+      <div className="text-center mt-8 text-sm opacity-70 footer-animate">
+        © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
      </div>
-      <div className="flex flex-col gap-1">
-        <span className="font-bold mb-2">Közösség</span>
-        <a
-          href="https://discord.gg/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:underline hover:text-green-400 transition"
+
+      {/* Scroll to top */}
+      {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 transition transform hover:scale-110"
+          aria-label="Ugrás az oldal tetejére"
        >
-          Discord
-        </a>
-        <a
-          href="https://github.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:underline hover:text-green-400 transition"
-        >
-          GitHub
-        </a>
-      </div>
-      <div className="flex flex-col gap-1">
-        <span className="font-bold mb-2">Elérhetőség</span>
-        <span className="opacity-80">Email: info@serpentrace.hu</span>
-        <span className="opacity-80">Telefon: +36 30 123 4567</span>
-      </div>
-    </div>
-    <div className="text-center mt-8 text-sm opacity-70">
-      © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
-    </div>
-  </footer>
-)
+          <ArrowUpIcon />
+        </button>
+      )}
+    </footer>
+  )
+}

 export default Footer
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
+import About from "../../pages/About/About"

 const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"

@@ -7,6 +8,7 @@ const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
+  
    <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
@@ -27,7 +29,7 @@ const Navbar = () => {
            <a href="#" className={navLinkClass}>
              Leaderboard
            </a>
-            <a href="#" className={navLinkClass}>
+            <a href="/about" className={navLinkClass}>
              About
            </a>
            <a href="#" className={navLinkClass}>
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;