From 9e3a3ac51d681e4c4dd0239e4c2dbe0a50a9d2ee Mon Sep 17 00:00:00 2001
From: unknown <sruthisruthi92901@gmail.com>
Date: Sun, 5 Oct 2025 15:22:15 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20Scroll=20To=20Bottom=20Butt?=
 =?UTF-8?q?om=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/App.js                         |  6 +++
 .../ScrollToBottom/ScrollToBottom.jsx         | 45 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 client/src/components/ScrollToBottom/ScrollToBottom.jsx

diff --git a/client/src/app/App.js b/client/src/app/App.js
index a5d7e862..b6dc62e0 100644
--- a/client/src/app/App.js
+++ b/client/src/app/App.js
@@ -40,8 +40,11 @@ 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";
 
 function App() {
+  const bottomRef = useRef(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -123,6 +126,9 @@ function App() {
                 <Chatbot />
                 <ComparisonModal />
                 <ComparisonButton />
+                
+                <div ref={bottomRef}></div>
+                <ScrollToBottomButton containerRef={bottomRef}/>
                 <Footer />
                 </Router>
               </ComparisonProvider>
diff --git a/client/src/components/ScrollToBottom/ScrollToBottom.jsx b/client/src/components/ScrollToBottom/ScrollToBottom.jsx
new file mode 100644
index 00000000..074e0255
--- /dev/null
+++ b/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;