Implemented unfinished Homepage

leaky-ships/pages/_app.tsx

@@ -1,6 +1,7 @@
 import '../styles/App.scss'
-import '../styles/home.scss'
+import '../styles/grid.scss'
-import '../styles/home2.scss'
+import '../styles/grid2.scss'
+import '../styles/homepage.scss'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {

leaky-ships/pages/homepage.tsx

@@ -0,0 +1,32 @@
+import { faCompass } from '@fortawesome/pro-solid-svg-icons'
+import { faCirclePlay } from '@fortawesome/pro-thin-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
+
+export default function Home() {
+    const [heWantsToPlay, setHeWantsToPlay] = useState(false)
+    return (
+        <div id='box'>
+            <button id='navExpand'>
+                <FontAwesomeIcon icon={faCompass} />
+            </button>
+            <div className='beforeStartBox'>
+                <img id='shield' src="/assets/shield.png" alt="Shield Logo" />
+                {!heWantsToPlay ?
+                    <>
+                        <div id='videoWrapper'>
+                            <FontAwesomeIcon icon={faCirclePlay} />
+                        </div>
+                        <button id='startButton' onClick={() => setHeWantsToPlay(true)}>START</button>
+                    </> :
+                    <div id='startBox'>
+                        <div>
+                            <button className='optionButton'>Raum erstellen</button>
+                            <button className='optionButton'>Raum beitreten</button>
+                            <button className='optionButton'>Zuschauen</button>
+                        </div>
+                    </div>}
+            </div>
+        </div>
+    )
+}

leaky-ships/pages/index.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head'
 import Link from 'next/link'
-// import styles from '../styles/Home.module.css'
 
 export default function Home() {
   return (
@@ -13,6 +12,7 @@ export default function Home() {
       </Head>
       <main>
         <p><Link href='/gamefield' target='_blank'>Gamefield</Link></p>
+        <p><Link href='/homepage' target='_blank'>Homepage</Link></p>
         <p><Link href='/grid' target='_blank'>Grid Effect</Link></p>
         <p><Link href='/grid2' target='_blank'>Grid Effect with Content</Link></p>
         <p><Link href='/socketio' target='_blank'>SocketIO</Link></p>

leaky-ships/styles/homepage.scss

@@ -0,0 +1,98 @@
+#box {
+    border: 2px solid black;
+    height: 100vh;
+    width: 100vw;
+    background-color: #282c34;
+
+    #navExpand {
+        position: absolute;
+        top: 64px;
+        left: 64px;
+        width: 96px;
+        height: 96px;
+        background-color: black;
+        border-radius: 8px;
+        border: none;
+
+        svg {
+            height: 50%;
+            width: 50%;
+            color: white;
+        }
+    }
+
+    .beforeStartBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        height: 100%;
+        width: 100%;
+
+        #shield {
+            width: 450px;
+
+        }
+
+        #videoWrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 225px;
+            width: 525px;
+            background-color: #2227;
+            border: 2px solid black;
+            border-radius: 8px;
+
+            svg {
+                font-size: 4em;
+                color: #231f20;
+
+                path {
+                    stroke: black;
+                    stroke-width: 2px;
+                    stroke-linejoin: round;
+                }
+            }
+        }
+
+        #startButton {
+            font-size: 2.5em;
+            color: white;
+            background-color: black;
+            border: none;
+            border-radius: 8px;
+            padding: 2rem 6rem;
+        }
+
+        #startBox {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #B1B2B5CC;
+            border: 3px solid black;
+            padding: 3rem;
+            border-radius: 8px;
+            min-width: 60vw;
+
+            div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 3rem;
+
+                .optionButton {
+                    font-size: 2em;
+                    color: #B1B2B5CC;
+                    background-color: #000C;
+                    border: none;
+                    border-radius: 8px;
+                    padding: 1rem 4rem;
+                    width: 100%;
+                }
+
+            }
+
+        }
+    }
+}