first commit

components/ScrollToTop.jsx

@@ -0,0 +1,47 @@
+'use client'
+
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Top: 0 takes us all the way back to the top of the page
+  // Behavior: smooth keeps it smooth!
+  const scrollToTop = () => {
+    if (typeof window !== "undefined") {
+      window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+    }
+    
+  };
+
+  useEffect(() => {
+    // Button is displayed after scrolling for 500 pixels
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 500) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <div>
+          <button className="scroll-top " onClick={scrollToTop}>
+            <Image width={17} height={17} src="/images/icon/chevron-w.png" alt="icon" />
+          </button>
+        </div>
+      )}
+    </>
+  );
+}