From 00f3af5206e5280a00ca246127fa729027ee7410 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Mon, 1 Jul 2024 08:43:34 +0200 Subject: [PATCH] feat: add link to last popup --- index.html | 2 +- .../components/homepage/HomepageOverlay.tsx | 29 +++++++++++++++---- src/tsx/components/sections/Advantages.tsx | 2 +- src/tsx/pages/ProjectPage.tsx | 10 +++++++ 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index df1c6ff..27987ba 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/tsx/components/homepage/HomepageOverlay.tsx b/src/tsx/components/homepage/HomepageOverlay.tsx index cc7e688..f4ea075 100644 --- a/src/tsx/components/homepage/HomepageOverlay.tsx +++ b/src/tsx/components/homepage/HomepageOverlay.tsx @@ -3,28 +3,47 @@ import Arrow from "../../icons/Arrow"; import HomepageOverlayIcons from "./HomepageOverlayIcons"; import WelcomeCard from "../cards/WelcomeCard"; +interface Popup { + label: string; + shortName: string; + description: JSX.Element; +} + interface HomepageOverlayProps { initialLoad: boolean; isOverlayVisible: boolean; onClose: () => void; } -const popups = [ +const popups: Popup[] = [ { 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." + 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." + 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." - } + description: ( + <> + Die gemessenen Sensordaten werden mittels wissenschaftlichen, mathematischen Daten interpretiert und in Empfehlungen umgewandelt. Dies wird alles auf ein Dashboard dargestellt. + Zu den Vorteilen + + ), + }, ]; const HomepageOverlay: React.FC = ({ initialLoad, isOverlayVisible, onClose }) => { diff --git a/src/tsx/components/sections/Advantages.tsx b/src/tsx/components/sections/Advantages.tsx index 11b9e65..e8dec16 100644 --- a/src/tsx/components/sections/Advantages.tsx +++ b/src/tsx/components/sections/Advantages.tsx @@ -20,7 +20,7 @@ function Advantages() { ]; return ( -
+

Alle weiteren Funktionen und Vorteile im Überblick. diff --git a/src/tsx/pages/ProjectPage.tsx b/src/tsx/pages/ProjectPage.tsx index 0f721bd..171bccf 100644 --- a/src/tsx/pages/ProjectPage.tsx +++ b/src/tsx/pages/ProjectPage.tsx @@ -10,6 +10,16 @@ function ProjectPage() { document.title = "Projekt | Green Ecolution | Smartes Grünflächenmanagement"; }, []); + useEffect(() => { + const hash = window.location.hash; + if (hash) { + const element = document.getElementById(hash.substring(1)); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + } + }, []); + const heroHeadline = "Alles wissenswerte über das Projekt"; const heroDescription = "Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. Eu deserunt laboris dolore elit. Aliquip magna do nostrud velit esse anim do. Dolor culpa duis laboris nisi ea nulla nulla magna"