From 36476514579a791f1ff300edceebf792939edddc Mon Sep 17 00:00:00 2001
From: lseidel <ls250@hdm-stuttgart.de>
Date: Tue, 16 Jan 2024 23:37:03 +0100
Subject: [PATCH] 16.01.2024 - fixing Landingpage components, adding
responsiveness to the Landingpage added needed SVG and IMG,rewrite some
Components #12
---
sth-frontend/src/assets/svg/hero-pattern.svg | 8 +++
sth-frontend/src/assets/svg/menu.svg | 3 +
sth-frontend/src/assets/svg/signup.svg | 3 +
.../src/features/landingpage/Landingpage.jsx | 3 +-
.../landingpage/components/Features.jsx | 7 +--
.../landingpage/components/Footer.jsx | 22 ++++---
.../landingpage/components/Header.jsx | 61 +++++++++++--------
.../features/landingpage/components/Modes.jsx | 18 +++---
.../landingpage/components/Navbar.jsx | 52 +++++++++++++---
.../landingpage/components/Partner.jsx | 9 ++-
sth-frontend/tailwind.config.js | 12 ++++
11 files changed, 134 insertions(+), 64 deletions(-)
create mode 100644 sth-frontend/src/assets/svg/hero-pattern.svg
create mode 100644 sth-frontend/src/assets/svg/menu.svg
create mode 100644 sth-frontend/src/assets/svg/signup.svg
diff --git a/sth-frontend/src/assets/svg/hero-pattern.svg b/sth-frontend/src/assets/svg/hero-pattern.svg
new file mode 100644
index 0000000..4eca240
--- /dev/null
+++ b/sth-frontend/src/assets/svg/hero-pattern.svg
@@ -0,0 +1,8 @@
+<svg
+ 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>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/menu.svg b/sth-frontend/src/assets/svg/menu.svg
new file mode 100644
index 0000000..c19705c
--- /dev/null
+++ b/sth-frontend/src/assets/svg/menu.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#D9D9D9" class="w-6 h-6">
+ <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+</svg>
diff --git a/sth-frontend/src/assets/svg/signup.svg b/sth-frontend/src/assets/svg/signup.svg
new file mode 100644
index 0000000..c8f46b7
--- /dev/null
+++ b/sth-frontend/src/assets/svg/signup.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#D9D9D9" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>
diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
index ec6875a..8d7f8bb 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 className='bg-darkGray -z-50'>
+ <div className='bg-darkGray scroll-smooth'>
<Navbar/>
<Header/>
<Modes/>
@@ -11,6 +11,7 @@ const Landingpage = () => {
<Partner/>
<Footer/>
</div>
+
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Features.jsx b/sth-frontend/src/features/landingpage/components/Features.jsx
index 914f0d2..ceb6ccf 100644
--- a/sth-frontend/src/features/landingpage/components/Features.jsx
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -4,7 +4,7 @@ import stars from "../../../assets/svg/stars.svg"
import tournament from "../../../assets/svg/tournament.svg"
const Highlights = ({imgSrc, imgAlt, desc}) => (
- <div className='flex flex-col items-center w-[345px] h-[250px] bg-lightGray rounded-2xl'>
+ <div className='flex flex-col items-center max-w-[345px] min-h-[250px] bg-lightGray rounded-2xl'>
<img src={imgSrc} alt={imgAlt} className='w-[70px] h-[70px]'/>
<div className='text-darkGray text-center font-outfit font-medium text-2xl'>
{desc}
@@ -14,8 +14,7 @@ const Highlights = ({imgSrc, imgAlt, desc}) => (
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 flex-col items-center gap-10 max-w-[1065px] min-h-[450px] ms-auto me-auto bg-deepPurple'>
<div className='flex justify-center text-darkGray font-Outfit-ExtraBold font-bold text-7xl uppercase'>
How it works
</div>
@@ -27,8 +26,6 @@ const Features = () => {
desc='Bring on your Winner of the Tournament and give out MVP Medals for the best Players'/>
</div>
</div>
-
-
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Footer.jsx b/sth-frontend/src/features/landingpage/components/Footer.jsx
index d298fc4..f420ced 100644
--- a/sth-frontend/src/features/landingpage/components/Footer.jsx
+++ b/sth-frontend/src/features/landingpage/components/Footer.jsx
@@ -7,6 +7,7 @@ const DATAINFO = ['Infos', 'Demo', 'Stuff', 'Options', 'Types']
const DATAPRICE = ['Pricing', 'Features', 'Extras', 'Options', 'Specials']
const DATALEGAL = ['Tournament', 'MVP', 'Extras', 'Options', 'Types']
const DATASUPPORT = ['Tournament', 'MVP', 'Extras', 'Options', 'Types']
+const DATAIMPRESSUM = ['Hub', 'Info', 'Price', 'Legal', 'Support']
const InfoBox = ({infoCategory, arrName}) => {
@@ -15,9 +16,9 @@ const InfoBox = ({infoCategory, arrName}) => {
))
return (
- <div className='flex flex-col gap-4 text-[16px] font-bold'>
+ <div className='flex flex-col gap-4 text-[16px] font-bold max-md:flex-row max-md:items-center max-md:flex-wrap'>
{infoCategory}
- <div className='gap-10 py-2 font-normal text-[14px]'>
+ <div className='gap-10 py-2 font-normal text-[14px] max-md:flex max-md:flex-wrap '>
{list}
</div>
</div>
@@ -26,25 +27,28 @@ const InfoBox = ({infoCategory, arrName}) => {
const Footer = () => {
return (
- <div className='w-[1065px] h-[325px] bg-deepPurple ml-[15%] mt-10 pt-10'>
- <div className='flex'>
+ <div className='max-w-[1065px] min-h-[325px] bg-deepPurple ms-auto me-auto pt-10'>
+ <div className='flex justify-around max-md:flex-col max-md:items-center '>
<div className='flex justify-start ml-[5%] text-2xl'>
TJONE
</div>
- <div className='flex justify-end w-[960px] h-[175px] mr-[5%] text-darkGray gap-10'>
+ <div className='flex justify-end w-[960px] h-[175px] mr-[5%] text-darkGray gap-10 max-md:hidden'>
<InfoBox infoCategory='Hub' arrName={DATAHUB}/>
<InfoBox infoCategory='Info' arrName={DATAINFO}/>
<InfoBox infoCategory='Price' arrName={DATAPRICE}/>
<InfoBox infoCategory='Legal' arrName={DATALEGAL}/>
<InfoBox infoCategory='Support' arrName={DATASUPPORT}/>
</div>
+ <div className='hidden max-md:flex max-md:justify-end'>
+ <InfoBox infoCategory='Impressum' arrName={DATAIMPRESSUM}/>
+ </div>
</div>
- <div className='flex items-center w-[960px] ml-[5%] mt-10 border-t-2 border-darkGray'>
- <div className='flex gap-[418px]'>
- <div className='flex justify-start'>
+ <div className='flex items-center max-w-[960px] ml-[5%] mt-10 border-t-2 border-darkGray'>
+ <div className='flex justify-between w-screen gap-2 max-md:flex-col max-md:justify-center max-md:items-center'>
+ <div className='flex min-w-fit'>
@ 2023 TJONE. All rights reserved.
</div>
- <div className='flex items-center justify-end gap-4'>
+ <div className='flex items-center gap-4 min-w-fit'>
<div>
Terms
</div>
diff --git a/sth-frontend/src/features/landingpage/components/Header.jsx b/sth-frontend/src/features/landingpage/components/Header.jsx
index 0b87efb..cfe8fb3 100644
--- a/sth-frontend/src/features/landingpage/components/Header.jsx
+++ b/sth-frontend/src/features/landingpage/components/Header.jsx
@@ -1,41 +1,48 @@
import React from "react";
+import picture from '../../../assets/images/jed-villejo-pumko2FFxY0-unsplash.jpg'
+import signup from '../../../assets/svg/signup.svg'
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'>
+ <div className='ms-auto me-auto flex justify-center max-lg:mb-40'>
+ {/*<div style={{background: 'linear-gradient(to right, #6246EA, #916CFA)'}}>*/}
+ <svg
+ className='max-w-1065 min-h-600 absolute max-lg:hidden'
+ 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='bg-darkGray max-lg:bg-deepPurple flex justify-center max-w-[1065px] min-h-[600px] ms-auto me-auto'>
+ <div className='flex justify-center py-2 max-lg:flex-wrap'>
+ <div className='flex flex-col gap-2.5 z-10'>
+ <h1
+ className='pt-10 pl-10 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'>
+ </h1>
+ <p
+ className='pl-10 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 '>
+ </p>
+ <p className='py-5 pl-10 text-wrap 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
+ </p>
+ <div className='flex items-center h-10 pl-10'>
+ <input type='email' placeholder='Enter your E-Mail'
+ className='rounded-l-2xl border-2 w-2/3 h-10 text-darkGray'/>
+ <button className='rounded-r-2xl border-2 border-l-0 px-4 py-2 bg-darkGray'>
+ <img src={signup} alt='Register' className='w-5 h-5'/>
+ </button>
</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>
+ <img
+ src={picture} alt='Picture of People'
+ className='w-72 h-fit object-contain z-10 pt-10 relative max-lg:hidden'
+ />
</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 d715ee1..29bb1b6 100644
--- a/sth-frontend/src/features/landingpage/components/Modes.jsx
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -2,8 +2,8 @@ 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='max-w-[1065x] max-h-[540px] max-[1024px]:max-h-[540px] max-[1024px]:mb-40'>
+ <div className='flex gap-10 justify-around items-center bg-darkGray max-w-[1065px] min-h-[540px] ms-auto me-auto max-[1024px]:flex-col max-[1024px]:max-h-[540px]'>
<div className='flex gap-5'>
<div className='bg-lightGray h-[370px] w-[75px]'>
Card 1
@@ -19,18 +19,18 @@ const Modes = () => {
</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 '>
+ <h2 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'>
+ </h2>
+ <p 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>
+ </p>
</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 className='flex justify-end mr-[5%] transform: -translate-y-96'>
+ <div className='bg-deepPurple rounded-[50%] w-[496px] h-[485px] filter blur-[250px] opacity-40 animate-spin-slow'></div>
+ </div>
</div>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Navbar.jsx b/sth-frontend/src/features/landingpage/components/Navbar.jsx
index be6f708..79971a1 100644
--- a/sth-frontend/src/features/landingpage/components/Navbar.jsx
+++ b/sth-frontend/src/features/landingpage/components/Navbar.jsx
@@ -1,12 +1,18 @@
import React, {useState} from "react";
import {Link} from "react-router-dom";
+import menu from '../../../assets/svg/menu.svg'
const Navbar = () => {
const [darkMode, setDarkMode] = useState(true)
+ const [showMenu, setShowMenu] =useState(false)
const toggleDarkMode = () => {
setDarkMode(!darkMode)
};
+
+ const toggleMenu = () => {
+ setShowMenu(!showMenu)
+ }
const backgroundColorClasses = darkMode ? 'bg-darkGray': 'bg-lightGray';
const textClass = darkMode ? 'text-lightGray': 'text-darkGray';
@@ -17,21 +23,50 @@ const Navbar = () => {
<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'>
+ <button onClick={toggleMenu} className='hidden max-[1024px]:flex'>
+ <img src={menu} alt='Menu' className='w-6 h-6'/>
+ </button>
+ {showMenu && (
+ <div className="lg:hidden absolute top-16 left-0 right-0 bg-lightGray text-darkGray">
+ <ul className="flex flex-col items-start justify-start w-full px-4 py-2">
+ <li className="hover:underline hover:underline-offset-4 hover:decoration-2">
+ <Link to="/landingpage">
+ Home
+ </Link>
+ </li>
+ <li className="hover:underline hover:underline-offset-4 hover:decoration-2">
+ <Link to="/landingpage">
+ Tournaments
+ </Link>
+ </li>
+ <li className="hover:underline hover:underline-offset-4 hover:decoration-2">
+ <Link to="/landingpage">
+ Support
+ </Link>
+ </li>
+ <li className="hover:underline hover:underline-offset-4 hover:decoration-2">
+ <Link to="/landingpage">
+ Options
+ </Link>
+ </li>
+ </ul>
+ </div>
+ )}
<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'>
+ <div className='flex flex-col items-start justify-start flex-shrink-0 relative gap-2.5 p-2.5 max-[1024px]:hidden'>
<ul className='flex flex-row items-start justify-start flex-shrink-0 w-1/3 relative px-4 gap-8 text-xl'>
- <li>
+ <li className='hover:underline hover:underline-offset-4 hover:decoration-2'>
<Link to="/landingpage">Home</Link>
</li>
- <li>
+ <li className='hover:underline hover:underline-offset-4 hover:decoration-2'>
<Link to="/landingpage">Tournaments</Link>
</li>
- <li>
+ <li className='hover:underline hover:underline-offset-4 hover:decoration-2'>
<Link to="/landingpage">Support</Link>
</li>
- <li>
+ <li className='hover:underline hover:underline-offset-4 hover:decoration-2'>
<Link to="/landingpage">Options</Link>
</li>
</ul>
@@ -40,10 +75,11 @@ 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'>
- Create
+ <button
+ className='w-40 rounded-3xl border-2 border-lightGray px-12 py-2 bg-lightGray text-darkGray hover:bg-darkGray hover:text-lightGray bg-[#C2C2C2] hover: border-[#C2C2C2]'>
+ Register
</button>
- <button className='rounded-3xl border-2 px-12 py-2'>
+ <button className='w-40 rounded-3xl border-2 px-12 py-2 hover:bg-deepPurple'>
Login
</button>
</div>
diff --git a/sth-frontend/src/features/landingpage/components/Partner.jsx b/sth-frontend/src/features/landingpage/components/Partner.jsx
index 0dfabdc..398e1ef 100644
--- a/sth-frontend/src/features/landingpage/components/Partner.jsx
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -9,22 +9,21 @@ import hdmStuttgart from "../../../assets/svg/HdM Stuttgart.svg"
const PartnerImage = ({imgSrc, altText, itemName}) => (
- <div className='flex items-center justify-center gap-2 w-[165px] h-[24px]'>
+ <div className='flex items-center justify-center gap-2 max-w-[165px] min-h-[24px]'>
<img src={imgSrc} alt={altText} className='w-6 h-6'/>
<div className='text-xs text-Outfit-Medium font-medium'>{itemName}</div>
</div>
)
-
const Partner = () => {
return (
- <div className='w-[1065px] h-[285px] ml-[15%]'>
- <div className='flex flex-col items-center gap-9 w-[1065px] h-[285px]'>
+ <div className='max-w-[1065px] max-h-[285px] ms-auto me-auto bg-darkGray'>
+ <div className='flex flex-col items-center gap-9'>
<div className='flex justify-center text-lightGray text-7xl text-Outfit-ExtraBold font-bold mt-5'>
Our Partner
</div>
<div className='flex flex-col gap-9 text-lightGray mb-5'>
- <div className='flex flex-row justify-evenly w-[800px]'>
+ <div className='flex flex-row justify-between gap-40 flex-wrap max-lg:gap-4'>
<PartnerImage imgSrc={LeagueOfLegends} altText='Legaue of Legends'
itemName='Legaue of Legends'/>
<PartnerImage imgSrc={beerpongLeague} altText='Beerpong League' itemName='Beerpong League'/>
diff --git a/sth-frontend/tailwind.config.js b/sth-frontend/tailwind.config.js
index a9f5281..46cbb2d 100644
--- a/sth-frontend/tailwind.config.js
+++ b/sth-frontend/tailwind.config.js
@@ -11,6 +11,18 @@ module.exports = {
'deepPurple': '#916CFA',
'lightGray': '#D9D9D9',
},
+ keyframes: {
+ 'spin-slow': {
+ '0%, 100%': { backgroundColor: '#916CFA' },
+ '50%': { backgroundColor: '#916CFA', opacity: '80%' },
+ },
+ },
+ animation: {
+ 'spin-slow': 'spin-slow 8s linear infinite',
+ },
+ backgroundImage: {
+ 'hero-pattern': "url('/assets/svg/hero-pattern.svg')"
+ }
},
},
plugins: [],
--
GitLab