feat: add link to last popup

green-ecolution · Jul 1, 2024 · 00f3af5 · 00f3af5
1 parent d6891f3
commit 00f3af5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="de">
+<html lang="de" class="scroll-smooth scroll-pt-40">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git 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.
+                <a href="/projekt#vorteile" className="text-green-dark-900 underline underline-offset-2 transition-all ease-in-out duration-300 hover:text-green-light-900"> Zu den Vorteilen</a>
+            </>
+        ),
+    },
 ];
 
 const HomepageOverlay: React.FC<HomepageOverlayProps> = ({ initialLoad, isOverlayVisible, onClose }) => {

diff --git a/src/tsx/components/sections/Advantages.tsx b/src/tsx/components/sections/Advantages.tsx
@@ -20,7 +20,7 @@ function Advantages() {
     ];
 
     return (
-        <section className="px-4 max-w-208 mx-auto my-28 md:px-6 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-6 lg:gap-10 lg:my-36 lg:max-w-screen-lg xl:my-52 xl:max-w-screen-xl">
+        <section id="vorteile" className="px-4 max-w-208 mx-auto my-28 md:px-6 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-6 lg:gap-10 lg:my-36 lg:max-w-screen-lg xl:my-52 xl:max-w-screen-xl">
             <article className="mb-8 lg:mb-14">
                 <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
                     Alle weiteren Funktionen und Vorteile im Überblick.

diff --git 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"