[#56] Landing Pagehttps://project.mdnd-it.cc/work_packages/56

SerpentRace_Frontend/src/App.jsx

@@ -1,26 +1,27 @@
-import { useState, useEffect } from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import AuthRegister from "./pages/Auth/AuthRegister";
-import AuthLogin from "./pages/Auth/AuthLogin";
-import EmailVerification from "./pages/Auth/EmailVerification";
-import Test from "./pages/Testing/Test";
-import ForgotPassword from "./pages/Auth/ForgotPassword";
-import ResetPassword from "./pages/Auth/ResetPassword";
-
+import { useState, useEffect } from "react"
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
+import AuthRegister from "./pages/Auth/AuthRegister"
+import AuthLogin from "./pages/Auth/AuthLogin"
+import EmailVerification from "./pages/Auth/EmailVerification"
+import Test from "./pages/Testing/Test"
+import ForgotPassword from "./pages/Auth/ForgotPassword"
+import ResetPassword from "./pages/Auth/ResetPassword"
+import Landingpage from "./pages/Landing/Landingpage"
+import Home from "./pages/Landing/Home"
 
 function App() {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(false)
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth <= 1280);
-    };
+      setIsMobile(window.innerWidth <= 1280)
+    }
 
-    handleResize();
-    window.addEventListener("resize", handleResize);
+    handleResize()
+    window.addEventListener("resize", handleResize)
 
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
 
   // if (isMobile) {
   //   return (
@@ -43,10 +44,12 @@ function App() {
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="/test" element={<Test />} />
-
+        <Route path="/" element={<Landingpage />} />
+        <Route path="/home" element={<Home />} />
+        {/* Add more routes as needed */}
       </Routes>
     </Router>
-  );
+  )
 }
 
-export default App;
+export default App

SerpentRace_Frontend/src/assets/backgrounds/Background.jsx

@@ -1,65 +1,68 @@
 // src/assets/backgrounds/Background.jsx
 // Kockás háttér, ami a mousemovera reagál
 
