Merge branch 'main' of https://git.mdnd-it.cc/Donat/SerpentRace into 1024zsola

SerpentRace_Frontend/src/App.jsx

@@ -10,7 +10,7 @@ import Landingpage from "./pages/Landing/Landingpage"
 import Home from "./pages/Landing/Home"
 import DeckManagerPage from "./pages/Decks/DeckManagerPage"
 import DeckCreator from "./pages/DeckCreator/DeckCreator"
-import CompanyHub from "./pages/Companies/Companies"
+import CompanyHub from "./pages/Contacts/Contacts"
 import About from "./pages/About/About"
 import ScrollToTop from "./components/ScrollToTop"
 import GameScreen from "./pages/Game/GameScreen"
@@ -64,7 +64,7 @@ function App() {
           <Route path="/deck-creator" element={<DeckCreator />} />
           <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
           <Route path="/game" element={<GameScreen />} />
-          <Route path="/companies" element={<CompanyHub />} />
+          <Route path="/contacts" element={<CompanyHub />} />
           <Route path="/report" element={<Reports />} />
         </Routes>
       </Router>

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -57,7 +57,7 @@ const Footer = () => {
           <a href="/about" className="hover:underline hover:text-green-500">
             Rólunk
           </a>
-          <a href="/contact" className="hover:underline hover:text-green-500">
+          <a href="/contacts" className="hover:underline hover:text-green-500">
             Kapcsolat
           </a>
         </div>

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, onNavigateToGame }) => {
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame, onNavigateToContacts }) => {
   const auth = isAuthenticated() // <-- check without redirect
   const navigate = useNavigate() // <-- NEW
 
@@ -68,7 +68,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) =
                 <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
               </>
             ) : (
-              <ButtonGreen text="Játék" onClick={() => navigate("/home")} width="w-60" />
+              <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" />
             )}
           </motion.div>
         </div>
@@ -178,7 +178,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) =
 
             <ButtonGreen
               text="Kapcsolatfelvétel"
