[#37] Login & Register Page UI

https://project.mdnd-it.cc/work_packages/37
2025-05-16 20:08:24 +00:00
parent a231fa4b5e
commit f089d314ca
18 changed files with 561 additions and 21 deletions
@@ -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>
+  );
+}