-import React, { useEffect, useState } from "react";
-import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react"
+import { motion } from "framer-motion"
 
 const Background = () => {
-  const [gridSize, setGridSize] = useState({ cols: 12, rows: 6 });
-  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
-  const [path, setPath] = useState([]);
+  const [gridSize, setGridSize] = useState({ cols: 12, rows: 6 })
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
+  const [path, setPath] = useState([])
 
   useEffect(() => {
     const updateGrid = () => {
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      const cols = Math.max(8, Math.floor(width / 100)); // 100px-es cellák
-      const rows = Math.max(5, Math.floor(height / 100)); // 100px-es cellák
-      setGridSize({ cols, rows });
-    };
+      const width = window.innerWidth
+      const height = window.innerHeight
+      const cols = Math.max(8, Math.floor(width / 100)) // 100px-es cellák
+      const rows = Math.max(5, Math.floor(height / 100)) // 100px-es cellák
+      setGridSize({ cols, rows })
+    }
 
     const handleMouseMove = (e) => {
-      setMousePos({ x: e.clientX, y: e.clientY });
-    };
+      setMousePos({ x: e.clientX, y: e.clientY })
+    }
 
-    updateGrid();
-    window.addEventListener("resize", updateGrid);
-    window.addEventListener("mousemove", handleMouseMove);
+    updateGrid()
+    window.addEventListener("resize", updateGrid)
+    window.addEventListener("mousemove", handleMouseMove)
 
     return () => {
-      window.removeEventListener("resize", updateGrid);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener("resize", updateGrid)
+      window.removeEventListener("mousemove", handleMouseMove)
+    }
+  }, [])
 
   useEffect(() => {
     const interval = setInterval(() => {
-      const newCol = Math.floor(Math.random() * gridSize.cols);
-      const newRow = Math.floor(Math.random() * gridSize.rows);
+      const newCol = Math.floor(Math.random() * gridSize.cols)
+      const newRow = Math.floor(Math.random() * gridSize.rows)
       setPath((prevPath) => {
-        const newPath = [...prevPath, { col: newCol, row: newRow, opacity: 1 }]; // Új pont hozzáadása
+        const newPath = [...prevPath, { col: newCol, row: newRow, opacity: 1 }] // Új pont hozzáadása
         if (newPath.length > 10) {
-          newPath.shift(); // Max 10 pont az útvonalon
+          newPath.shift() // Max 10 pont az útvonalon
         }
-        return newPath;
-      });
-    }, 500); // Új pont hozzáadása minden 500ms-ben
+        return newPath
+      })
+    }, 500) // Új pont hozzáadása minden 500ms-ben
 
     // Az útvonal pontjainak fokozatos eltűnése
     const fadeInterval = setInterval(() => {
-      setPath((prevPath) =>
-        prevPath.map((point) => ({
-          ...point,
-          opacity: Math.max(0, point.opacity - 0.05), // Fokozatosan csökkentjük az opacity-t
-        })).filter((point) => point.opacity > 0) // Eltávolítjuk a teljesen eltűnt pontokat
-      );
-    }, 100); // Opacity frissítése minden 100ms-ben
+      setPath(
+        (prevPath) =>
+          prevPath
+            .map((point) => ({
+              ...point,
+              opacity: Math.max(0, point.opacity - 0.05), // Fokozatosan csökkentjük az opacity-t
+            }))
+            .filter((point) => point.opacity > 0) // Eltávolítjuk a teljesen eltűnt pontokat
+      )
+    }, 100) // Opacity frissítése minden 100ms-ben
 
     return () => {
-      clearInterval(interval);
-      clearInterval(fadeInterval);
-    };
-  }, [gridSize]);
+      clearInterval(interval)
+      clearInterval(fadeInterval)
+    }
+  }, [gridSize])
 
   return (
     <div className="relative w-full h-screen bg-background flex items-center justify-center overflow-hidden">
@@ -71,19 +74,19 @@ const Background = () => {
         }}
       >
         {[...Array(gridSize.cols * gridSize.rows)].map((_, i) => {
-          const col = i % gridSize.cols;
-          const row = Math.floor(i / gridSize.cols);
-          const cellX = (col + 0.5) * (window.innerWidth / gridSize.cols);
-          const cellY = (row + 0.5) * (window.innerHeight / gridSize.rows);
+          const col = i % gridSize.cols
+          const row = Math.floor(i / gridSize.cols)
+          const cellX = (col + 0.5) * (window.innerWidth / gridSize.cols)
+          const cellY = (row + 0.5) * (window.innerHeight / gridSize.rows)
 
-          const dx = cellX - mousePos.x;
-          const dy = cellY - mousePos.y;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          const distanceFactor = Math.max(0, 1 - distance / 300); // Egér hatótávolsága
+          const dx = cellX - mousePos.x
+          const dy = cellY - mousePos.y
+          const distance = Math.sqrt(dx * dx + dy * dy)
+          const distanceFactor = Math.max(0, 1 - distance / 300) // Egér hatótávolsága
 
           // Az útvonalban lévő pontok opacitása
-          const pathPoint = path.find((p) => p.col === col && p.row === row);
-          const pathOpacity = pathPoint ? pathPoint.opacity : 0;
+          const pathPoint = path.find((p) => p.col === col && p.row === row)
+          const pathOpacity = pathPoint ? pathPoint.opacity : 0
 
           return (
             <motion.div
@@ -95,11 +98,11 @@ const Background = () => {
               }}
               transition={{ duration: 0.5, ease: "easeOut" }} // Lassú és sima átmenet
             />
-          );
+          )
         })}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Background;
+export default Background

SerpentRace_Frontend/src/assets/pictures/LogoCard.jsx

