From b0e579d4b6530b9203c70eb60ca443a28ee96778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Tue, 18 Jun 2024 14:00:06 +0200 Subject: [PATCH 01/19] feat: add homepage overlay --- src/tsx/components/homepage/HomepageHero.tsx | 64 ++++++++++--------- .../components/homepage/HomepageOverlay.tsx | 57 +++++++++++++++++ src/tsx/components/homepage/HomepageTrees.tsx | 39 +++++++++++ 3 files changed, 129 insertions(+), 31 deletions(-) create mode 100644 src/tsx/components/homepage/HomepageOverlay.tsx create mode 100644 src/tsx/components/homepage/HomepageTrees.tsx diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx index 14cd281..ee1dea1 100644 --- a/src/tsx/components/homepage/HomepageHero.tsx +++ b/src/tsx/components/homepage/HomepageHero.tsx @@ -1,9 +1,27 @@ -import Lottie from "lottie-react"; -import treeLightGreenAnimation from "../../../json/treeLightGreenAnimation.json"; -import treeMiddleGreenAnimation from "../../../json/treeMiddleGreenAnimation.json" -import treeDarkGreenAnimation from "../../../json/treeDarkGreenAnimation.json" +import { useState, useEffect } from "react"; +import Arrow from "../../icons/Arrow"; +import HomepageOverlay from "./HomepageOverlay"; +import HomepageTrees from "./HomepageTrees"; function HompageHero() { + const [isOverlayVisible, setIsOverlayVisible] = useState(false); + + const handleButtonClick = () => { + setIsOverlayVisible(true); + }; + + const handleCloseOverlay = () => { + setIsOverlayVisible(false); + }; + + useEffect(() => { + isOverlayVisible + ? document.body.classList.add('overflow-hidden') + : document.body.classList.remove('overflow-hidden'); + + return () => { document.body.classList.remove('overflow-hidden') }; + }, [isOverlayVisible]); + return (
@@ -11,39 +29,23 @@ function HompageHero() {

Wir machen smarte Bewässerung von Bäumen und Beeten möglich!

-

+

Ut cillum minim eu duis cupidatat culpa proident voluptate sint aute mollit nulla velit voluptate. Consequat occaecat adipisicing culpa.

+
- - - - - - - + + + {isOverlayVisible && }
); } diff --git a/src/tsx/components/homepage/HomepageOverlay.tsx b/src/tsx/components/homepage/HomepageOverlay.tsx new file mode 100644 index 0000000..1894554 --- /dev/null +++ b/src/tsx/components/homepage/HomepageOverlay.tsx @@ -0,0 +1,57 @@ +import { useState } from "react"; +import Arrow from "../../icons/Arrow"; + +interface HomepageOverlayProps { + onClose: () => void; +} + +const HomepageOverlay: React.FC = ({ onClose }) => { + const popups = [ + { + label: "Messung des Bewässerungsstand", + shortName: "Bewässerungsstand", + description: "Die Bodenfeuchte um den Wurzelballen herum wird in drei (30cm, 60cm und 90cm) unterschiedlichen Bodentiefen gemessen. Daraus lässt sich erschließen, wie feucht der Boden auch in tieferen Bodenschichten ist." + }, + { + label: "Übertragung der Daten", + shortName: "Datenübertragung", + description: "Die Daten werden mithilfe von öffentlichen LoRaWAN (Long Range Wide Area Network) Zugängen übermittelt." + }, + { + label: "Handlungsempfehlungen", + shortName: "Handlungsempfehlungen", + description: "Die gemessenen Sensordaten werden mittels wissenschaftlichen, mathematischen Daten interpretiert und in Empfehlungen umgewandelt. Dies wird alles auf ein Dashboard dargestellt." + }, + ]; + + const [currentPopupIndex, setCurrentPopupIndex] = useState(0); + + const handleNextClick = () => { + currentPopupIndex < popups.length - 1 + ? setCurrentPopupIndex(currentPopupIndex + 1) + : onClose(); + }; + + const currentPopup = popups[currentPopupIndex]; + + return ( +
+
+ Info {currentPopupIndex + 1} von {popups.length}: {currentPopup.shortName} +

{currentPopup.label}

+

{currentPopup.description}

+
+ +
+
+
+ ); +} + +export default HomepageOverlay; diff --git a/src/tsx/components/homepage/HomepageTrees.tsx b/src/tsx/components/homepage/HomepageTrees.tsx new file mode 100644 index 0000000..7092daf --- /dev/null +++ b/src/tsx/components/homepage/HomepageTrees.tsx @@ -0,0 +1,39 @@ +import Lottie from "lottie-react"; +import treeLightGreenAnimation from "../../../json/treeLightGreenAnimation.json"; +import treeMiddleGreenAnimation from "../../../json/treeMiddleGreenAnimation.json"; +import treeDarkGreenAnimation from "../../../json/treeDarkGreenAnimation.json"; + +function HomepageTrees() { + return ( +
+ + + + + + + +
+ ); +} + +export default HomepageTrees; From 0a5db731a04b61e9c90c4804915c38caaab5ff05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Tue, 18 Jun 2024 15:13:26 +0200 Subject: [PATCH 02/19] feat: add hero homepage overlay with popups (wip) --- public/assets/svg/general/gateway.svg | 10 ++++ public/assets/svg/general/mobile.svg | 3 ++ public/assets/svg/general/sensor.svg | 4 -- public/assets/svg/general/tensiometer.svg | 5 ++ public/assets/svg/general/wlan.svg | 3 ++ src/tsx/components/homepage/HomepageHero.tsx | 47 ++++++++++--------- src/tsx/components/homepage/HomepageIcons.tsx | 41 ++++++++++++++++ .../components/homepage/HomepageOverlay.tsx | 42 +++++++++++------ 8 files changed, 115 insertions(+), 40 deletions(-) create mode 100644 public/assets/svg/general/gateway.svg create mode 100644 public/assets/svg/general/mobile.svg delete mode 100644 public/assets/svg/general/sensor.svg create mode 100644 public/assets/svg/general/tensiometer.svg create mode 100644 public/assets/svg/general/wlan.svg create mode 100644 src/tsx/components/homepage/HomepageIcons.tsx diff --git a/public/assets/svg/general/gateway.svg b/public/assets/svg/general/gateway.svg new file mode 100644 index 0000000..abee0a6 --- /dev/null +++ b/public/assets/svg/general/gateway.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/svg/general/mobile.svg b/public/assets/svg/general/mobile.svg new file mode 100644 index 0000000..464574a --- /dev/null +++ b/public/assets/svg/general/mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/svg/general/sensor.svg b/public/assets/svg/general/sensor.svg deleted file mode 100644 index ae62985..0000000 --- a/public/assets/svg/general/sensor.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/assets/svg/general/tensiometer.svg b/public/assets/svg/general/tensiometer.svg new file mode 100644 index 0000000..a20895f --- /dev/null +++ b/public/assets/svg/general/tensiometer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/svg/general/wlan.svg b/public/assets/svg/general/wlan.svg new file mode 100644 index 0000000..983dd99 --- /dev/null +++ b/public/assets/svg/general/wlan.svg @@ -0,0 +1,3 @@ + diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx index ee1dea1..cde446a 100644 --- a/src/tsx/components/homepage/HomepageHero.tsx +++ b/src/tsx/components/homepage/HomepageHero.tsx @@ -23,28 +23,31 @@ function HompageHero() { }, [isOverlayVisible]); return ( -
-
-
-

- Wir machen smarte Bewässerung von Bäumen und Beeten möglich! -

-

- Ut cillum minim eu duis cupidatat culpa proident voluptate sint aute mollit nulla velit voluptate. - Consequat occaecat adipisicing culpa. -

- -
-
- - - +
+
+
+
+

+ Wir machen smarte Bewässerung von Bäumen und Beeten möglich! +

+

+ Ut cillum minim eu duis cupidatat culpa proident voluptate sint aute mollit nulla velit voluptate. + Consequat occaecat adipisicing culpa. +

+ +
+
+ + +
{isOverlayVisible && }
); diff --git a/src/tsx/components/homepage/HomepageIcons.tsx b/src/tsx/components/homepage/HomepageIcons.tsx new file mode 100644 index 0000000..de40234 --- /dev/null +++ b/src/tsx/components/homepage/HomepageIcons.tsx @@ -0,0 +1,41 @@ +function HomepageIcons() { + return ( +
+ + + + + + + + + +
+ ); +} + +export default HomepageIcons; diff --git a/src/tsx/components/homepage/HomepageOverlay.tsx b/src/tsx/components/homepage/HomepageOverlay.tsx index 1894554..c3e3b4b 100644 --- a/src/tsx/components/homepage/HomepageOverlay.tsx +++ b/src/tsx/components/homepage/HomepageOverlay.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import Arrow from "../../icons/Arrow"; +import HomepageIcons from "./HomepageIcons"; interface HomepageOverlayProps { onClose: () => void; @@ -35,21 +36,34 @@ const HomepageOverlay: React.FC = ({ onClose }) => { const currentPopup = popups[currentPopupIndex]; return ( -
-
- Info {currentPopupIndex + 1} von {popups.length}: {currentPopup.shortName} -

{currentPopup.label}

-

{currentPopup.description}

-
- +
+
+
+ Info {currentPopupIndex + 1} von {popups.length}: {currentPopup.shortName} +

{currentPopup.label}

+

{currentPopup.description}

+
+ +
-
+ + + +
); } From c4f7f57a1345d235dc549ff6bbdaf7e4676ba21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Tue, 18 Jun 2024 15:38:53 +0200 Subject: [PATCH 03/19] feat: add animations to icons --- public/assets/svg/general/tensiometer.svg | 11 ++-- src/tsx/components/homepage/HomepageIcons.tsx | 51 +++++++++++++++--- .../components/homepage/HomepageOverlay.tsx | 52 ++++++++++--------- 3 files changed, 78 insertions(+), 36 deletions(-) diff --git a/public/assets/svg/general/tensiometer.svg b/public/assets/svg/general/tensiometer.svg index a20895f..9a9b45e 100644 --- a/public/assets/svg/general/tensiometer.svg +++ b/public/assets/svg/general/tensiometer.svg @@ -1,5 +1,8 @@ - - - - + + + + + + + diff --git a/src/tsx/components/homepage/HomepageIcons.tsx b/src/tsx/components/homepage/HomepageIcons.tsx index de40234..602e6c8 100644 --- a/src/tsx/components/homepage/HomepageIcons.tsx +++ b/src/tsx/components/homepage/HomepageIcons.tsx @@ -1,35 +1,72 @@ -function HomepageIcons() { +interface HomepageIconsProps { + index: number; +} + +const HomepageIcons: React.FC = ({ index }) => { + const generalClasses = "absolute rounded-full flex items-center justify-center before:bg-white/30 before:absolute before:-z-10 before:rounded-full"; + return (
-
); } From 0a3f4e7f32ca319195af381e9aca701ff82e111b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Tue, 18 Jun 2024 16:20:41 +0200 Subject: [PATCH 04/19] fix: add lines to overlay (wip) --- src/tsx/components/homepage/HomepageHero.tsx | 2 +- src/tsx/components/homepage/HomepageIcons.tsx | 6 +++--- src/tsx/components/homepage/HomepageOverlay.tsx | 17 ++++++++--------- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx index cde446a..dd98b1c 100644 --- a/src/tsx/components/homepage/HomepageHero.tsx +++ b/src/tsx/components/homepage/HomepageHero.tsx @@ -37,7 +37,7 @@ function HompageHero() { Consequat occaecat adipisicing culpa.

- + + - + ); diff --git a/src/tsx/components/homepage/HomepageIcons.tsx b/src/tsx/components/homepage/HomepageOverlayIcons.tsx similarity index 76% rename from src/tsx/components/homepage/HomepageIcons.tsx rename to src/tsx/components/homepage/HomepageOverlayIcons.tsx index c4f52a5..3462e94 100644 --- a/src/tsx/components/homepage/HomepageIcons.tsx +++ b/src/tsx/components/homepage/HomepageOverlayIcons.tsx @@ -1,10 +1,18 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; -interface HomepageIconsProps { +interface HomepageOverlayIconsProps { index: number; + delay: number; } -const HomepageIcons: React.FC = ({ index }) => { +const HomepageOverlayIcons: React.FC = ({ index, delay }) => { + const [initialDelayOver, setInitialDelayOver] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { setInitialDelayOver(true) }, delay); + return () => clearTimeout(timer); + }, []); + const icons = [ { figureClasses: "top-[20%] left-[10%] w-28 h-28 before:w-36 before:h-36 after:absolute after:top-[130%] after:w-1 after:h-[calc(80vh-28rem)]", @@ -53,15 +61,15 @@ const HomepageIcons: React.FC = ({ index }) => { className={`absolute rounded-full flex items-center justify-center bg-white bg-opacity-0 transition-opacity duration-300 ease-in-out before:bg-white/30 before:transition-transform before:duration-300 before:ease-in-out before:absolute before:-z-10 before:rounded-full after:absolute after:border-dotted after:transition-opacity after:duration-300 after:ease-in-out ${key > 2 ? 'after:border-t-[6px] after:border-t-white' : 'after:border-l-[6px] after:border-l-white'} ${icon.figureClasses} - ${icon.activeOnIndex.includes(index) ? 'bg-opacity-100 before:animate-pulse before:scale-100 after:opacity-100' : 'before:scale-90 after:opacity-0'}`} + ${initialDelayOver ? (icon.activeOnIndex.includes(index) ? 'bg-opacity-100 before:animate-pulse before:scale-100 after:opacity-100' : 'before:scale-90 after:opacity-0') : 'bg-opacity-100 before:animate-pulse before:scale-100 after:opacity-100'}`} > + className={`object-contain ${icon.imageClasses} transition-opacity duration-300 ease-in-out ${initialDelayOver ? (icon.activeOnIndex.includes(index) ? 'opacity-100' : 'opacity-0') : 'opacity-100'}`} /> ))} ); } -export default HomepageIcons; +export default HomepageOverlayIcons; From 3008590af3e0d4c47da5e930465327bc6cdc9a52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sat, 22 Jun 2024 10:22:40 +0200 Subject: [PATCH 10/19] fix: close overlay on resize --- src/tsx/components/homepage/HomepageHero.tsx | 19 +++++++++++++++++-- .../components/homepage/HomepageHeroTrees.tsx | 2 +- .../components/homepage/HomepageOverlay.tsx | 2 +- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx index e0ac641..7dec7dc 100644 --- a/src/tsx/components/homepage/HomepageHero.tsx +++ b/src/tsx/components/homepage/HomepageHero.tsx @@ -3,7 +3,7 @@ import Arrow from "../../icons/Arrow"; import HomepageOverlay from "./HomepageOverlay"; import HomepageHeroTrees from "./HomepageHeroTrees"; -function HompageHero() { +function HomepageHero() { const [isOverlayVisible, setIsOverlayVisible] = useState(false); const handleButtonClick = () => { @@ -14,6 +14,20 @@ function HompageHero() { setIsOverlayVisible(false); }; + useEffect(() => { + const handleResize = () => { + if (window.matchMedia('(max-width: 1280px)').matches) { + setIsOverlayVisible(false); + } + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + useEffect(() => { if (isOverlayVisible) { window.scrollTo({ top: 0, behavior: 'smooth' }); @@ -51,9 +65,10 @@ function HompageHero() { + {isOverlayVisible && } ); } -export default HompageHero; +export default HomepageHero; diff --git a/src/tsx/components/homepage/HomepageHeroTrees.tsx b/src/tsx/components/homepage/HomepageHeroTrees.tsx index 183bc20..8b47b28 100644 --- a/src/tsx/components/homepage/HomepageHeroTrees.tsx +++ b/src/tsx/components/homepage/HomepageHeroTrees.tsx @@ -19,7 +19,7 @@ function HomepageHeroTrees() { animationData={treeLightGreenAnimation} /> -