13.01.2024 - created Landingpage Structure and created Navbar Component,...

13.01.2024 - created Landingpage Structure and created Navbar Component, TailwindConfig changes, Router

sth-frontend/src/features/landingpage/Landingpage.jsx

+import React from "react";
+import { Features, Footer, Header, Modes, Navbar, Partner } from './components'
+
+const Landingpage = () => {
+  return (
+      <div>
+          <Navbar/>
+          <Header/>
+          <Modes/>
+          <Features/>
+          <Partner/>
+          <Footer/>
+      </div>
+  )
+}
+
+export default Landingpage
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Features.jsx

+import React from "react";
+
+const Features = () => {
+    return (
+        <div>
+            Hello World
+        </div>
+    )
+}
+
+export default Features
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Footer.jsx

+import React from "react";
+
+const Footer = () => {
+    return (
+        <div>
+            Hello World
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Header.jsx

+import React from "react";
+
+const Header = () => {
+    return (
+        <div>
+            Hello World
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Modes.jsx

+import React from "react";
+
+const Modes = () => {
+    return (
+        <div>
+            Hello World
+        </div>
+    )
+}
+
+export default Modes
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Navbar.jsx

+import React, {useState} from "react";
+import {Link} from "react-router-dom";
+
+const Navbar = () => {
+    const [darkMode, setDarkMode] = useState(true)
+
+    const toggleDarkMode = () => {
+        setDarkMode(!darkMode)
+    };
+
+    const backgroundColorClasses = darkMode ? 'bg-darkGray': 'bg-lightGray';
+    const textClass = darkMode ? 'text-lightGray': 'text-darkGray';
+    const moonOrSunIcon = darkMode ? '☾': '☼' ;
+
+
+    return (
+        <div className={`${backgroundColorClasses} fixed top-0`}>
+            <nav className={`flex ${textClass} gap-3 items-center justify-center`}>
+                <div className='flex flex-row gap-5 items-center justify-center flex-shrink-0 w-screen relative'>
+                    <div
+                        className='flex flex-row flex-shrink-0 gap-0 items-center justify-start relative p-2.5 text-5xl'>TJ1
+                    </div>
+                    <div className='flex flex-col items-start justify-start flex-shrink-0 relative gap-2.5 p-2.5'>
+                        <ul className='flex flex-row items-start justify-start flex-shrink-0 w-1/3 relative px-4 gap-8 text-xl'>
+                            <li>
+                                <Link to="/landingpage">Home</Link>
+                            </li>
+                            <li>
+                                <Link to="/landingpage">Tournaments</Link>
+                            </li>
+                            <li>
+                                <Link to="/landingpage">Support</Link>
+                            </li>
+                            <li>
+                                <Link to="/landingpage">Options</Link>
+                            </li>
+                        </ul>
+                    </div>
+                    <div onClick={toggleDarkMode} className='cursor-pointer text-3xl'>
+                        {moonOrSunIcon}
+                    </div>
+                    <div className='flex flex-row items-center justify-start flex-shrink-0 relative gap-5'>
+                        <button className='rounded-3xl border-2 px-12 py-2 bg-lightGray text-darkGray'>
+                            Create
+                        </button>
+                        <button className='rounded-3xl border-2 px-12 py-2'>
+                            Login
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    )
+}
+
+export default Navbar
\ No newline at end of file

sth-frontend/src/features/landingpage/components/Partner.jsx

+import React from "react";
+
+const Partner = () => {
+    return (
+        <div>
+            Hello World
+        </div>
+    )
+}
+
+export default Partner
\ No newline at end of file

sth-frontend/src/features/landingpage/components/index.jsx

+export { default as Features } from "/src/features/landingpage/components/Features";
+export { default as Footer } from "/src/features/landingpage/components/Footer";
+export { default as Header } from "/src/features/landingpage/components/Header";
+export { default as Modes } from "/src/features/landingpage/components/Modes";
+export { default as Navbar } from "/src/features/landingpage/components/Navbar";
+export { default as Partner } from "/src/features/landingpage/components/Partner";

sth-frontend/src/utils/router.jsx

 import {createBrowserRouter} from "react-router-dom";
 import Tournament from "../features/tournament/components/Tournament";
 import App from "../App";
+import Landingpage from "../features/landingpage/Landingpage";
 
 const router = createBrowserRouter([
     {
         path: "/",
-        element: <App />,
+        element: <App/>,
         children: [
             {path: "", element: <Tournament/>},
         ]
     },
+    {
+        path:"/landingpage",
+        element: <Landingpage />,
+    }
 ])
 
 

sth-frontend/tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
   ],
   theme: {
     extend: {
-
+      colors: {
+        'darkGray': '#272525',
+        'deepPurple': '#916CFA',
+        'lightGray': '#D9D9D9',
+      }
     },
   },
   plugins: [],