@@ -0,0 +1,134 @@
+import { useRef, useState } from "react"
+import { motion, useMotionValue, useSpring } from "framer-motion"
+
+const springValues = {
+  damping: 30,
+  stiffness: 100,
+  mass: 2,
+}
+
+export default function LogoCard({
+  imageSrc,
+  altText = "Tilted card image",
+  captionText = "",
+  containerHeight = "300px",
+  containerWidth = "100%",
+  imageHeight = "300px",
+  imageWidth = "300px",
+  scaleOnHover = 1.1,
+  rotateAmplitude = 14,
+  showMobileWarning = true,
+  showTooltip = true,
+  overlayContent = null,
+  displayOverlayContent = false,
+}) {
+  const ref = useRef(null)
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const rotateX = useSpring(useMotionValue(0), springValues)
+  const rotateY = useSpring(useMotionValue(0), springValues)
+  const scale = useSpring(1, springValues)
+  const opacity = useSpring(0)
+  const rotateFigcaption = useSpring(0, {
+    stiffness: 350,
+    damping: 30,
+    mass: 1,
+  })
+
+  const [lastY, setLastY] = useState(0)
+
+  function handleMouse(e) {
+    if (!ref.current) return
+
+    const rect = ref.current.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left - rect.width / 2
+    const offsetY = e.clientY - rect.top - rect.height / 2
+
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude
+
+    rotateX.set(rotationX)
+    rotateY.set(rotationY)
+
+    x.set(e.clientX - rect.left)
+    y.set(e.clientY - rect.top)
+
+    const velocityY = offsetY - lastY
+    rotateFigcaption.set(-velocityY * 0.6)
+    setLastY(offsetY)
+  }
+
+  function handleMouseEnter() {
+    scale.set(scaleOnHover)
+    opacity.set(1)
+  }
+
+  function handleMouseLeave() {
+    opacity.set(0)
+    scale.set(1)
+    rotateX.set(0)
+    rotateY.set(0)
+    rotateFigcaption.set(0)
+  }
+
+  return (
+    <figure
+      ref={ref}
+      className="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+      }}
+      onMouseMove={handleMouse}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {showMobileWarning && (
+        <div className="absolute top-4 text-center text-sm block sm:hidden">
+          This effect is not optimized for mobile. Check on desktop.
+        </div>
+      )}
+
+      <motion.div
+        className="relative [transform-style:preserve-3d]"
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          rotateX,
+          rotateY,
+          scale,
+        }}
+      >
+        <motion.img
+          src={imageSrc}
+          alt={altText}
+          className="absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]"
+          style={{
+            width: imageWidth,
+            height: imageHeight,
+          }}
+        />
+
+        {displayOverlayContent && overlayContent && (
+          <motion.div className="absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]">
+            {overlayContent}
+          </motion.div>
+        )}
+      </motion.div>
+
+      {showTooltip && (
+        <motion.figcaption
+          className="pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block"
+          style={{
+            x,
+            y,
+            opacity,
+            rotate: rotateFigcaption,
+          }}
+        >
+          {captionText}
+        </motion.figcaption>
+      )}
+    </figure>
+  )
+}

SerpentRace_Frontend/src/components/Buttons/Button.jsx

@@ -1,10 +1,10 @@
 // src/components/Inputs/InputBox.jsx
 // Gomb komponens
 
-import { motion } from "framer-motion";
+import { motion } from "framer-motion"
 