-              onClick={onNavigateToAuth}
+              onClick={onNavigateToContacts}
               className="px-12 py-4 text-xl font-bold"
             />
           </motion.div>

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -19,9 +19,9 @@ const Navbar = () => {
 
   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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
         <div className="flex justify-between h-16 items-center">
-          {/* Logo */}
+          {/* Logo + Brand */}
           <div className="flex-shrink-0 flex items-center gap-2">
             <Link to="/" className="flex items-center mt-1 h-9">
               <Logo size={36} />
@@ -32,33 +32,47 @@ const Navbar = () => {
           </div>
 
           {/* Desktop Menu */}
-          <div className="hidden md:flex space-x-8 items-center">
-            {isLoggedIn ? (
+          <div className="hidden md:flex items-center space-x-6">
+            {/* Bal oldali linkek */}
+            <Link to="/" className={navLinkClass}>Főoldal</Link>
+            <Link to="/about" className={navLinkClass}>Rólunk</Link>
+            <Link to="/contacts" className={navLinkClass}>Kapcsolat</Link>
+
+            {/* Csak bejelentkezve */}
+            {isLoggedIn && (
               <>
-                <Link to="/home" className={navLinkClass}>Játék</Link>
                 <Link to="/decks" className={navLinkClass}>Paklik</Link>
                 <Link to="/report" className={navLinkClass}>Statisztikák</Link>
               </>
-            ) : (
-              <Link to="/" className={navLinkClass}>Főoldal</Link>
             )}
-            <Link to="/about" className={navLinkClass}>Rólunk</Link>
-            <Link to="/companies" className={navLinkClass}>Kontakt</Link>
-            {!isLoggedIn && (
-              <>
-                <Link to="/home" className={navLinkClassPlay}>Játék</Link>
+
+            {/* Játék gomb */}
+            <Link to="/home" className={navLinkClassPlay}>Játék</Link>
+
+            {/* Jobb oldali akciók */}
+            {!isLoggedIn ? (
+              <div className="flex items-center space-x-4">
                 <Link
                   to="/login"
+                  className="px-4 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
+                >
+                  Bejelentkezés
+                </Link>
+
+                {/* Elválasztó vonal */}
+                <div className="w-px h-10 bg-white/100"></div>
+
+                <Link
+                  to="/register"
                   className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
                 >
-                  Bejelentkezés / Regisztráció
+                  Regisztráció
                 </Link>
-              </>
-            )}
-            {isLoggedIn && (
+              </div>
+            ) : (
               <button
                 onClick={handleLogout}
-                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"
+                className="ml-2 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="Kijelentkezés"
               >
                 <svg
@@ -107,39 +121,45 @@ const Navbar = () => {
       {/* 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}>Home</Link>
-          ) : (
-            <Link to="/" className={navLinkClass}>Főoldal</Link>
-          )}
-          <Link to="/leaderboard" className={navLinkClass}>Leaderboard</Link>
-          <Link to="/about" className={navLinkClass}>Rólunk</Link>
-          <Link to="/companies" className={navLinkClass}>Kontakt</Link>
-          {!isLoggedIn && (
+          <Link to="/" onClick={() => setMenuOpen(false)} className={navLinkClass}>Főoldal</Link>
+          <Link to="/about" onClick={() => setMenuOpen(false)} className={navLinkClass}>Rólunk</Link>
+          <Link to="/contacts" onClick={() => setMenuOpen(false)} className={navLinkClass}>Kapcsolat</Link>
+          {isLoggedIn && (
             <>
-              <div className="px-2">
-                <button
-                  onClick={() => {
-                    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"
-                >
-                  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"
-              >
-                Bejelentkezés / Regisztráció
-              </Link>
+              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
+              <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
             </>
           )}
-          {isLoggedIn && (
+          <Link to="/home" onClick={() => setMenuOpen(false)} className={navLinkClassPlay}>Játék</Link>
+
+          {!isLoggedIn ? (
+            <div className="flex flex-col space-y-2">
+              <Link
+                to="/login"
+                onClick={() => setMenuOpen(false)}
+                className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
+              >
+                Bejelentkezés
+              </Link>
+
+              {/* Elválasztó vonal mobilon */}
+              <div className="w-full h-px bg-white/30"></div>
+
+              <Link
+                to="/register"
+                onClick={() => setMenuOpen(false)}
+                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
+              >
+                Regisztráció
+              </Link>
+            </div>
+          ) : (
             <div className="flex justify-end px-2 pb-2">
               <button
-                onClick={handleLogout}
+                onClick={() => {
+                  handleLogout()
+                  setMenuOpen(false)
+                }}
                 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="Kijelentkezés"
               >

SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx

@@ -1,7 +1,7 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
-import Background from "../../assets/backgrounds/Background"
+import Background from "../../assets/backgrounds/Background.jsx"
 import {
   FaBuilding,
   FaEnvelope,
@@ -56,8 +56,22 @@ const SectionContainer = ({ id, title, children }) => {
 }
 
 const CompanyHub = () => {
+
+  const [visible, setVisible] = useState(false)
+  const sectionRef = useRef(null)
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.3 }
+    )
+    if (sectionRef.current) observer.observe(sectionRef.current)
+    return () => observer.disconnect()
+  }, [])
+
   return (
-    <div className="relative min-h-screen text-white">
+    <div className=" relative min-h-screen text-white">
       {/* Background fixed behind everything */}
       <div className="fixed inset-0 -z-10">
         <Background />
@@ -67,6 +81,12 @@ const CompanyHub = () => {
         <Navbar />
 
         <main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
+          <section
+          ref={sectionRef}
+          className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
+            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+          }`}
+        >
           <div className="flex justify-center gap-6 mt-8 flex-wrap">
             <Card
               icon={<FaBuilding />}
@@ -152,68 +172,69 @@ const CompanyHub = () => {
             </div>
           </SectionContainer>
 
-          {/* Contact + Join Section */}
-          <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
-            {/* Contact */}
-            <div
-              id="contact"
-              className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
-            >
-              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
-                Kapcsolatfelvétel cégeknek
-              </h2>
-              <form className="grid gap-6 md:grid-cols-2">
-                <input
-                  type="text"
-                  placeholder="Cég neve"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
-                />
-                <input
-                  type="email"
-                  placeholder="Email"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
-                />
-                <textarea
-                  placeholder="Üzenet"
-                  rows="6"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
-                />
-                <button
-                  type="submit"
-                  className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
-                >
-                  Küldés
-                </button>
-              </form>
-            </div>
+            {/* Contact + Join Section */}
+            <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
+              {/* Contact */}
+              <div
+                id="contact"
+                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+              >
+                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                  Kapcsolatfelvétel cégeknek
+                </h2>
+                <form className="grid gap-6 md:grid-cols-2">
+                  <input
+                    type="text"
+                    placeholder="Cég neve"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
+                  />
+                  <textarea
+                    placeholder="Üzenet"
+                    rows="6"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                  />
+                  <button
+                    type="submit"
+                    className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
+                  >
+                    Küldés
+                  </button>
+                </form>
+              </div>
 
-            {/* Join */}
-            <div
-              id="join"
-              className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
-            >
-              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
-                Csatlakozz partnerként
-              </h2>
-              <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
-                <li className="flex gap-3 items-center">
-                  <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
-                  Gamification a vállalati kultúrában
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
-                  Teljesítménymérés játékosan
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
-                  Személyre szabott riportok
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
-                  Dedikált ügyfélszolgálat
-                </li>
-              </ul>
-            </div>
+              {/* Join */}
+              <div
+                id="join"
+                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+              >
+                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                  Csatlakozz partnerként
+                </h2>
+                <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
+                  <li className="flex gap-3 items-center">
+                    <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
+                    Gamification a vállalati kultúrában
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
+                    Teljesítménymérés játékosan
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
+                    Személyre szabott riportok
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
+                    Dedikált ügyfélszolgálat
+                  </li>
+                </ul>
+              </div>
+            </section>
           </section>
         </main>
 

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -2,7 +2,7 @@
 // Főoldal - Landing Page
 
 
-import { useNavigate } from "react-router-dom"
+import { data, useNavigate } from "react-router-dom"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -12,15 +12,22 @@ export default function LandingPageMain() {
   const navigate = useNavigate();
 
   const handleNavigateToPlay = () => {
-    navigate("/login"); 
+    navigate("/login", { preventScrollReset: false });
+    window.scrollTo(0, 0);
   };
 
   const handleNavigateToAuth = () => {
-    navigate("/register");
+    navigate("/companies", { preventScrollReset: false });
+    window.scrollTo(0, 0);
   };
 
   const handleNavigateToGame = () => {
-    navigate("/home"); 
+    navigate("/home", { preventScrollReset: false });
+    window.scrollTo(0, 0);
+  };
+
+  const handleNavigateToContacts = () => {
+    navigate("/contacts"); 
   };
 
   return (
@@ -32,7 +39,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} onNavigateToGame={handleNavigateToGame} />
+        <LandingPage onNavigateToContacts={handleNavigateToContacts} onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
       </main>
       <Footer />
     </div>

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -6,7 +6,7 @@ import Logo from "../../assets/pictures/Logo.jsx"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import UserProfile from "../../components/Userdetails/Userdetails.jsx"
-import CompanyHub from "../Companies/Companies.jsx"
+import CompanyHub from "../Contacts/Contacts.jsx"
 
 import RatingSet from "../../components/PopUp/RatingSet" // <- statisztikai komponens