feat: add back to top button

src/App.jsx

@@ -15,13 +15,16 @@ 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 (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
       <Navbar />
       <RateLimitBanner />
       <main style={{ flex: 1 }}>{children}</main>
+      <BackToTop />
       <Footer />
     </div>
   )

src/components/layout/BackToTop.jsx

@@ -0,0 +1,71 @@
+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);
+    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>
+  );
+}