From fc67d950d6fd589941f490867ebf5744cc412c12 Mon Sep 17 00:00:00 2001
From: lseidel <ls250@hdm-stuttgart.de>
Date: Wed, 17 Jan 2024 19:06:59 +0100
Subject: [PATCH] 17.01.2024 - fixing Landingpage components, added Card
Carousel and Card Flips, adding responsiveness to the Landingpage rewrite
some Components #12
---
.../src/features/landingpage/Landingpage.jsx | 1 -
.../landingpage/components/Features.jsx | 62 +++++++---
.../features/landingpage/components/Modes.jsx | 110 +++++++++++++++---
.../landingpage/components/Partner.jsx | 6 +-
4 files changed, 141 insertions(+), 38 deletions(-)
diff --git a/sth-frontend/src/features/landingpage/Landingpage.jsx b/sth-frontend/src/features/landingpage/Landingpage.jsx
index 8d7f8bb..7629c69 100644
--- a/sth-frontend/src/features/landingpage/Landingpage.jsx
+++ b/sth-frontend/src/features/landingpage/Landingpage.jsx
@@ -11,7 +11,6 @@ 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 ceb6ccf..5ad6180 100644
--- a/sth-frontend/src/features/landingpage/components/Features.jsx
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -1,31 +1,63 @@
-import React from "react";
+import React, {useState} from "react";
import people from "../../../assets/svg/people.svg"
import stars from "../../../assets/svg/stars.svg"
import tournament from "../../../assets/svg/tournament.svg"
+import peopleCard from "../../../assets/images/alex-shuper-aXgYJtVA3A8-unsplash.jpg"
+import tournamentCard from "../../../assets/images/igor-omilaev-ToxUgLe7tpE-unsplash.jpg"
+import starsCard from "../../../assets/images/jigar-panchal-4slT2XvKnio-unsplash.jpg"
-const Highlights = ({imgSrc, imgAlt, desc}) => (
- <div className='flex flex-col items-center max-w-[345px] min-h-[250px] bg-lightGray rounded-2xl'>
+const Highlights = ({imgSrc, imgAlt, desc, handleFlipState}) => (
+ <div onClick={handleFlipState}
+ 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}
</div>
</div>
-);
+)
+
+const CardFlip = ({imgSrc, imgSrc2, imgAlt, desc, desc2}) => {
+
+ const [flipState, setFlipState] = useState(false);
+
+ const handleFlipState = () => {
+ setFlipState(!flipState)
+ }
+
+ return (
+ <div className='flex flex-col max-w-[345px] min-h-[250px]'>
+ {flipState ? (
+ <Highlights imgSrc={imgSrc} imgAlt={imgAlt} desc={desc} handleFlipState={handleFlipState}/>
+ ) : (
+ <button onClick={handleFlipState}
+ className='border-2 border-lightGray rounded-2xl w-[345px] h-full bg-cover relative max-lg:h-[250px]'
+ style={{backgroundImage: `url(${imgSrc2})`}}>
+ <div
+ className='absolute bottom-0 left-0 right-0 p-4 text-4xl text-lightGray border-t-2 border-lightGray rounded-2xl'>{desc2}</div>
+ </button>
+ )}
+ </div>
+ )
+};
const Features = () => {
return (
- <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>
- <div className='flex gap-2'>
- <Highlights imgSrc={people} imgAlt='People' desc='Bring People together and Game'/>
- <Highlights imgSrc={tournament} imgAlt='Tournament'
- desc='Create your type of Tournament and let our Engine handle your Experience. Anything is possible'/>
- <Highlights imgSrc={stars} imgAlt='Stars'
- desc='Bring on your Winner of the Tournament and give out MVP Medals for the best Players'/>
- </div>
+ <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 items-center text-darkGray font-Outfit-ExtraBold font-bold text-7xl uppercasen m-auto'>
+ How it works
</div>
+ <div className='flex gap-2 max-lg:flex max-lg:flex-col m-auto'>
+ <CardFlip imgSrc={people} imgAlt='People' imgSrc2={peopleCard} desc2='People'
+ desc='Bring People together and Game'/>
+ <CardFlip imgSrc={tournament} imgAlt='Tournament' imgSrc2={tournamentCard}
+ desc='Create your type of Tournament and let our Engine handle your Experience. Anything is possible'
+ desc2='Tournament'/>
+ <CardFlip imgSrc={stars} imgAlt='Stars' imgSrc2={starsCard}
+ desc='Bring on your Winner of the Tournament and give out MVP Medals for the best Players'
+ desc2='Stars'/>
+ </div>
+ </div>
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Modes.jsx b/sth-frontend/src/features/landingpage/components/Modes.jsx
index 29bb1b6..a920c7e 100644
--- a/sth-frontend/src/features/landingpage/components/Modes.jsx
+++ b/sth-frontend/src/features/landingpage/components/Modes.jsx
@@ -1,35 +1,107 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
+import Pic1 from '../../../assets/images/siviwe-kapteyn-tCvDVszXdHE-unsplash.jpg'
+import Pic2 from '../../../assets/images/devin-avery-lhAy4wmkjSk-unsplash.jpg'
+import Pic3 from '../../../assets/images/jed-villejo-pumko2FFxY0-unsplash.jpg'
+
+const arrSlides = [{url: Pic1, text:'Handles well'}, {url: Pic2, text: 'Sun is shining'}, {url: Pic3}]
+
+const Card = () => {
+ const [currentSlide, setCurrentSlide] = useState(0)
+ const [progress, setProgress] = useState(0)
+
+ const handleNext = () => {
+ setCurrentSlide((prevSlide) => (prevSlide + 1) % arrSlides.length)
+ setProgress(0)
+ }
+
+ const handlePrevious = () => {
+ setCurrentSlide((prevSlide) => (prevSlide - 1 + arrSlides.length) % arrSlides.length)
+ setProgress(0)
+ }
+
+ const switchToNextCard = () => {
+ setCurrentSlide((prevSlide) => (prevSlide + 1) % arrSlides.length)
+ setProgress(0)
+ };
+
+ useEffect(() => {
+ const intervalId = setInterval(switchToNextCard, 5000)
+ return () => clearInterval(intervalId)
+ }, []);
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ setProgress((prevProgress) => {
+ const newProgress = prevProgress + (100/5000) * 100
+ return newProgress >= 100 ? 0 : newProgress
+ })
+ }, 100)
+
+ return() => clearInterval(intervalId)
+ }, []);
+
+ return (
+ <div className='flex flex-col items-center'>
+ <div className='flex items-center'>
+ <button
+ className='bg-lightGray text-darkGray px-2 py-1 mx-2 rounded-full z-10 max-lg:hidden'
+ onClick={handlePrevious}>
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+ stroke="currentColor" className="w-6 h-6">
+ <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
+ </svg>
+ </button>
+ <div className='flex gap-5 relative z-10'>
+ {arrSlides.map((slide, index) => (
+ <div
+ key={index}
+ className={`bg-lightGray h-[370px] w-[75px] bg-cover rounded-2xl cursor-pointer text-deepPurple text-2xl text-center ${
+ index === currentSlide ? 'scale-110 w-[320px]' : ''
+ } transition-transform duration-300`}
+ style={{backgroundImage: `url(${slide.url})`}}
+ >{slide.text}
+ </div>
+ ))}
+ </div>
+ <button
+ className='bg-lightGray text-darkGray px-2 py-1 rounded-full cursor-pointer z-10 mx-2 max-lg:hidden'
+ onClick={handleNext}>
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+ stroke="currentColor" className="w-6 h-6">
+ <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+ </svg>
+ </button>
+ </div>
+ <div className='mt-10 mb-2 w-80'>
+ <div
+ className='h-2 bg-deepPurple rounded-2xl'
+ style={{width: `${progress}%`}}
+ ></div>
+ </div>
+ </div>
+ )
+}
+
const Modes = () => {
return (
<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
- </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 gap-10 justify-around items-center bg-darkGray max-w-[1065px] min-h-[540px] ms-auto me-auto max-lg:flex-col max-lg:max-h-[540px] max-lg:items-center max-lg:justify-center'>
+ <Card/>
<div className='flex flex-col w-[525px] h-[370px] gap-10'>
- <h2 className='text-lightGray font-Outfit-ExtraBold font-bold text-7xl uppercase '>
+ <h2 className='text-lightGray font-Outfit-ExtraBold font-bold text-7xl uppercase m-auto'>
Everything <br/> is possible
</h2>
- <p className='text-lightGray font-Outfit-Regular font-medium text-xl max-w-md'>
+ <p className='text-lightGray font-Outfit-Regular font-medium text-xl max-w-md m-auto'>
Create any Type of Tournament possible. With our new Tournament Engine
everything is in the Hand of you. Grab your Friends and lets GAME
</p>
</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
+ 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/Partner.jsx b/sth-frontend/src/features/landingpage/components/Partner.jsx
index 398e1ef..f99a65b 100644
--- a/sth-frontend/src/features/landingpage/components/Partner.jsx
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -1,6 +1,6 @@
import React from "react";
import LeagueOfLegends from "../../../assets/svg/League of Legends.svg"
-import beerpongLeague from "../../../assets/svg/beerpong league.svg"
+import BeerpongLeague from "../../../assets/svg/beerpong league.svg"
import apple from "../../../assets/svg/apple.svg"
import mercedes from "../../../assets/svg/mercedes.svg"
import paypal from "../../../assets/svg/PayPal.svg"
@@ -22,11 +22,11 @@ const Partner = () => {
<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-col gap-9 text-lightGray mb-5 m-auto'>
<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'/>
+ <PartnerImage imgSrc={BeerpongLeague} altText='Beerpong League' itemName='Beerpong League'/>
<PartnerImage imgSrc={hdmStuttgart} altText='HDM Stuttgart' itemName='HdM Stuttgart'/>
<PartnerImage imgSrc={mercedes} altText='Mercedes' itemName='Mercedes-Benz'/>
</div>
--
GitLab