From 10eeb45f81bb5e2782d77215df37f883ab60b088 Mon Sep 17 00:00:00 2001
From: lseidel <ls250@hdm-stuttgart.de>
Date: Sun, 14 Jan 2024 01:37:57 +0100
Subject: [PATCH] 13.01.2024 - created Components for Landingpage, changes to
existing Components #12
---
.../src/features/landingpage/Landingpage.jsx | 2 +-
.../landingpage/components/Features.jsx | 23 +++++++++++--
.../landingpage/components/Header.jsx | 34 ++++++++++++++++++-
.../features/landingpage/components/Modes.jsx | 26 ++++++++++++--
.../landingpage/components/Navbar.jsx | 4 +--
5 files changed, 81 insertions(+), 8 deletions(-)
diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
index 93a7147..ec6875a 100644
--- a/sth-frontend/src/features/landingpage/Landingpage.jsx
+++ b/sth-frontend/src/features/landingpage/Landingpage.jsx
@@ -3,7 +3,7 @@ import { Features, Footer, Header, Modes, Navbar, Partner } from './components'
const Landingpage = () => {
return (
- <div>
+ <div className='bg-darkGray -z-50'>
<Navbar/>
<Header/>
<Modes/>
diff --git a/sth-frontend/src/features/landingpage/components/Features.jsx b/sth-frontend/src/features/landingpage/components/Features.jsx
index 60c5121..22c7b72 100644
--- a/sth-frontend/src/features/landingpage/components/Features.jsx
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -2,8 +2,27 @@ import React from "react";
const Features = () => {
return (
- <div>
- Hello World
+ <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>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Header.jsx b/sth-frontend/src/features/landingpage/components/Header.jsx
index ab13a34..d14db12 100644
--- a/sth-frontend/src/features/landingpage/components/Header.jsx
+++ b/sth-frontend/src/features/landingpage/components/Header.jsx
@@ -3,7 +3,39 @@ import React from "react";
const Header = () => {
return (
<div>
- Hello World
+ <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>
+ </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>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Modes.jsx b/sth-frontend/src/features/landingpage/components/Modes.jsx
index e122b89..75ee04f 100644
--- a/sth-frontend/src/features/landingpage/components/Modes.jsx
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -2,8 +2,30 @@ import React from "react";
const Modes = () => {
return (
- <div>
- Hello World
+ <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>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Navbar.jsx b/sth-frontend/src/features/landingpage/components/Navbar.jsx
index 55960be..be6f708 100644
--- a/sth-frontend/src/features/landingpage/components/Navbar.jsx
+++ b/sth-frontend/src/features/landingpage/components/Navbar.jsx
@@ -14,7 +14,7 @@ const Navbar = () => {
return (
- <div className={`${backgroundColorClasses} fixed top-0`}>
+ <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
@@ -40,7 +40,7 @@ const Navbar = () => {
{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 hover:text-2xl'>
+ <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'>
--
GitLab