[#37] Login & Register Page UI

https://project.mdnd-it.cc/work_packages/37

SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx

@@ -0,0 +1,43 @@
+import { motion, AnimatePresence } from "framer-motion";
+import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
+import LoginForm from "./LoginForm";
+import RegisterForm from "./RegisterForm";
+import Logo from "../../assets/pictures/Logo";
+
+export default function AuthCard({ isRegistering, setIsRegistering }) {
+  return (
+    <motion.div
+      initial={{ height: "auto" }}
+      animate={{ height: isRegistering ? "600px" : "385px" }}
+      transition={{ duration: 0.5, ease: "easeInOut" }}
+      className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
+    >
+      {/* Bal oldali kép és szöveg */}
+      <div
+        className={`transition-all duration-500 ${isRegistering ? 'w-0 p-0' : 'w-2/5 p-8'} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
+      >
+        <Logo size={100}/>
+        <div className="h-6" />
+        <Animation sizePercentage={30} />
+        <p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
+          Baszódj meg te kurva!
+        </p>
+      </div>
+
+      {/* Jobb oldali űrlap */}
+      <div className="w-full p-10 relative">
+        <AnimatePresence mode="wait">
+          {isRegistering ? <RegisterForm /> : <LoginForm />}
+        </AnimatePresence>
+        <span
+          className="text-secondary cursor-pointer hover:underline mt-4 block text-center"
+          onClick={() => setIsRegistering(!isRegistering)}
+        >
+          {isRegistering
+            ? "Már van fiókod? Jelentkezz be itt!"
+            : "Nincs még fiókod? Regisztrálj itt!"}
+        </span>
+      </div>
+    </motion.div>
+  );
+}

SerpentRace_Frontend/src/pages/Auth/AuthLogin.jsx

@@ -0,0 +1,18 @@
+// pages/Auth.js
+// Login url címre érkezés (registering = false)
+
+import { useState } from "react";
+import Background from "../../assets/backgrounds/Background";
+import AuthCard from "./AuthCard";
+
+export default function AuthLogin() {
+  const [isRegistering, setIsRegistering] = useState(false);
+
+  return (
+    <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
+      <Background />
+
+      <AuthCard isRegistering={isRegistering} setIsRegistering={setIsRegistering} />
+    </div>
+  );
+}

SerpentRace_Frontend/src/pages/Auth/AuthRegister.jsx

@@ -0,0 +1,18 @@
+// pages/Auth.js
+// Register url címre érkezés (registering = true)
+
+import { useState } from "react";
+import Background from "../../assets/backgrounds/Background";
+import AuthCard from "./AuthCard";
+
+export default function AuthRegister() {
+  const [isRegistering, setIsRegistering] = useState(true);
+
+  return (
+    <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
+      <Background />
+
+      <AuthCard isRegistering={isRegistering} setIsRegistering={setIsRegistering} />
+    </div>
+  );
+}

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -0,0 +1,23 @@
+// components/LoginForm.js
+import InputBox from "../../components/Inputs/InputBox";
+import Button from "../../components/Buttons/Button";
+import { motion } from "framer-motion";
+
+export default function LoginForm() {
+  return (
+    <motion.div
+      key="login"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.25 }}
+    >
+      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
+      <form>
+        <InputBox type="email" placeholder="Email cím" />
+        <InputBox type="password" placeholder="Jelszó" />
+        <Button text="Bejelentkezés" type="submit" />
+      </form>
+    </motion.div>
+  );
+}

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -0,0 +1,26 @@
+// components/RegisterForm.js
+import InputBox from "../../components/Inputs/InputBox";
+import Button from "../../components/Buttons/Button";
+import { motion } from "framer-motion";
+
+export default function RegisterForm() {
+  return (
+    <motion.div
+      key="register"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.25 }}
+    >
+      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
+      <form>
+        <InputBox type="text" placeholder="Teljes név" />
+        <InputBox type="text" placeholder="Felhasználónév" />
+        <InputBox type="email" placeholder="Email cím" />
+        <InputBox type="password" placeholder="Jelszó" />
+        <InputBox type="password" placeholder="Jelszó megerősítése" />
+        <Button text="Regisztráció" type="submit" />
+      </form>
+    </motion.div>
+  );
+}

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export default function Test() {
+
+  return (
+    <div className="bg-red-100 text-white p-4">
+      <p className="text-piros">asd</p>
+    </div>
+  );
+}