scroll to top is added

frontend/package.json

@@ -14,7 +14,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.2",
+    "clsx": "^2.1.1",
     "dompurify": "^3.1.4",
+    "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import Loader from "./components/Loader";
 import ContactUs from "./pages/ContactUs";
 import About from "./pages/About";
 import Policy from "./pages/Policy";
+import GoTop from "./components/GoTop";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -26,8 +27,8 @@ function App() {
       <RecoilRoot>
         <React.Suspense fallback={<Loader/>}>
           <Navbar />
-
-          <div className="min-h-[80vh] mt-12 pt-12" >
+          <GoTop/>
+          <div className="min-h-[80vh] mt-12 pt-12">
             <Routes>
               <Route path="/app" element={<Home />} />
               <Route path="/app/posts/:id" element={<Post />} />

frontend/src/components/GoTop.tsx

@@ -0,0 +1,43 @@
+//scroll to top
+import React, { useState, useEffect } from 'react';
+
+const GoTop: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div className="fixed bottom-5 right-5 z-50">
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition-all duration-300"
+        >
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default GoTop;