From 88aea9d7faba08cf4b7f1c8061adce7ced208d34 Mon Sep 17 00:00:00 2001
From: Julian <julianao@stud.ntnu.no>
Date: Tue, 17 Sep 2024 12:26:21 +0200
Subject: [PATCH] Scrolldown icon is clickable

---
 src/components/home/ScrollDownIcon.tsx | 10 ++++++++--
 src/pages/home.tsx                     |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/home/ScrollDownIcon.tsx b/src/components/home/ScrollDownIcon.tsx
index 1239877..6fe93e4 100644
--- a/src/components/home/ScrollDownIcon.tsx
+++ b/src/components/home/ScrollDownIcon.tsx
@@ -20,14 +20,20 @@ const ScrollDownIcon = () => {
     };
   }, []); // Tom dependency array betyr at effekten kjøres ved mount og cleanup ved unmount
 
+  const handleClick = (targetId: string) => {
+    const targetElement = document.getElementById(targetId);
+    targetElement?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <div
       className={clsx(
-        'flex justify-center items-center h-[10px] sticky bottom-10',
+        'flex justify-center items-center h-[10px] sticky bottom-10 cursor-pointer w-16 m-auto p-5 group',
         !isVisible && 'hidden',
       )}
+      onClick={() => handleClick('home-text')}
     >
-      <span className="border-solid border-white border-r-[5px] border-b-[5px] p-[6px] animate-bounceArrow"></span>
+      <span className="border-solid border-white group-hover:border-gray-500 transition border-r-[5px] border-b-[5px] p-[6px] animate-bounceArrow"></span>
     </div>
   );
 };
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index dfc46fc..a7c9a23 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -12,7 +12,7 @@ const HomePage = () => (
       <ScrollDownIcon />
     </div>
     <h1 className="my-4 mt-10 text-2xl md:hidden">Online Fondet</h1>
-    <div className="w-3/4 mb-10 text-lg text-justify">{homeText}</div>
+    <div id="home-text" className="w-3/4 py-20 text-lg text-justify">{homeText}</div>
     <PerformanceDisplay />
     <div className="hidden w-full mb-10 md:block">
       <div className="w-full mt-40 mb-10 text-lg text-center">