Add mockup create & join forms

client/src/pages/Home/Home.jsx

@@ -1,11 +1,40 @@
 import "./styles.sass";
 import ActionCard from "@/pages/Home/components/ActionCard";
+import JoinForm from "@/pages/Home/components/JoinForm";
+import CreateForm from "@/pages/Home/components/CreateForm";
 import {faArrowRightToBracket, faPlusSquare} from "@fortawesome/free-solid-svg-icons";
 import {StateContext} from "@/common/contexts/StateContext";
-import {useContext} from "react";
+import {SocketContext} from "@/common/contexts/SocketContext";
+import {useContext, useState} from "react";
 
 export const Home = () => {
     const {setCurrentState} = useContext(StateContext);
+    const {connect, send} = useContext(SocketContext);
+    const [homeState, setHomeState] = useState("initial"); // initial, joining, creating
+
+    const handleJoinClick = () => {
+        setHomeState("joining");
+    };
+
+    const handleCreateClick = () => {
+        setHomeState("creating");
+    };
+
+    const handleBack = () => {
+        setHomeState("initial");
+    };
+
+    const handleJoinSubmit = (name, roomCode) => {
+        connect();
+        send("joinRoom", {name, roomCode});
+        setCurrentState("Game");
+    };
+
+    const handleCreateSubmit = (name) => {
+        connect();
+        send("createRoom", {name});
+        setCurrentState("Game");
+    };
 
     return (
         <div className="home-page">
@@ -13,14 +42,28 @@ export const Home = () => {
                 <div className="rotating-gradient"></div>
             </div>
             
-            <div className="logo-container">
+            <div className={`logo-container ${homeState !== 'initial' ? 'shifted' : ''}`}>
                 <h1 className="logo">ToneGuessr</h1>
                 <p className="tagline">Das Frequenzspiel für Marco :3</p>
             </div>
             
-            <div className="action-area">
-                <ActionCard title="Join Room" icon={faArrowRightToBracket} onClick={() => {}} />
-                <ActionCard title="Create Room" icon={faPlusSquare} onClick={() => setCurrentState("Game")} />
+            <div className={`content-container ${homeState !== 'initial' ? 'active' : ''}`}>
+                <div className={`action-area ${homeState !== 'initial' ? 'hidden' : ''}`}>
+                    <ActionCard title="Join Room" icon={faArrowRightToBracket} onClick={handleJoinClick} />
+                    <ActionCard title="Create Room" icon={faPlusSquare} onClick={handleCreateClick} />
+                </div>
+                
+                <div className={`form-container ${homeState === 'joining' ? 'active' : ''}`}>
+                    {homeState === 'joining' && (
+                        <JoinForm onSubmit={handleJoinSubmit} onBack={handleBack} />
+                    )}
+                </div>
+                
+                <div className={`form-container ${homeState === 'creating' ? 'active' : ''}`}>
+                    {homeState === 'creating' && (
+                        <CreateForm onSubmit={handleCreateSubmit} onBack={handleBack} />
+                    )}
+                </div>
             </div>
         </div>
     );