feat: add scroll button in project

app/projects/[slug]/page.jsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
 import jsonData from "../../../json/data.json";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -9,9 +10,48 @@ import NotFound from "@/app/not-found";
 import Image from "next/image";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+function ScrollDownButton() {
+  const [isAtBottom, setIsAtBottom] = useState(false);
+
+  const handleScroll = () => {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop < document.documentElement.scrollHeight - document.documentElement.clientHeight) {
+
+      window.scrollTo({
+        top: document.documentElement.scrollHeight,
+        behavior: "smooth",
+      });
+				setIsAtBottom(true);
+			
+    } else {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+			setIsAtBottom(false);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-5 left-0 right-0 flex justify-center items-center mb-10">
+      <motion.div
+        className="h-10 w-10 bg-neutral-900 rounded-full flex justify-center items-center cursor-pointer"
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        onClick={handleScroll}
+      >
+        <FontAwesomeIcon
+          icon={isAtBottom ? faChevronUp : faChevronDown}
+          className="text-white text-2xl"
+        />
+      </motion.div>
+    </div>
+  );
+}
 
-// function ScrollDownButton() {
-// 	render
 
 function Page({ params }) {
 	const [data, setData] = useState(null);
@@ -69,6 +109,7 @@ function Page({ params }) {
 					className="text-black pr-10"
 				/>
 			</FixedButon>
+			<ScrollDownButton />
 			<div className="min-h-screen flex justify-center items-center">
 				<div className="mx-auto grid grid-cols-1 md:grid-cols-2  mt-10 md:mt-0">
 					<div className="min-h-screen sm:min-h-0 flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">