From aaa2ec4fb6487be595d51eb6783a0da003b59a88 Mon Sep 17 00:00:00 2001
From: lseidel <ls250@hdm-stuttgart.de>
Date: Sat, 13 Jan 2024 21:26:11 +0100
Subject: [PATCH] 13.01.2024 - created Landingpage Structure and created Navbar
Component, TailwindConfig changes, Router
---
.../src/features/landingpage/Landingpage.jsx | 17 ++++++
.../landingpage/components/Features.jsx | 11 ++++
.../landingpage/components/Footer.jsx | 11 ++++
.../landingpage/components/Header.jsx | 11 ++++
.../features/landingpage/components/Modes.jsx | 11 ++++
.../landingpage/components/Navbar.jsx | 56 +++++++++++++++++++
.../landingpage/components/Partner.jsx | 11 ++++
.../features/landingpage/components/index.jsx | 6 ++
sth-frontend/src/utils/router.jsx | 7 ++-
sth-frontend/tailwind.config.js | 6 +-
10 files changed, 145 insertions(+), 2 deletions(-)
create mode 100644 sth-frontend/src/features/landingpage/Landingpage.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Features.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Footer.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Header.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Modes.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Navbar.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/Partner.jsx
create mode 100644 sth-frontend/src/features/landingpage/components/index.jsx
diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
new file mode 100644
index 0000000..93a7147
--- /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 0000000..60c5121
--- /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 0000000..05f37ec
--- /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 0000000..ab13a34
--- /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 0000000..e122b89
--- /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 0000000..d1c2c9b
--- /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 0000000..a335715
--- /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 0000000..ca5c781
--- /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 e5eb6de..665fcf1 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 fe3b021..bf5c54a 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: [],
--
GitLab