diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec6875aa5dc9087188f0499b3f7f3b6ce5679dcc
--- /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 className='bg-darkGray -z-50'>
+ <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..22c7b72344ae334805ea87fcc6e5d7bbbfb32838
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+const Features = () => {
+ return (
+ <div className='flex flex-col items-center gap-10 w-[1065px] h-[450px] ml-[15%] mt-10 bg-deepPurple'>
+ <div className='flex justify-center text-darkGray font-Outfit-ExtraBold font-bold text-7xl uppercase'>
+ How it works
+ </div>
+ <div className='flex gap-2'>
+ <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
+ <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
+ Bring People together and Game
+ </div>
+ </div>
+ <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
+ <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
+ Create your type of Tournament and let our Engine handle your Experience. Anything is possible
+ </div>
+ </div>
+ <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
+ <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
+ Bring on your Winner of the Tournament and give out MVP Medals for the best Players
+ </div>
+ </div>
+ </div>
+ </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..20d5371274891905286fd9f39dcd8a5af809ec6a
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+ return (
+ <div className='w-[1065px] h-[325px] bg-deepPurple ml-[15%]'>
+ <div className=''>
+ TJONE
+ </div>
+ </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..0b87efbe57e0c2db7e57a97fef932cbdf903e0a2
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Header.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+const Header = () => {
+ return (
+ <div className='flex gap-5 pl-4 w-[1065px] h-[600px] ml-[15%]'>
+ <div>
+ <div className='flex justify-center py-2'>
+ <svg
+ className='w-1065 h-600 absolute left-1/2 transform -translate-x-1/2 top-1616 overflow-visible z-0'
+ width="1065"
+ height="600"
+ viewBox="0 0 1065 600"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0H1065L975 471L0 600V0Z" fill="#916CFA"></path>
+ </svg>
+ <div className='flex flex-col gap-2.5 max-w-2xl'>
+ <div
+ className='z-10 relative text-darkGray text-left font-Outfit-ExtraBold font-sans text-6xl leading-tight font-extrabold uppercase'>
+ Launch your Tournament
+ </div>
+ <div
+ className='z-10 relative text-teal-300 text-left font-Outfit-Bold font-sans text-xl leading-tight font-bold uppercase'>
+ Let the Games begin
+ </div>
+ <div className='z-10 relative text-lightGray text-left font-Outfit-Regular font-sans text-2xl '>
+ Lorem ipsum Beschreibung oder so kann dahin aber muss ich noch überlegen ob
+ das Sinn macht aber hier als Placeholder
+ </div>
+ <button className='w-40 z-10 relative rounded-3xl border-2 px-12 py-2 text-lightGray'>
+ Create
+ </button>
+ <img src='' alt='Group'/>
+ </div>
+ </div>
+ <div className='flex flex-row gap-2.5 w-2xl'>
+ </div>
+ <div className='z-10 relative bg-deepPurple rounded-full w-64 h-64 filter blur-[250px] left-1/2'></div>
+ </div>
+ </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..d715ee175527d448ed180ccce6b1d2f55287e4b9
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const Modes = () => {
+ return (
+ <div>
+ <div className='flex gap-10 justify-around items-center w-[1065px] h-[540px] ml-[15%] mt-10'>
+ <div className='flex gap-5'>
+ <div className='bg-lightGray h-[370px] w-[75px]'>
+ Card 1
+ </div>
+ <div className='bg-lightGray h-[370px] w-[75px]'>
+ Card 2
+ </div>
+ <div className='bg-lightGray h-[370px] w-[75px]'>
+ Card 3
+ </div>
+ <div className='bg-lightGray h-[370px] w-[75px]'>
+ Card 4
+ </div>
+ </div>
+ <div className='flex flex-col w-[525px] h-[370px] gap-10'>
+ <div className='text-lightGray font-Outfit-ExtraBold font-bold text-7xl uppercase '>
+ Everything <br/> is possible
+ </div>
+ <div className='text-lightGray font-Outfit-Regular font-medium text-xl max-w-md'>
+ Create any Type of Tournament possible. With our new Tournament Engine
+ everything is in the Hand of you. Grab your Friends and lets GAME
+ </div>
+ </div>
+ </div>
+ {/*<div className='h-1'>*/}
+ {/* <div className='z-10 relative left-3/4 bg-deepPurple rounded-full w-[496px] h-[485px] filter blur-[250px]'></div>*/}
+ {/*</div>*/}
+ </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..be6f7082d1f5b02789d63c3efec5206c282629d3
--- /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 z-50`}>
+ <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..1146e386549db9f7d512f6a0fb13ad4c382b3d82
--- /dev/null
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const Partner = () => {
+ return (
+ <div className='flex flex-col items-center gap-10 w-[1065px] h-[285px] ml-[15%]'>
+ <div className='flex justify-center text-lightGray text-7xl text-Outfit-ExtraBold font-bold'>
+ Our Partner
+ </div>
+ <div className='flex gap-3.5 text-lightGray'>
+ <div>
+ League of Legends
+ </div>
+ <div>
+ Bierpong League
+ </div>
+ </div>
+ </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: [],