-export default function Button({ text, type, onClick, width }) {
-  const widthClass = width ? width : "w-full";
+export default function Button({ text, type, onClick, width, className }) {
+  const widthClass = width ? width : "w-full"
 
   return (
     <motion.button
@@ -12,9 +12,11 @@ export default function Button({ text, type, onClick, width }) {
       whileTap={{ scale: 0.95 }}
       type={type}
       onClick={onClick}
-      className={`${widthClass} bg-button-primary text-white py-3 rounded-lg hover:bg-button-hover transition shadow-md font-semibold text-lg`}
+      className={`${widthClass} bg-button-primary text-white py-3 rounded-lg hover:bg-button-primary-hover transition shadow-md font-semibold text-lg ${
+        className ? className : ""
+      }`}
     >
       {text}
     </motion.button>
-  );
+  )
 }

SerpentRace_Frontend/src/components/Buttons/ButtonDark.jsx

@@ -0,0 +1,20 @@
+// src/components/Inputs/InputBox.jsx
+// Gomb komponens
+
+import { motion } from "framer-motion"
+
+export default function Button({ text, type, onClick, width }) {
+  const widthClass = width ? width : "w-full"
+
+  return (
+    <motion.button
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      type={type}
+      onClick={onClick}
+      className={`${widthClass} bg-button-secondary text-white py-3 rounded-lg hover:bg-button-secondary-hover transition shadow-md font-semibold text-lg`}
+    >
+      {text}
+    </motion.button>
+  )
+}

SerpentRace_Frontend/src/components/Buttons/ButtonGreen.jsx

@@ -0,0 +1,20 @@
+// src/components/Buttons/ButtonGreen.jsx
+// Zöld gomb komponens (ButtonGreen)
+
+import { motion } from "framer-motion"
+
+export default function ButtonGreen({ text, type, onClick, width }) {
+  const widthClass = width ? width : "w-full"
+
+  return (
+    <motion.button
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      type={type}
+      onClick={onClick}
+      className={`${widthClass} bg-button-green text-white py-3 rounded-lg hover:bg-button-green-hover transition shadow-md font-semibold text-lg`}
+    >
+      {text}
+    </motion.button>
+  )
+}

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import Logo from "../../assets/pictures/Logo"
+
+const Footer = () => (
+  <footer className="bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8">
+    <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
+      <div className="flex flex-col items-center">
+        <Logo size={100} />
+        <span className="font-bold text-lg mt-2">SerpentRace</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="font-bold mb-2">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">
+          Rólunk
+        </a>
+        <a href="/contact" className="hover:underline hover:text-green-400 transition">
+          Kapcsolat
+        </a>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="font-bold mb-2">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>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="font-bold mb-2">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>
+  </footer>
+)
+
+export default Footer

SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx

@@ -0,0 +1,16 @@
+// src/components/Inputs/InputBox.jsx
+// InputBox komponens
+
+export default function InputBox({ type, placeholder, value, onChange, width }) {
+  const widthClass = width ? width : "w-full"
+
+  return (
+    <input
+      type={type}
+      className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  )
+}

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -0,0 +1,178 @@
+import React from "react"
+import SerpentRaceAnimation from "../../assets/SerpentRace_Animation/SerpentRace_Animation.jsx"
+import LogoCard from "../../assets/pictures/LogoCard.jsx"
+import logoImg from "../../assets/pictures/Logo.png"
+import ButtonGreen from "../Buttons/ButtonGreen.jsx"
+import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
+import { motion } from "framer-motion"
+
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
+  return (
+    <div className="w-full">
+      {/* Hero Section */}
+      <motion.section
+        className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 py-20"
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="max-w-4xl mx-auto">
+          {/* Animált logo és cím */}
+          <div className="mb-8">
+            <SerpentRaceAnimation sizePercentage={70} />
+          </div>
+
+          <motion.h1
+            className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.4 }}
+          >
+            A társasjáték, ami <span className="text-emerald-400">összeköt</span>
+          </motion.h1>
+
+          <motion.p
+            className="text-xl md:text-2xl text-gray-300 mb-6 max-w-3xl mx-auto leading-relaxed"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.6 }}
+          >
+            A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
+            mindezt szórakozva!
+          </motion.p>
+          <motion.div
+            className="text-2xl md:text-3xl font-bold text-emerald-400 mb-12"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.8 }}
+          >
+            WE ARE READY, ARE YOU?
+          </motion.div>
+
+          <motion.div
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 1 }}
+          >
+            <ButtonGreen text="Játék" onClick={onNavigateToPlay} />
+            <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} />
+          </motion.div>
+        </div>
+      </motion.section>
+
+      {/* Features Section */}
+      <motion.section
+        className="py-20 px-4"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+      >
+        <div className="max-w-6xl mx-auto">
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold text-white text-center mb-16"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7, delay: 0.2 }}
+          >
+            Miért a SerpentRace a legjobb választás?
+          </motion.h2>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* Feature 1 */}
+            <motion.div
+              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.3 }}
+            >
+              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
+                <FaUsers className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-4">Közösségi élmény</h3>
+              <p className="text-gray-300">
+                Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti
+                összejövetelről vagy csapatépítésről.
+              </p>
+            </motion.div>
+
+            {/* Feature 2 */}
+            <motion.div
+              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.5 }}
+            >
+              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
+                <FaPaintBrush className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-4">Személyre szabható</h3>
+              <p className="text-gray-300">
+                Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel
+                is!
+              </p>
+            </motion.div>
+
+            {/* Feature 3 */}
+            <motion.div
+              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.7 }}
+            >
+              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
+                <FaHeadset className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-4">Folyamatos támogatás</h3>
+              <p className="text-gray-300">
+                Gyors, segítőkész ügyfélszolgálat – ha bármilyen kérdésed vagy problémád van, mindig
+                számíthatsz ránk!
+              </p>
+            </motion.div>
+          </div>
+        </div>
+      </motion.section>
+
+      {/* Call to Action Section */}
+      <motion.section
+        className="py-20 px-4"
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <motion.div
+            className="bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-lg rounded-3xl p-12"
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7, delay: 0.3 }}
+          >
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+              Próbáld ki te is a SerpentRace-t!
+            </h2>
+
+            <p className="text-xl text-gray-300 mb-8">
+              Legyél részese egy új közösségi élménynek, vagy rendeld meg saját, személyre szabott
+              társasjátékodat – mi mindenben segítünk!
+            </p>
+
+            <ButtonGreen
+              text="Kapcsolatfelvétel"
+              onClick={onNavigateToAuth}
+              className="px-12 py-4 text-xl font-bold"
+            />
+          </motion.div>
+        </div>
+      </motion.section>
+    </div>
+  )
+}
+
+export default LandingPage

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react"
+import LogoCard from "../../assets/pictures/LogoCard.jsx"
+import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
+import ButtonDark from "../Buttons/ButtonDark.jsx"
+import InputBoxDark from "../Inputs/InputBoxDark.jsx"
+
+const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
+  const [joinCode, setJoinCode] = useState("")
+  const [error, setError] = useState("")
+
+  const handleJoin = () => {
+    if (!joinCode.trim()) {
+      setError("Add meg a játék kódját!")
+      return
+    }
+    setError("")
+    onJoinGame(joinCode)
+  }
+
+  const handleCreate = () => {
+    onCreateGame()
+  }
+
+  return (
+    <section
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
+      style={{
+        background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
+      }}
+    >
+      {/* Bal oldali animáció/kép */}
+      <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
+        <LogoCard
+          imageSrc={logoImg}
+          containerHeight="450px"
+          containerWidth="450px"
+          imageHeight="450px"
+          imageWidth="450px"
+          rotateAmplitude={7}
+          scaleOnHover={1.03}
+          showMobileWarning={false}
+          showTooltip={false}
+          displayOverlayContent={false}
+        />
+      </div>
+      {/* Jobb oldali panel */}
+      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
+        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
+          <div>
+            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
+            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+              <InputBoxDark
+                type="text"
+                placeholder="Játék kódja"
+                value={joinCode}
+                onChange={(e) => setJoinCode(e.target.value)}
+                width="w-full"
+              />
+            </div>
+            {error && <div className="text-xs mt-1 text-error">{error}</div>}
+            <div className="mt-4">
+              <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
+            </div>
+          </div>
+          {user && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
+              <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default PlayMenu

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react"
+import Logo from "../../assets/pictures/Logo"
+
+const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
+
+const Navbar = () => {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  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="flex justify-between h-16 items-center">
+          {/* Logo */}
+          <div className="flex-shrink-0 flex items-center gap-2">
+            <div className="flex items-center mt-1 h-9">
+              <Logo size={36} />
+            </div>
+            <span className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+              SerpentRace
+            </span>
+          </div>
+          {/* Desktop Menu */}
+          <div className="hidden md:flex space-x-8">
+            <a href="#" className={navLinkClass}>
+              Home
+            </a>
+            <a href="#" className={navLinkClass}>
+              Leaderboard
+            </a>
+            <a href="#" className={navLinkClass}>
+              About
+            </a>
+            <a href="#" className={navLinkClass}>
+              Contact
+            </a>
+          </div>
+          {/* Mobile Hamburger */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="text-white focus:outline-none"
+              aria-label="Toggle menu"
+            >
+              <svg
+                className="h-7 w-7"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                {menuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
+          <a href="#" className={navLinkClass}>
+            Home
+          </a>
+          <a href="#" className={navLinkClass}>
+            Leaderboard
+          </a>
+          <a href="#" className={navLinkClass}>
+            About
+          </a>
+          <a href="#" className={navLinkClass}>
+            Contact
+          </a>
+        </div>
+      )}
+    </nav>
+  )
+}
+
+export default Navbar

SerpentRace_Frontend/src/index.css

@@ -13,13 +13,17 @@
 
   /* Gombok */
   --color-button-primary: #5fa985;
-  --color-button-hover: #4b7e65;
+  --color-button-primary-hover: #529174;
+  --color-button-secondary: #181d23;
+  --color-button-secondary-hover: #0d0d0f;
+  --color-button-green: #178a5b;
+  --color-button-green-hover: #14784d;
 
   /* Funkcionális színek */
   --color-primary: #5fa985;
   --color-secondary: #8d8e83;
   --color-accent: #0d0d0f;
-  
+
   /* Háttérszínek */
   --color-background: #181d23;
   --color-surface: #222d2f;

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -0,0 +1,35 @@
+// src/pages/Home/Home.jsx
+// Régi PlayMenu-s oldal, "Home" néven
+
+import { useState } from "react"
+import Navbar from "../../components/Navbar/Navbar"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
+
+export default function Home() {
+  // Dummy callbackok és user példa
+  const handleJoinGame = (code) => {
+    alert(`Csatlakozás játékhoz: ${code}`)
+  }
+  const handleCreateGame = () => {
+    alert("Új játék létrehozása")
+  }
+  const user = { name: "Teszt Elek" }
+
+  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">
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
+      </main>
+      <Footer />
+    </div>
+  )
+}

