Starting home page

webapp/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

webapp/src/components/content/home/footer/index.jsx

@@ -0,0 +1,9 @@
+function Footer() {
+    return(
+        <footer className="h-24 w-full bg-darkGreen">
+
+        </footer>
+    );
+}
+
+export default Footer;

webapp/src/components/content/home/hero/index.jsx

@@ -0,0 +1,12 @@
+function HomeHero() {
+    return (
+        <div className="w-full px-4 my-16">
+            <div className="home-hero flex flex-col justify-center items-center h-96 w-full bg-mainBlue rounded-lg">
+                <h1>Home Hero</h1>
+            </div>
+        </div>
+
+    );
+}
+
+export default HomeHero;

webapp/src/components/navbarre/home/index.jsx

@@ -0,0 +1,16 @@
+import NavListHome from "./navlist";
+import list from "../list";
+import LoginButton from "../login-button";
+
+function NavbarreHome() {
+    return(
+        <nav className="fixed top-0 left-0 h-16 w-full px-4 flex flex-row justify-between items-center text-center">
+            <div className="h-12 w-12 bg-red-500">
+            </div>
+            <NavListHome list={list}/>
+            <LoginButton />
+        </nav>
+    )
+}
+
+export default NavbarreHome;

webapp/src/components/navbarre/home/navlinks/index.jsx

@@ -0,0 +1,9 @@
+// import Link from 'react';
+
+// function NavLinks() {
+//     return(
+//         <Link to="test" className="">test</Link>
+//     );
+// }
+
+// export default NavLinks;

webapp/src/components/navbarre/home/navlist/index.jsx

@@ -0,0 +1,20 @@
+// import NavLinks from "../navlinks";
+import Link from "react";
+
+function NavListHome({list}) {
+    list.map((item, index) => {
+        console.log("Item: " + item + " Index: " + index);
+    });
+
+    return(
+        <ul className="flex flex-row justify-between items-center h-full gap-5">
+            {list.map((item, index) => (
+                <li key={index} className="h-full flex justify-center items-center">
+                    <a href={item[1]} className="text-align">{item[0]}</a>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default NavListHome;

webapp/src/components/navbarre/list/index.js

@@ -1,11 +1,7 @@
 const list = [
     ['Home', '/'],
-    ['About', '/about'],
     ['Game', '/game'],
-    ['Login', '/login'],
-    ['Register', '/register'],
     ['Profile', '/profile'],
-    ['Logout', '/logout'],
 ];
 
 export default list;

webapp/src/components/navbarre/login-button/index.jsx

@@ -1,6 +1,6 @@
 function LoginButton() {
     return (
-        <button className="btn btn-primary">Login</button>
+        <button className="py-3 px-6 bg-darkBlue text-white rounded-md">Login</button>
     )
 }
 

webapp/src/components/navbarre/navbarre-home/index.jsx

@@ -1,13 +0,0 @@
-import NavListHome from "../navlist-home";
-import list from "./list";
-
-function NavbarreHome() {
-    return(
-        <nav className="fixed top-0 left-0 h-24">
-            <div></div>
-            <NavListHome list={list}/>
-        </nav>
-    )
-}
-
-export default NavbarreHome;

webapp/src/components/navbarre/navlinks-home/index.jsx

@@ -1,9 +0,0 @@
-import Link from 'react';
-
-function NavLinks({text, link}) {
-    return(
-        <Link to={link} className="">{text}</Link>
-    )
-}
-
-export default NavLinks;

webapp/src/components/navbarre/navlist/index.jsx

@@ -1,4 +1,4 @@
-import NavLinks from "../navlinks-home";
+import NavLinks from "../navlinks";
 
 function NavListHome({list}) {
     return(

webapp/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import Home from "./pages/home";
 import Login from "./pages/login";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
@@ -9,6 +10,7 @@ root.render(
   <React.StrictMode>
       <BrowserRouter>
           <Routes>
+              <Route path="/" element={<Home />}/>
               <Route path="/login" element={<Login />}/>
           </Routes>
       </BrowserRouter>

webapp/src/pages/home/index.jsx

@@ -0,0 +1,15 @@
+import NavbarreHome from "../../components/navbarre/home";
+import HomeHero from "../../components/content/home/hero";
+import Footer from "../../components/content/home/footer";
+
+function Home() {
+    return (
+        <div className="h-screen w-screen flex flex-col justify-center items-center">
+            <NavbarreHome />
+            <HomeHero />
+            <Footer />
+        </div>
+    )
+}
+
+export default Home;