Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FooterFix

Browse Source
This commit is contained in:
WalkeU
2025-10-15 15:40:25 +02:00
parent a5dd9003c1
commit 1e10a93e32
1 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Footer/Footer.jsx
+31 -27
View File
@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from "react"
import { Link } from "react-router-dom"
import Logo from "../../assets/pictures/Logo"
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
const Footer = () => {
@@ -35,54 +34,59 @@ const Footer = () => {
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"
}`}
className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
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"
>
<div className="flex flex-col items-center">
<a href="/" className="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">
<div className="flex flex-col gap-1">
<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">
<a href="/" className="hover:underline hover:text-green-400">
Főoldal
</a>
<a href="/about" className="hover:underline hover:text-green-400">
Rólunk
</a>
<a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
<a href="/contact" className="hover:underline hover:text-green-400">
Kapcsolat
</a>
</div>
{/* Közösség */}
<div className="flex flex-col gap-1 footer-animate">
<div className="flex flex-col gap-1">
<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>
<a
href="https://discord.gg/"
target="_blank"
rel="noopener noreferrer"
className="hover:underline hover:text-green-400"
>
Discord
</a>
<a
href="https://github.com/"
target="_blank"
rel="noopener noreferrer"
className="hover:underline hover:text-green-400"
>
GitHub
</a>
</div>
{/* Elérhetőség */}
<div className="flex flex-col gap-1 footer-animate">
<div className="flex flex-col gap-1">
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
Elérhetőség
</span>
@@ -91,7 +95,7 @@ const Footer = () => {
</div>
</div>
<div className="text-center mt-8 text-sm opacity-70 footer-animate">
<div className="text-center mt-8 text-sm opacity-70">
© {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
</div>
@@ -99,7 +103,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 transition transform 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"
aria-label="Ugrás az oldal tetejére"
>
<ArrowUpIcon />