Feat: To add topbar Arrow that auto scroll-up on home page .

client/package.json

@@ -23,6 +23,7 @@
     "react-icons": "^5.5.0",
     "react-router-dom": "^6.30.1",
     "recharts": "^3.0.2",
+    "styled-components": "^6.1.19",
     "tailwindcss": "^4.1.10"
   },
   "devDependencies": {

client/src/App.jsx

@@ -28,6 +28,7 @@ function App() {
       <Footer />
     </div>
   );
+
 }
 
 export default App;

client/src/components/ThemeToggle.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+const ThemeToggle = () => {
+
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    useEffect(() => {
+        if( localStorage.getItem('theme') === 'dark' ){
+            document.documentElement.classList.add('dark');
+            setIsDarkMode(true);
+        }
+
+    },[])
+    const toggleTheme = () => {
+        if(isDarkMode){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+            setIsDarkMode(false);
+        }else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+            setIsDarkMode(true);
+        }
+    }
+    return (
+         <button onClick={toggleTheme} className="p-1 cursor-pointer hover:bg-slate-500 rounded-lg transition-colors duration-300">
+
+            {!isDarkMode ?  (<Sun className="h-6 w-6 text-yellow-300"/>) : (<Moon className="h-6 w-6 text-blue-700 hover:transform-fill"/>)
+            }
+         </button>
+    )
+};
+
+export default ThemeToggle;

client/src/components/TopBar.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect } from "react";
+import { ArrowBigUp } from "lucide-react";
+import Styled from "styled-components";
+
+const OnTopBar = () => {
+  const [isvisible, setIsVisible] = React.useState(false);
+  const [scrollProgress, setScrollProgress] = React.useState(0);
+
+  const onTopbtn = () => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    });
+  };
+
+  // Updated scroll handler to calculate progress
+  const handleScroll = () => {
+    const winScroll =  document.documentElement.scrollTop;
+    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrolled = (winScroll / height) * 100;
+
+    setScrollProgress(scrolled);
+
+    if (window.scrollY > 100) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <Container>
+      <div className="progress-bar" style={{ width: `${scrollProgress}%` }} />
+      {isvisible && (
+        <div className="on-top-bar" onClick={onTopbtn}>
+          <ArrowBigUp />
+        </div>
+      )}
+    </Container>
+  );
+};
+
+const Container = Styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 2px;
+    background: #00abff;
+
+  }
+
+  .on-top-bar {
+    position: fixed;
+    bottom: 20px;
+    right: 18px;
+    background-color: #fff;
+    color: #1a1a1a;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      background-color: #0039ff;
+    }
+  }
+`;
+
+export default OnTopBar;

client/src/styles/index.css

@@ -31,3 +31,13 @@ html {
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #056896;
 }
+
+:body {
+  background-color: #1a1a1a;
+  color: #f3f4f6;
+}
+
+.dark {
+  background-color: #f3f4f6;
+  color: #1a1a1a;
+}