Page routing setup with react router

client/src/App.js

@@ -1,21 +1,19 @@
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
+
 import "./App.css";
 import MiniBoard from "./components/MiniBoard/MiniBoard";
+import Homepage from "./components/Homepage.js/Homepage"
+import MainGame from "./components/GameScreen/MainGame";
 
 function App() {
   return (
     <div className="App">
-      <header class="main-header">
-        <nav>
-          <h1 id="logo">Chess Board Room Plugin</h1>
-        </nav>
-      </header>
-      <section class="hero">
-        <h2>Welcome to the Chess Board Room</h2>
-
-        <button>Start Game</button>
-      </section>
-      <MiniBoard id="234" playerOne="Annietah" playerTwo="codeJonin" />
-      <MiniBoard id="234" playerOne="" playerTwo="codeJonin" />
+      <Router>
+        <Switch>
+          <Route exact path="/" render={() => Homepage} />
+          <Route exact path="/game" render={() => MainGame} />
+        </Switch>
+      </Router>
     </div>
   );
 }

client/src/Pages/GameScreen/MainGame.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MainGame = () => {
+    return (
+        <div>
+            <h1>Welcome to the game!</h1>
+        </div>
+    )
+}
+
+export default MainGame

client/src/Pages/Homepage.js/Homepage.css

@@ -0,0 +1,96 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+h1 {
+  font-size: 2.6rem;
+}
+
+li,
+button,
+label,
+input,
+p {
+  font-size: 2rem;
+}
+h2 {
+  font-size: 4.5rem;
+}
+
+button {
+  padding: 2rem 6rem;
+  border: none;
+  color: white;
+  font-size: 1.8rem;
+  border-radius: 5rem;
+  background: #25364b;
+}
+
+button:hover {
+  background: #121a24;
+  cursor: pointer;
+  transition: background 0.5s ease 0.2s;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+}
+
+header {
+  background: #131c27;
+  color: white;
+}
+
+nav {
+  min-height: 10vh;
+  display: flex;
+  width: 90%;
+  padding: 1rem;
+  margin: auto;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+#logo {
+  flex: 3 1 40rem;
+  font-family: "Pattaya", sans-serif;
+  font-weight: normal;
+}
+.hero {
+  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent),
+    url("../src/assets/chesspieces.jpg");
+  min-height: 90vh;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  color: rgba(255, 255, 255, 0.945);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.hero h2 {
+  padding: 6rem;
+}
+
+@media screen and (max-width: 933px) {
+  nav {
+    text-align: center;
+    padding-bottom: 2rem;
+  }
+  #logo {
+    padding: 1rem;
+  }
+  html {
+    font: size 50%;
+  }
+  h2 {
+    font-size: 2.5rem;
+  }
+}

client/src/Pages/Homepage.js/Homepage.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import './Homepage.css'
+
+const Homepage = () => {
+    return (
+      <div>
+        <header class="main-header">
+          <nav>
+            <h1 id="logo">Chess Board Room Plugin</h1>
+          </nav>
+        </header>
+        <section class="hero">
+          <h2>Welcome to the Chess Board Room</h2>
+
+          <button>Start Game</button>
+        </section>
+      </div>
+    );
+}
+
+export default Homepage