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

2025-07-07 10:11:41 +02:00
parent 9296782fc1
commit 19c762fe67
19 changed files with 848 additions and 138 deletions
@@ -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
@@ -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