✨ Added Scroll To Bottom Buttom feature

client/src/app/App.js

@@ -41,11 +41,17 @@ import ResetPassword from '../components/Authentication/ResetPassword/ResetPassw
 import ContactUs from "../routes/ContactUs";
 import RecentlyViewedSection from "../components/RecentlyViewedSection";
 import PageNotFound from '../components/PageNotFound/PageNotFound';
+
+import ScrollToBottomButton from "../components/ScrollToBottom/ScrollToBottom.jsx";
+import { useRef } from "react";
+
 import InventoryManagement from '../components/Admin/InventoryManagement/InventoryManagement';
 import CartPage from "../routes/CartPage";
 
 
+
 function App() {
+  const bottomRef = useRef(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -130,6 +136,9 @@ function App() {
                 <Chatbot />
                 <ComparisonModal />
                 <ComparisonButton />
+
+                <div ref={bottomRef}></div>
+                <ScrollToBottomButton containerRef={bottomRef}/>
                 <Footer />
                 </Router>
               </ComparisonProvider>

client/src/components/ScrollToBottom/ScrollToBottom.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+const ScrollToBottomButton = ({ containerRef }) => {
+  const handleClick = () => {
+    containerRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{
+        position: "fixed",
+        bottom: "20px",
+        left: "20px",
+        width: "60px",
+        height: "60px",
+        borderRadius: "50%",
+        backgroundColor: "#FFD700", // bright yellow like your screenshot
+        color: "#fff",
+        border: "none",
+        cursor: "pointer",
+        fontSize: "28px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 4px 12px rgba(255, 215, 0, 0.6)", // glowing effect
+        transition: "all 0.3s ease",
+        zIndex: 1000,
+      }}
+      onMouseEnter={(e) => {
+        e.target.style.transform = "scale(1.1)";
+        e.target.style.boxShadow = "0 0 20px rgba(255, 215, 0, 0.9)";
+      }}
+      onMouseLeave={(e) => {
+        e.target.style.transform = "scale(1)";
+        e.target.style.boxShadow = "0 4px 12px rgba(255, 215, 0, 0.6)";
+      }}
+      title="Scroll to Bottom"
+    >
+      ⬇
+    </button>
+  );
+};
+
+export default ScrollToBottomButton;