Create Home

client/src/App.jsx

@@ -3,6 +3,7 @@ import {useContext} from "react";
 import {StateContext} from "@/common/contexts/StateContext";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faMusic} from "@fortawesome/free-solid-svg-icons";
+import Home from "@/pages/Home";
 
 const App = () => {
     const {currentState} = useContext(StateContext);
@@ -14,7 +15,8 @@ const App = () => {
                 <FontAwesomeIcon icon={faMusic} className="music-note note-2" />
                 <FontAwesomeIcon icon={faMusic} className="music-note note-3" />
             </div>
-            {currentState === "Home" && <Game />}
+            {currentState === "Home" && <Home />}
+            {currentState === "Game" && <Game />}
         </>
     )
 }

client/src/common/styles/colors.sass

@@ -0,0 +1,6 @@
+$background: rgba(255, 255, 255, 0.14)
+$border: rgba(255, 255, 255, 0.35)
+
+$white: #ECECEC
+
+$green: #26EE5E

client/src/common/styles/main.sass

@@ -15,6 +15,12 @@ body
   overflow: hidden
   position: relative
 
+.glassy
+  background: $background
+  backdrop-filter: blur(10px)
+  border: 2px solid $border
+  border-radius: 0.8rem
+
 ::-webkit-scrollbar
   width: 10px
 

client/src/pages/Game/Game.jsx

@@ -2,6 +2,8 @@ import "./styles.sass";
 import {StateContext} from "@/common/contexts/StateContext";
 import {useContext, useState, useEffect, useRef} from "react";
 import MusicSlider from "@/pages/Game/components/MusicSlider";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faMessage} from "@fortawesome/free-solid-svg-icons";
 
 export const Game = () => {
     const {setCurrentState} = useContext(StateContext);
@@ -21,7 +23,7 @@ export const Game = () => {
     };
 
     return (
-        <div className="home-page">
+        <div className="game-page">
             <div className="main-content">
                 <div className="song-display">
                     <h2>ToneGuessr</h2>
@@ -37,7 +39,7 @@ export const Game = () => {
                 </div>
                 <div className="chat-window">
                     <div className="chat-header">
-                        <div className="account-icon"></div>
+                        <FontAwesomeIcon icon={faMessage} />
                         <div className="chat-title">Chat</div>
                     </div>
                     <div className="chat-messages">

client/src/pages/Game/styles.sass

@@ -1,4 +1,4 @@
-.home-page
+.game-page
   display: flex
   flex-direction: column
   align-items: center
@@ -81,15 +81,8 @@
       background: rgba(30, 30, 30, 0.5)
       border-bottom: 1px solid rgba(255, 255, 255, 0.2)
 
-      .account-icon
-        width: 30px
-        height: 30px
-        background: url('https://place-hold.it/100x100') no-repeat center
-        background-size: cover
-        border-radius: 50%
-        margin-right: 10px
-
       .chat-title
+        margin-left: 10px
         font-size: 16pt
         color: #fff
 

client/src/pages/Home/Home.jsx

@@ -0,0 +1,18 @@
+import "./styles.sass";
+import ActionCard from "@/pages/Home/components/ActionCard";
+import {faArrowRightToBracket, faPlusSquare} from "@fortawesome/free-solid-svg-icons";
+import {StateContext} from "@/common/contexts/StateContext";
+import {useContext} from "react";
+
+export const Home = () => {
+    const {setCurrentState} = useContext(StateContext);
+
+    return (
+        <div className="home-page">
+            <div className="action-area">
+                <ActionCard title="Raum beitreten" icon={faArrowRightToBracket} onClick={() => {}} />
+                <ActionCard title="Raum erstellen" icon={faPlusSquare} onClick={() => setCurrentState("Game")} />
+            </div>
+        </div>
+    );
+}

client/src/pages/Home/components/ActionCard/ActionCard.jsx

@@ -0,0 +1,11 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import "./styles.sass";
+
+export const ActionCard = ({ title, icon, onClick }) => {
+  return (
+    <div className="glassy action-card" onClick={onClick}>
+        <FontAwesomeIcon icon={icon} />
+        <h1>{title}</h1>
+    </div>
+  );
+}

client/src/pages/Home/components/ActionCard/index.js

@@ -0,0 +1 @@
+export {ActionCard as default} from "./ActionCard.jsx";

client/src/pages/Home/components/ActionCard/styles.sass

@@ -0,0 +1,23 @@
+@use "@/common/styles/colors" as *
+
+.action-card
+  display: flex
+  flex-direction: column
+  padding: 2rem 0
+  width: 13rem
+  text-align: center
+  gap: 2rem
+  transition: all 0.3s ease-in-out
+  cursor: pointer
+  user-select: none
+
+  svg
+    font-size: 52pt
+    color: $white
+
+  h1
+    margin: 0
+    color: $white
+
+  &:hover
+    transform: scale(1.1) translate(0, -0.5rem) rotate(0.5deg)

client/src/pages/Home/index.js

@@ -0,0 +1 @@
+export {Home as default} from "./Home.jsx";

client/src/pages/Home/styles.sass

@@ -0,0 +1,15 @@
+.home-page
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  height: 100%
+  width: 100%
+
+
+.action-area
+  margin-top: 5rem
+  display: flex
+  gap: 3rem
+  flex-wrap: wrap
+  justify-content: center