SerpentRace_Frontend/src/pages/Landing/Home.jsx

@@ -0,0 +1,35 @@
+// src/pages/Home/Home.jsx
+// Régi PlayMenu-s oldal, "Home" néven
+
+import { useState } from "react"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
+
+export default function Home() {
+  // Dummy callbackok és user példa
+  const handleJoinGame = (code) => {
+    alert(`Csatlakozás játékhoz: ${code}`)
+  }
+  const handleCreateGame = () => {
+    alert("Új játék létrehozása")
+  }
+  const user = { name: "Teszt Elek" }
+
+  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">
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
+      </main>
+      <Footer />
+    </div>
+  )
+}

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -0,0 +1,36 @@
+// src/pages/Landing/Landingpage.jsx
+// Főoldal - Landing Page
+
+import { useState } from "react"
+import Navbar from "../../components/Navbar/Navbar"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+import LandingPage from "../../components/Landingpage/LandingPage.jsx"
+
+export default function LandingPageMain() {
+  // Navigációs callbackok
+  const handleNavigateToPlay = () => {
+    // Itt lehet navigálni a játék oldalra
+    alert("Navigáció a játék oldalra")
+  }
+
+  const handleNavigateToAuth = () => {
+    // Itt lehet navigálni a bejelentkezés oldalra
+    alert("Navigáció a bejelentkezés oldalra")
+  }
+
+  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">
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <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} />
+      </main>
+      <Footer />
+    </div>
+  )
+}

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -1,55 +1,50 @@
 // src/pages/Testing/Test.jsx
 // itt tesztelhetjük a komponenseket illetve bármit
 
