From 2f0bad7a31378c650894e3cffebaa8377b251318 Mon Sep 17 00:00:00 2001
From: Zaiba Machhaliya <zaibamachhaliya@gmail.com>
Date: Fri, 14 Aug 2026 22:39:07 +0530
Subject: [PATCH 1/2] feat: add back to top button

---
 src/App.jsx                         |  3 ++
 src/components/layout/BackToTop.jsx | 70 +++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/layout/BackToTop.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 94f8d27..af218a6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,8 @@ import GovernancePage  from './pages/GovernancePage'
 import SettingsPage    from './pages/SettingsPage'
 import Footer from './components/layout/Footer'
 import Support from './pages/Support'
+import BackToTop from './components/layout/BackToTop'
+
 
 function Layout({ children }) {
   return (
@@ -22,6 +24,7 @@ function Layout({ children }) {
       <Navbar />
       <RateLimitBanner />
       <main style={{ flex: 1 }}>{children}</main>
+      <BackToTop />
       <Footer />
     </div>
   )
diff --git a/src/components/layout/BackToTop.jsx b/src/components/layout/BackToTop.jsx
new file mode 100644
index 0000000..b728fac
--- /dev/null
+++ b/src/components/layout/BackToTop.jsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { FaArrowUp } from "react-icons/fa6";
+
+export default function BackToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={scrollToTop}
+      aria-label="Back to top"
+      title="Back to top"
+      style={{
+        position: "fixed",
+        bottom: "24px",
+        right: "24px",
+        zIndex: 50,
+        width: "42px",
+        height: "42px",
+        borderRadius: "50%",
+        border: "1px solid var(--border)",
+        background: "var(--surface)",
+        color: "var(--accent)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)",
+        transition: "all 0.2s ease",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = "var(--accent)";
+        e.currentTarget.style.color = "var(--surface)";
+        e.currentTarget.style.transform = "translateY(-2px)";
+        e.currentTarget.style.boxShadow = "0 6px 18px rgba(0, 0, 0, 0.25)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = "var(--surface)";
+        e.currentTarget.style.color = "var(--accent)";
+        e.currentTarget.style.transform = "translateY(0)";
+        e.currentTarget.style.boxShadow = "0 4px 14px rgba(0, 0, 0, 0.2)";
+      }}
+    >
+      <FaArrowUp size={16} />
+    </button>
+  );
+}
\ No newline at end of file

From 6a9a72fd5859d86af137921dc234b0ab20e09479 Mon Sep 17 00:00:00 2001
From: Zaiba Machhaliya <zaibamachhaliya@gmail.com>
Date: Fri, 14 Aug 2026 22:51:46 +0530
Subject: [PATCH 2/2] fix: initialize back to top visibility

---
 src/components/layout/BackToTop.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layout/BackToTop.jsx b/src/components/layout/BackToTop.jsx
index b728fac..45eee0d 100644
--- a/src/components/layout/BackToTop.jsx
+++ b/src/components/layout/BackToTop.jsx
@@ -10,6 +10,7 @@ export default function BackToTop() {
     };
 
     window.addEventListener("scroll", handleScroll);
+    handleScroll();
 
     return () => {
       window.removeEventListener("scroll", handleScroll);