Add scroll-to-top button and scroll restoration

src/App.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
 import Navbar from './components/Navbar/Navbar';
 import HeroSection from './components/HeroSection/HeroSection';
 import FeatureCards from './components/FeatureCards/FeatureCards';
@@ -10,12 +11,17 @@ import WhoItsFor from './components/WhoItsFor/WhoItsFor';
 import BecomeASpeaker from './components/BecomeASpeaker/BecomeASpeaker';
 import PlanAhead from './components/PlanAhead/PlanAhead';
 import Engagement from './components/Engagement/Engagement';
-// import CTASection from './components/CTASection/CTASection';
 import Partners from './components/Partners/Partners';
 import Footer from './components/Footer/Footer';
 import TicketSection from './components/Ticket/TicketSection';
+
 import LeaderboardPage from './pages/LeaderboardPage';
 
+import ScrollToTop from "./components/ScrollToTop";
+import ScrollRestoration from "./components/ScrollRestoration";
+
+
+
 function HomePage() {
   return (
     <>
@@ -29,24 +35,35 @@ function HomePage() {
       <BecomeASpeaker />
       <PlanAhead />
       <Engagement />
-
     </>
   );
 }
 
+
+
 function App() {
   return (
     <Router>
+
+      {/* Always open pages from top when route changes */}
+      <ScrollRestoration />
+
       <div className="app">
         <Navbar />
+
         <main>
           <Routes>
             <Route path="/" element={<HomePage />} />
             <Route path="/ticket" element={<TicketSection />} />
             <Route path="/leaderboard" element={<LeaderboardPage />} />
           </Routes>
         </main>
+
         <Footer />
+
+        {/* Floating scroll button */}
+        <ScrollToTop />
+
       </div>
     </Router>
   );

src/components/ScrollRestoration.jsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollRestoration() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "instant",
+    });
+  }, [pathname]);
+
+  return null;
+}

src/components/ScrollToTop.jsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+export default function ScrollToTop() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollTop}
+      aria-label="Scroll to top"
+      style={{
+        position: "fixed",
+        bottom: "24px",
+        right: "24px",
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        border: "none",
+        background: "#111",
+        color: "#fff",
+        fontSize: "18px",
+        cursor: "pointer",
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(20px)",
+        transition: "all 0.25s ease",
+        pointerEvents: visible ? "auto" : "none",
+        zIndex: 1000,
+      }}
+    >
+      ↑
+    </button>
+  );
+}