-import { useState } from "react";
-import Button from "../../components/Buttons/Button";
-import InputBox from "../../components/Inputs/InputBox";
-import PopUp from "../../components/PopUp/PopUp";
-import Logo from "../../assets/pictures/Logo.jsx";
+import { useState } from "react"
+import Button from "../../components/Buttons/Button"
+import InputBox from "../../components/Inputs/InputBox"
+import PopUp from "../../components/PopUp/PopUp"
+import Logo from "../../assets/pictures/Logo.jsx"
+import Navbar from "../../components/Navbar/Navbar"
+import Footer from "../../components/Footer/Footer.jsx"
 
 export default function Test() {
-  const [showPopup, setShowPopup] = useState(false);
-  const [inputValue, setInputValue] = useState(""); // input értékének tárolása
+  const [showPopup, setShowPopup] = useState(false)
+  const [inputValue, setInputValue] = useState("") // input értékének tárolása
 
   return (
-    <div className="w-full h-screen flex flex-col items-center justify-center space-y-6">
-      <InputBox
-        placeholder="E-mail cím"
-        type="text"
-        width="w-1/2"
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-      />
-      <Button
-        text="Regisztráció"
-        type="button"
-        width="w-1/2"
-        onClick={() => setShowPopup(true)}
-      />
-      {showPopup && (
-        <PopUp onClose={() => setShowPopup(false)}>
-          <div className="flex flex-col items-center space-y-4">
-            {/* <Logo size={120} /> */}
-            <h1 className="text-2xl font-bold text-center">
-              Sikeres regisztráció!
-            </h1>
-            <p className="text-center text-gray-600">
-              Kérjük, erősítsd meg az e-mail címedet!<br />
-              Egy megerősítő linket küldtünk az általad megadott e-mail címre
-              <span className="font-semibold text-black"> {inputValue}</span>.
-            </p>
-            <p className="text-center text-sm text-gray-500">
-              Ha nem kaptad meg a levelet, ellenőrizd a spam mappádat is!
-            </p>
-            <Button
-              text="Bezár"
-              type="button"
-              width="w-24"
-              onClick={() => setShowPopup(false)}
-            />
-          </div>
-        </PopUp>
-      )}
+    <div className="w-full h-screen flex flex-col">
+      <Navbar />
+      <div className="flex-1 flex flex-col items-center justify-center space-y-6">
+        <InputBox
+          placeholder="E-mail cím"
+          type="text"
+          width="w-1/2"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+        />
+        <Button text="Regisztráció" type="button" width="w-1/2" onClick={() => setShowPopup(true)} />
+        {showPopup && (
+          <PopUp onClose={() => setShowPopup(false)}>
+            <div className="flex flex-col items-center space-y-4">
+              {/* <Logo size={120} /> */}
+              <h1 className="text-2xl font-bold text-center">Sikeres regisztráció!</h1>
+              <p className="text-center text-gray-600">
+                Kérjük, erősítsd meg az e-mail címedet!
+                <br />
+                Egy megerősítő linket küldtünk az általad megadott e-mail címre
+                <span className="font-semibold text-black"> {inputValue}</span>.
+              </p>
+              <p className="text-center text-sm text-gray-500">
+                Ha nem kaptad meg a levelet, ellenőrizd a spam mappádat is!
+              </p>
+              <Button text="Bezár" type="button" width="w-24" onClick={() => setShowPopup(false)} />
+            </div>
+          </PopUp>
+        )}
+      </div>
+      <Footer />
     </div>
-  );
+  )
 }