From 7391bd436a7d8415da7d59bec93a5dfbfd1a69a8 Mon Sep 17 00:00:00 2001
From: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
Date: Wed, 27 May 2026 12:10:21 +0530
Subject: [PATCH 1/3] feat: add Back to Top button for better navigation on
 long pages

Signed-off-by: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
---
 .../src/components/Layout/BackToTop.jsx       | 53 +++++++++++++++++++
 .../src/components/Layout/MainLayout.jsx      |  3 +-
 .../src/pages/LandingPage/index.jsx           |  3 +-
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-dashboard/src/components/Layout/BackToTop.jsx

diff --git a/apps/web-dashboard/src/components/Layout/BackToTop.jsx b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
new file mode 100644
index 000000000..f49967cd9
--- /dev/null
+++ b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+function BackToTop() {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setIsVisible(true);
+            } else {
+                setIsVisible(false);
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    const handleClick = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+    if (!isVisible) {
+        return null;
+    }
+    return (
+        <button
+            onClick={handleClick}
+            title="Back to Top"
+            style={{
+                position: 'fixed',
+                bottom: '2rem',
+                right: '2rem',
+                zIndex: 1000,
+                backgroundColor: '#00f5d4',
+                color: '#000',
+                border: 'none',
+                borderRadius: '50%',
+                width: '45px',
+                height: '45px',
+                fontSize: '1.2rem',
+                cursor: 'pointer',
+                boxShadow: '0 0 15px rgba(0, 245, 212, 0.4)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            ↑
+        </button>
+    );
+}
+export default BackToTop;
\ No newline at end of file
diff --git a/apps/web-dashboard/src/components/Layout/MainLayout.jsx b/apps/web-dashboard/src/components/Layout/MainLayout.jsx
index c4139efa4..a16bcc5c9 100644
--- a/apps/web-dashboard/src/components/Layout/MainLayout.jsx
+++ b/apps/web-dashboard/src/components/Layout/MainLayout.jsx
@@ -4,7 +4,7 @@ import Sidebar from './Sidebar';
 import Header from './Header';
 import ProjectNavbar from './ProjectNavbar';
 import { useLayout } from '../../context/LayoutContext';
-
+import BackToTop from './BackToTop';
 // Use the new official logo from public directory
 const logoImage = "https://cdn.jsdelivr.net/gh/yash-pouranik/urBackend@main/frontend/public/logo.png";
 
@@ -68,6 +68,7 @@ function MainLayout({ children }) {
                     {children}
                 </div>
             </div>
+            <BackToTop />
         </div>
     );
 }
diff --git a/apps/web-dashboard/src/pages/LandingPage/index.jsx b/apps/web-dashboard/src/pages/LandingPage/index.jsx
index 2d91cccba..55094e8f9 100644
--- a/apps/web-dashboard/src/pages/LandingPage/index.jsx
+++ b/apps/web-dashboard/src/pages/LandingPage/index.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
-
+import BackToTop from '../../components/Layout/BackToTop';
 import {
     Database,
     Shield,
@@ -907,6 +907,7 @@ function LandingPage() {
             </div>
 
             <Footer />
+            <BackToTop />
         </div>
     );
 }

From d10f2837109135eae08bc15b237b5192e9e93703 Mon Sep 17 00:00:00 2001
From: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
Date: Wed, 27 May 2026 13:18:20 +0530
Subject: [PATCH 2/3] fix: correct import path and address CodeRabbit review
 suggestions

Signed-off-by: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
---
 apps/web-dashboard/src/components/Layout/BackToTop.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/web-dashboard/src/components/Layout/BackToTop.jsx b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
index f49967cd9..49d59c975 100644
--- a/apps/web-dashboard/src/components/Layout/BackToTop.jsx
+++ b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
+
 function BackToTop() {
     const [isVisible, setIsVisible] = useState(false);
+
     useEffect(() => {
         const handleScroll = () => {
             if (window.scrollY > 300) {
@@ -9,24 +11,30 @@ function BackToTop() {
                 setIsVisible(false);
             }
         };
+
         window.addEventListener('scroll', handleScroll);
+
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
     }, []);
+
     const handleClick = () => {
         window.scrollTo({
             top: 0,
             behavior: 'smooth'
         });
     };
+
     if (!isVisible) {
         return null;
     }
+
     return (
         <button
             onClick={handleClick}
             title="Back to Top"
+            aria-label="Back to Top"
             style={{
                 position: 'fixed',
                 bottom: '2rem',
@@ -50,4 +58,5 @@ function BackToTop() {
         </button>
     );
 }
+
 export default BackToTop;
\ No newline at end of file

From 75f4dc07b6345eea8c841862dfd037e68d064114 Mon Sep 17 00:00:00 2001
From: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
Date: Thu, 28 May 2026 23:46:43 +0530
Subject: [PATCH 3/3] fix: address CodeRabbit review - throttle scroll, use
 Lucide icon, add hover effect

Signed-off-by: Vaishnavi Thakur <vaaishnavi4713@gmail.com>
---
 .../src/components/Layout/BackToTop.jsx       | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/web-dashboard/src/components/Layout/BackToTop.jsx b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
index 49d59c975..cd298b5f9 100644
--- a/apps/web-dashboard/src/components/Layout/BackToTop.jsx
+++ b/apps/web-dashboard/src/components/Layout/BackToTop.jsx
@@ -1,18 +1,25 @@
 import { useState, useEffect } from 'react';
+import { ArrowUp } from 'lucide-react';
 
 function BackToTop() {
     const [isVisible, setIsVisible] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
 
     useEffect(() => {
+        let ticking = false;
+
         const handleScroll = () => {
-            if (window.scrollY > 300) {
-                setIsVisible(true);
-            } else {
-                setIsVisible(false);
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    setIsVisible(window.scrollY > 300);
+                    ticking = false;
+                });
+                ticking = true;
             }
         };
 
         window.addEventListener('scroll', handleScroll);
+        handleScroll();
 
         return () => {
             window.removeEventListener('scroll', handleScroll);
@@ -35,6 +42,8 @@ function BackToTop() {
             onClick={handleClick}
             title="Back to Top"
             aria-label="Back to Top"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
             style={{
                 position: 'fixed',
                 bottom: '2rem',
@@ -46,15 +55,16 @@ function BackToTop() {
                 borderRadius: '50%',
                 width: '45px',
                 height: '45px',
-                fontSize: '1.2rem',
                 cursor: 'pointer',
                 boxShadow: '0 0 15px rgba(0, 245, 212, 0.4)',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                transition: 'transform 0.2s ease',
             }}
         >
-            ↑
+            <ArrowUp size={20} strokeWidth={2.5} />
         </button>
     );
 }