feat: Added a "Scroll to top" button Matching to Website Design Theme

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Poppins } from "next/font/google";
 import { Metadata } from "next";
 import ReduxProvider from "@/redux/ReduxProvider";
 import { Toaster } from "sonner";
+import ScrollToTop from "@/components/ScrollToTop/scrolltotop";
 
 import { Providers } from "./providers";
 
@@ -63,6 +64,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <Providers>
           <ReduxProvider>{children}</ReduxProvider>
         </Providers>
+        <ScrollToTop />
       </body>
     </html>
   );

src/components/ScrollToTop/scrolltotop.css

@@ -0,0 +1,27 @@
+.scroll-to-top {
+    position: fixed;
+    bottom: 35px;
+    right: 20px;
+    z-index: 1000;
+  }
+
+  .scroll-to-top-button {
+    background-color: rgb(240 46 101);
+    border: none;
+    color: white;
+    padding: 10px;
+    border-radius: 50px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    font-size: 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.3s, visibility 0.3s;
+  }
+
+  .scroll-to-top-button:hover {
+    opacity: 1;
+    background-color: #FF5A7B;
+    transform: scale(1.1); 
+  }
+

src/components/ScrollToTop/scrolltotop.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import './scrolltotop.css';
+
+const ScrollToTop: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 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="scroll-to-top">
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-to-top-button">
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTop;

yarn.lock

@@ -356,6 +356,11 @@
   dependencies:
     glob "7.1.7"
 
+"@next/[email protected]":
+  version "13.5.4"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz"
+  integrity sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -856,7 +861,7 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"appwrite-gen@file:C:\\Users\\milky_33vggyi\\palettegram\\appwrite-gen":
+"appwrite-gen@file:C:\\Users\\hp\\Documents\\GitHub\\palettegram\\appwrite-gen":
   version "1.0.0"
   resolved "file:appwrite-gen"
   dependencies: