footer fix meg landingon
This commit is contained in:
@@ -1,43 +1,17 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react"
|
import React from "react"
|
||||||
import { Link } from "react-router-dom"
|
import { Link } from "react-router-dom"
|
||||||
import Logo from "../../assets/pictures/Logo"
|
import Logo from "../../assets/pictures/Logo"
|
||||||
|
|
||||||
|
|
||||||
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
|
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
|
||||||
|
|
||||||
const Footer = () => {
|
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 = () => {
|
const scrollToTop = () => {
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer
|
<footer
|
||||||
ref={footerRef}
|
className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
|
||||||
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={{ transformOrigin: "bottom center" }}
|
||||||
>
|
>
|
||||||
<style>
|
<style>
|
||||||
@@ -51,10 +25,7 @@ const Footer = () => {
|
|||||||
<div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
|
<div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
|
||||||
{/* Logó */}
|
{/* Logó */}
|
||||||
<div className="flex flex-col items-center footer-animate">
|
<div className="flex flex-col items-center footer-animate">
|
||||||
<a
|
<a href="/" className="transition-transform duration-500 hover:scale-105 hover:brightness-125">
|
||||||
href="/"
|
|
||||||
className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
|
|
||||||
>
|
|
||||||
<Logo size={100} />
|
<Logo size={100} />
|
||||||
</a>
|
</a>
|
||||||
<span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
|
<span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
|
||||||
@@ -65,11 +36,15 @@ const Footer = () => {
|
|||||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||||
Oldalak
|
Oldalak
|
||||||
</span>
|
</span>
|
||||||
<a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
|
<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="/about" className="hover:underline hover:text-green-400 transition">
|
||||||
Rólunk
|
Rólunk
|
||||||
</a>
|
</a>
|
||||||
<a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
|
<a href="/contact" className="hover:underline hover:text-green-400 transition">
|
||||||
|
Kapcsolat
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Közösség */}
|
{/* Közösség */}
|
||||||
@@ -77,8 +52,22 @@ const Footer = () => {
|
|||||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||||
Közösség
|
Közösség
|
||||||
</span>
|
</span>
|
||||||
<a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
|
<a
|
||||||
<a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</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>
|
</div>
|
||||||
|
|
||||||
{/* Elérhetőség */}
|
{/* Elérhetőség */}
|
||||||
@@ -96,15 +85,13 @@ const Footer = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scroll to top */}
|
{/* Scroll to top */}
|
||||||
{isVisible && (
|
<button
|
||||||
<button
|
onClick={scrollToTop}
|
||||||
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 transition transform hover:scale-110"
|
aria-label="Ugrás az oldal tetejére"
|
||||||
aria-label="Ugrás az oldal tetejére"
|
>
|
||||||
>
|
<ArrowUpIcon />
|
||||||
<ArrowUpIcon />
|
</button>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,13 @@ import ButtonGreen from "../Buttons/ButtonGreen.jsx"
|
|||||||
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
|
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
|
||||||
import { motion } from "framer-motion"
|
import { motion } from "framer-motion"
|
||||||
|
|
||||||
const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
import { useNavigate } from "react-router-dom"
|
||||||
|
|
||||||
|
const LandingPage = ({ onNavigateToPlay }) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const handleNavigateToAuth = () => {
|
||||||
|
navigate("/register")
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
@@ -56,7 +62,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
|||||||
transition={{ duration: 0.7, delay: 1 }}
|
transition={{ duration: 0.7, delay: 1 }}
|
||||||
>
|
>
|
||||||
<ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
|
<ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
|
||||||
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
|
<ButtonGreen text="Regisztráció" onClick={handleNavigateToAuth} width="w-60" />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
@@ -165,7 +171,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
|||||||
|
|
||||||
<ButtonGreen
|
<ButtonGreen
|
||||||
text="Kapcsolatfelvétel"
|
text="Kapcsolatfelvétel"
|
||||||
onClick={onNavigateToAuth}
|
onClick={handleNavigateToAuth}
|
||||||
className="px-12 py-4 text-xl font-bold"
|
className="px-12 py-4 text-xl font-bold"
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export default function Home() {
|
|||||||
<div className="fixed top-0 left-0 right-0 z-30">
|
<div className="fixed top-0 left-0 right-0 z-30">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
</div>
|
</div>
|
||||||
<main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
|
<main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[640px]">
|
||||||
<PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
|
<PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
|
||||||
{/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
|
{/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user