Create landing page base layout

web/src/App.tsx

@@ -3,16 +3,20 @@ import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
 import GamePage from "./pages/game/GamePage";
 import "./App.scss";
+import LobbyPage from "./pages/lobby/LobbyPage";
 
 export interface AppProps {
   socket: Socket;
 }
 
 const App = (props: AppProps) => {
+  const renderedPage: string = "LOBBY";
+
   return (
-    <div id="app">
-      <LandingPage {...props} />
-      <GamePage />
+    <div className="app">
+      {renderedPage === "LANDING" && <LandingPage {...props} />}
+      {renderedPage === "LOBBY" && <LobbyPage />}
+      {renderedPage === "GAME" && <GamePage />}
     </div>
   );
 };

web/src/pages/lobby/LobbyPage.scss

@@ -0,0 +1,42 @@
+.lobby-page {
+    height: 100%;
+    width: 100%;
+    padding: 2%;
+    margin: 0 auto;
+    text-align: center;
+
+    background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+
+    @keyframes gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    .lobby-page-body {
+        margin: auto;
+        width: 20%;
+        min-width: 300px;
+
+        .lobby-user-name {
+            margin: 0 auto 10px;
+            padding: 10px;
+            width: 60%;
+            border: 2px solid cyan;
+            border-radius: 10px;
+        }
+
+        .start-game-button {
+            margin-top: 30px;
+        }
+    }
+}

web/src/pages/lobby/LobbyPage.tsx

@@ -0,0 +1,23 @@
+import "./LobbyPage.scss";
+
+const LobbyPage = () => {
+  const userNames = ["Laura", "Miguel", "David"];
+
+  return (
+    <div className="lobby-page">
+      <div className="landing-page-title">
+        <h1>Trains And Roads</h1>
+      </div>
+      <div className="lobby-page-body">
+        {userNames.map((name) => (
+          <div className="lobby-user-name">{name}</div>
+        ))}
+        <div className="start-game-button">
+          <button>Start Game</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LobbyPage;