Frontend homepage looking good on desktop

leaky-ships/pages/dev/index.tsx

@@ -1,4 +1,5 @@
-import { faCompass } from '@fortawesome/pro-solid-svg-icons'
+import { faPlus, faUserPlus } from '@fortawesome/pro-solid-svg-icons'
+import { faEye, faLeftLong } from '@fortawesome/pro-regular-svg-icons'
 import { faCirclePlay } from '@fortawesome/pro-thin-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
@@ -8,32 +9,41 @@ export default function Home() {
     return (
         <div id='box'>
             <button id='navExpand'>
-                <FontAwesomeIcon icon={faCompass} />
+                <img src='/assets/burger-menu.png' alt='Burger Menu' />
             </button>
-            <div className='flex-row'>
             <div id='shield'>
                 <div id='width'>
                     <h1>Leaky</h1>
                     <h1>Ships</h1>
                 </div>
             </div>
-            </div>
-            <div className='beforeStartBox'>
             {!heWantsToPlay ?
                 <>
-                        <div id='videoWrapper'>
+                    <div id='videoWrapper' >
                         <FontAwesomeIcon icon={faCirclePlay} />
                     </div>
                     <button id='startButton' onClick={() => setHeWantsToPlay(true)}>START</button>
                 </> :
                 <div id='startBox'>
+                    <button id='back' onClick={() => setHeWantsToPlay(false)}>
+                        <FontAwesomeIcon icon={faLeftLong} />
+                    </button>
                     <div>
-                            <button className='optionButton'>Raum erstellen</button>
+                        <button className='optionButton'>
-                            <button className='optionButton'>Raum beitreten</button>
+                            Raum erstellen
-                            <button className='optionButton'>Zuschauen</button>
+                            <FontAwesomeIcon icon={faPlus} />
+                        </button>
+                        <button className='optionButton'>
+                            Raum beitreten
+                            <FontAwesomeIcon icon={faUserPlus} />
+                        </button>
+                        <button className='optionButton'>
+                            Zuschauen
+                            <FontAwesomeIcon icon={faEye} />
+                        </button>
                     </div>
                 </div>}
-            </div>
+            {/* </div> */}
         </div >
     )
 }

leaky-ships/styles/App.scss

@@ -12,6 +12,7 @@ body {
 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 .App {

leaky-ships/styles/homepage.scss

@@ -1,38 +1,42 @@
 @use './mixins/display' as *;
+@use './mixins/effects' as *;
 @use './mixins/CP_Font' as *;
+@import './mixins/variables';
+
+
+@import url('https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap');
 
 #box {
-    border: 2px solid black;
     min-height: 100vh;
     background-color: #282c34;
+    @include flex-col;
+    align-items: center;
+    justify-content: space-around;
 
     #navExpand {
+        @include flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
         top: 64px;
         left: 64px;
         width: 96px;
         height: 96px;
-        background-color: black;
+        background-color: $grayish;
         border-radius: 8px;
-        border: none;
+        box-shadow: 0 0 2px 2px #0008 inset;
 
-        svg {
+        img {
-            height: 50%;
+            height: 80%;
-            width: 50%;
+            width: 80%;
-            color: white;
         }
     }
 
-    .flex-row {
-        @include flex-row;
-        justify-content: center;
-
     #shield {
         @include flex-row;
         justify-content: center;
         height: 250px;
         width: 700px;
-            margin: 5%;
         background-image: url("/assets/shield.png");
         background-repeat: no-repeat;
         background-size: contain;
@@ -59,7 +63,7 @@
             }
         }
 
-            @media (max-width: 1000px) {
+        @media (max-width: 2000px) {
             height: 200px;
             width: 560px;
 
@@ -122,28 +126,20 @@
             }
         }
     }
-    }
-
-    .beforeStartBox {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-        height: 100%;
-        width: 100%;
 
     #videoWrapper {
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
-            height: 225px;
+        height: 350px;
-            width: 525px;
+        width: 700px;
         background-color: #2227;
-            border: 2px solid black;
+        border: 4px solid black;
         border-radius: 8px;
 
         svg {
-                font-size: 4em;
+            font-size: 6em;
             color: #231f20;
 
             path {
@@ -155,23 +151,41 @@
     }
 
     #startButton {
-            font-size: 2.5em;
+        font-family: 'Farro', sans-serif;
-            color: white;
+        font-weight: bold;
-            background-color: black;
+        font-size: 3em;
+        color: black;
+        background-color: $warn;
         border: none;
         border-radius: 8px;
-            padding: 2rem 6rem;
+        padding: calc(2rem + 8px) 6rem 2rem 6rem;
     }
 
     #startBox {
         display: flex;
         flex-direction: column;
         align-items: center;
-            background-color: #B1B2B5CC;
+        background-color: $grayish;
-            border: 3px solid black;
+        box-shadow: 0 0 2px 2px #fffb inset, 0 0 2px 2px #fff2;
+        border: 4px solid black;
         padding: 3rem;
         border-radius: 8px;
         min-width: 60vw;
+        gap: 2rem;
+
+        #back {
+            font-size: 3em;
+            color: $grayish;
+            align-self: flex-start;
+            background-color: #000C;
+            border: none;
+            border-radius: 8px;
+            padding: 0 .5rem;
+            margin-top: -1.5rem;
+            width: 10rem;
+            box-shadow: 0 0 2px 2px #fff6 inset;
+            border: 2px solid #000C;
+        }
 
         div {
             display: flex;
@@ -180,17 +194,32 @@
             gap: 3rem;
 
             .optionButton {
-                    font-size: 2em;
+                position: relative;
-                    color: #B1B2B5CC;
+                font-size: 2.5em;
+                color: $grayish;
                 background-color: #000C;
                 border: none;
                 border-radius: 8px;
-                    padding: 1rem 4rem;
+                padding: 1rem calc(4rem + 48px) 1rem 4rem;
                 width: 100%;
+                box-shadow: 0 0 2px 2px #fff6 inset;
+                border: 2px solid #000C;
+
+                &:last-child {
+                    margin-top: 2rem;
+                }
+
+                svg {
+                    position: absolute;
+                    font-size: 2em;
+                    top: 0;
+                    bottom: 0;
+                    width: 48px;
+                    right: 24px;
+                }
             }
 
         }
 
     }
-    }
 }

leaky-ships/styles/mixins/variables.scss

@@ -1 +1,3 @@
 $theme: #282c34;
+$grayish: #B1B2B5CC;
+$warn: #fabd04;