diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..93a71478b023b4e0f0ddfc403ac39d212666bd31
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/Landingpage.jsx
@@ -0,0 +1,17 @@
+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
diff --git a/sth-frontend/src/features/landingpage/components/Features.jsx b/sth-frontend/src/features/landingpage/components/Features.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..60c5121cb79d824835278cac6d681dce4aba4c45
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Features = () => {
+ return (
+ <div>
+ Hello World
+ </div>
+ )
+}
+
+export default Features
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/Footer.jsx b/sth-frontend/src/features/landingpage/components/Footer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..05f37ec8ad9615a9953071935aa288ff332930ff
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Footer.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Footer = () => {
+ return (
+ <div>
+ Hello World
+ </div>
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/Header.jsx b/sth-frontend/src/features/landingpage/components/Header.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab13a345004866d9f95f141c6cecf27ba6592a0f
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Header.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Header = () => {
+ return (
+ <div>
+ Hello World
+ </div>
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/Modes.jsx b/sth-frontend/src/features/landingpage/components/Modes.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e122b89cd5418cf03ad5c3851d704e4bc795ee15
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Modes = () => {
+ return (
+ <div>
+ Hello World
+ </div>
+ )
+}
+
+export default Modes
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/Navbar.jsx b/sth-frontend/src/features/landingpage/components/Navbar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1c2c9b0ba8d901109ad7499cfbaed410b0073b8
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Navbar.jsx
@@ -0,0 +1,56 @@
+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
diff --git a/sth-frontend/src/features/landingpage/components/Partner.jsx b/sth-frontend/src/features/landingpage/components/Partner.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a33571530d206980d3d7161ad32ec9a5974177ca
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Partner = () => {
+ return (
+ <div>
+ Hello World
+ </div>
+ )
+}
+
+export default Partner
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/index.jsx b/sth-frontend/src/features/landingpage/components/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca5c7819b030d9bafd2715a737ad38b77bae007e
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/index.jsx
@@ -0,0 +1,6 @@
+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";
diff --git a/sth-frontend/src/utils/router.jsx b/sth-frontend/src/utils/router.jsx
index e5eb6de3abc64ddc4656d0190ec3a01de4cc4331..665fcf1b4ea129a5b3bb3f2334be105969bfd18d 100644
--- a/sth-frontend/src/utils/router.jsx
+++ b/sth-frontend/src/utils/router.jsx
@@ -1,15 +1,20 @@
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 />,
+ }
])
diff --git a/sth-frontend/tailwind.config.js b/sth-frontend/tailwind.config.js
index fe3b0216ac3a2766f08477df2df8f65d8e0b5cd5..bf5c54af2d9db76d6bfd00a1a9ed22673dc08fce 100644
--- a/sth-frontend/tailwind.config.js
+++ b/sth-frontend/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
],
theme: {
extend: {
-
+ colors: {
+ 'darkGray': '#272525',
+ 'deepPurple': '#916CFA',
+ 'lightGray': '#D9D9D9',
+ }
},
},
plugins: [],