From 4c26a3736b407c5a39279d83b3594912cb6a04eb Mon Sep 17 00:00:00 2001
From: lseidel <ls250@hdm-stuttgart.de>
Date: Sun, 14 Jan 2024 04:24:58 +0100
Subject: [PATCH] 13.01.2024 - created Components for Landingpage, finishing up
the core structure of the Landingpage #12
---
.../landingpage/components/Footer.jsx | 6 ++-
.../landingpage/components/Header.jsx | 9 ++--
.../features/landingpage/components/Modes.jsx | 47 ++++++++++---------
.../landingpage/components/Partner.jsx | 14 +++++-
4 files changed, 47 insertions(+), 29 deletions(-)
diff --git a/sth-frontend/src/features/landingpage/components/Footer.jsx b/sth-frontend/src/features/landingpage/components/Footer.jsx
index 05f37ec..20d5371 100644
--- a/sth-frontend/src/features/landingpage/components/Footer.jsx
+++ b/sth-frontend/src/features/landingpage/components/Footer.jsx
@@ -2,8 +2,10 @@ import React from "react";
const Footer = () => {
return (
- <div>
- Hello World
+ <div className='w-[1065px] h-[325px] bg-deepPurple ml-[15%]'>
+ <div className=''>
+ TJONE
+ </div>
</div>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Header.jsx b/sth-frontend/src/features/landingpage/components/Header.jsx
index d14db12..0b87efb 100644
--- a/sth-frontend/src/features/landingpage/components/Header.jsx
+++ b/sth-frontend/src/features/landingpage/components/Header.jsx
@@ -2,7 +2,7 @@ import React from "react";
const Header = () => {
return (
- <div>
+ <div className='flex gap-5 pl-4 w-[1065px] h-[600px] ml-[15%]'>
<div>
<div className='flex justify-center py-2'>
<svg
@@ -27,9 +27,10 @@ const Header = () => {
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>
+ <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'>
diff --git a/sth-frontend/src/features/landingpage/components/Modes.jsx b/sth-frontend/src/features/landingpage/components/Modes.jsx
index 75ee04f..d715ee1 100644
--- a/sth-frontend/src/features/landingpage/components/Modes.jsx
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -2,30 +2,35 @@ import React from "react";
const Modes = () => {
return (
- <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='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='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 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>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Partner.jsx b/sth-frontend/src/features/landingpage/components/Partner.jsx
index a335715..1146e38 100644
--- a/sth-frontend/src/features/landingpage/components/Partner.jsx
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -2,8 +2,18 @@ import React from "react";
const Partner = () => {
return (
- <div>
- Hello World
+ <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>
)
}
--
GitLab