Merge pull request 'Navbar,landing, meg a többi frontend javítás' (#60) from ujbarni into main

Reviewed-on: #60
HIHETETLEEEENÜL SZIPI SZUPER

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -8,7 +8,7 @@ import { motion } from "framer-motion"
 import { isAuthenticated } from "../../hooks/useRequireAuth" // <-- added import
 import { useNavigate } from "react-router-dom" // <-- NEW
 
-const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) => {
   const auth = isAuthenticated() // <-- check without redirect
   const navigate = useNavigate() // <-- NEW
 
@@ -65,6 +65,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
               <>
                 <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
                 <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
+                <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
               </>
             ) : (
               <ButtonGreen text="Játék" onClick={() => navigate("/home")} width="w-60" />

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -9,14 +9,12 @@ const navLinkClassPlay =
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
   const navigate = useNavigate()
-  // Check if authLevel and username exist in localStorage
   const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
 
-  // Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
   const handleLogout = () => {
     localStorage.removeItem("authLevel")
     localStorage.removeItem("username")
-    navigate("/login")
+    navigate("/")
   }
 
   return (
@@ -32,46 +30,40 @@ const Navbar = () => {
               SerpentRace
             </Link>
           </div>
+
           {/* Desktop Menu */}
           <div className="hidden md:flex space-x-8 items-center">
             {isLoggedIn ? (
               <>
-                <Link to="/home" className={navLinkClass}>
+                <Link to="/home" className={navLinkClass}>Játék</Link>
-                  Home
+                <Link to="/decks" className={navLinkClass}>Paklik</Link>
-                </Link>
+                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
-                <Link to="/decks" className={navLinkClass}>
-                  Decks
-                </Link>
-                <Link to="/report" className={navLinkClass}>
-                  Stats
-                </Link>
               </>
             ) : (
-              <Link to="/" className={navLinkClass}>
+              <Link to="/" className={navLinkClass}>Főoldal</Link>
-                Home
-              </Link>
             )}
-            <Link to="/about" className={navLinkClass}>
+            <Link to="/about" className={navLinkClass}>Rólunk</Link>
-              About
+            <Link to="/companies" className={navLinkClass}>Kontakt</Link>
-            </Link>
-            <Link to="/companies" className={navLinkClass}>
-              Contact
-            </Link>
             {!isLoggedIn && (
-              <Link to="/home" className={navLinkClassPlay}>
+              <>
-                Play
+                <Link to="/home" className={navLinkClassPlay}>Játék</Link>
-              </Link>
+                <Link
+                  to="/login"
+                  className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
+                >
+                  Bejelentkezés / Regisztráció
+                </Link>
+              </>
             )}
             {isLoggedIn && (
               <button
                 onClick={handleLogout}
-                className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                className="ml-4 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
-                title="Logout"
+                title="Kijelentkezés"
               >
-                {/* Simple logout icon */}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 text-white"
+                  className="h-6 w-6"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -80,12 +72,13 @@ const Navbar = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
-                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
                   />
                 </svg>
               </button>
             )}
           </div>
+
           {/* Mobile Hamburger */}
           <div className="md:hidden flex items-center">
             <button
@@ -101,12 +94,7 @@ const Navbar = () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 {menuOpen ? (
-                  <path
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
                 ) : (
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
                 )}
@@ -115,50 +103,49 @@ const Navbar = () => {
           </div>
         </div>
       </div>
+
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
           {isLoggedIn ? (
-            <Link to="/home" className={navLinkClass}>
+            <Link to="/home" className={navLinkClass}>Home</Link>
-              Home
-            </Link>
           ) : (
-            <Link to="/" className={navLinkClass}>
+            <Link to="/" className={navLinkClass}>Főoldal</Link>
-              Home
-            </Link>
           )}
-          <Link to="/leaderboard" className={navLinkClass}>
+          <Link to="/leaderboard" className={navLinkClass}>Leaderboard</Link>
-            Leaderboard
+          <Link to="/about" className={navLinkClass}>Rólunk</Link>
-          </Link>
+          <Link to="/companies" className={navLinkClass}>Kontakt</Link>
-          <Link to="/about" className={navLinkClass}>
-            About
-          </Link>
-          <Link to="/companies" className={navLinkClass}>
-            Contact
-          </Link>
           {!isLoggedIn && (
-            <div className="px-2">
+            <>
-              <button
+              <div className="px-2">
-                onClick={() => {
+                <button
-                  setMenuOpen(false)
+                  onClick={() => {
-                  navigate("/home")
+                    setMenuOpen(false)
-                }}
+                    navigate("/")
-                className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
+                  }}
+                  className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
+                >
+                  Játék
+                </button>
+              </div>
+              <Link
+                to="/login"
+                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
               >
-                Játék
+                Bejelentkezés / Regisztráció
-              </button>
+              </Link>
-            </div>
+            </>
           )}
           {isLoggedIn && (
             <div className="flex justify-end px-2 pb-2">
               <button
                 onClick={handleLogout}
-                className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
-                title="Logout"
+                title="Kijelentkezés"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 text-white"
+                  className="h-6 w-6"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -167,7 +154,7 @@ const Navbar = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
-                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
                   />
                 </svg>
               </button>

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -19,6 +19,10 @@ export default function LandingPageMain() {
     navigate("/register");
   };
 
+  const handleNavigateToGame = () => {
+    navigate("/home"); 
+  };
+
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
       <div className="fixed inset-0 -z-10 pointer-events-none">
@@ -28,7 +32,7 @@ export default function LandingPageMain() {
         <Navbar />
       </div>
       <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <LandingPage onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} />
+        <LandingPage onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
       </main>
       <Footer />
     </div>