117 lines
3.5 KiB
React
117 lines
3.5 KiB
React
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 = () => {
|
|
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"
|
|
style={{ transformOrigin: "bottom center" }}
|
|
>
|
|
<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-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">
|
|
<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">
|
|
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">
|
|
Kapcsolat
|
|
</a>
|
|
</div>
|
|
|
|
{/* Közösség */}
|
|
<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"
|
|
>
|
|
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">
|
|
<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="text-center mt-8 text-sm opacity-70">
|
|
© {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
|
|
</div>
|
|
|
|
{/* 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 hover:scale-110"
|
|
aria-label="Ugrás az oldal tetejére"
|
|
>
|
|
<ArrowUpIcon />
|
|
</button>
|
|
)}
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export default Footer
|