From b49ad2faac02ca29672eafadb046c857ce9467d2 Mon Sep 17 00:00:00 2001
From: rahulrr-coder <rahulrr5002@protonmail.com>
Date: Mon, 20 Oct 2025 12:51:30 +0530
Subject: [PATCH 1/5] style: Update scroll-to-top button appearance and
 positioning

---
 src/components/scroll/bottom-to-top.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/scroll/bottom-to-top.tsx b/src/components/scroll/bottom-to-top.tsx
index 3b11d860..065f97da 100644
--- a/src/components/scroll/bottom-to-top.tsx
+++ b/src/components/scroll/bottom-to-top.tsx
@@ -30,7 +30,8 @@ export default function ScrollBottomToTop() {
     showButton && (
       <button
         onClick={scrollToTop}
-        className="fixed right-5 bottom-20 z-50 cursor-pointer rounded-lg border-none bg-blue-600 p-2.5 text-white opacity-80 shadow-md transition-opacity duration-300 hover:bg-blue-700 hover:opacity-100"
+        className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-all duration-300 hover:scale-110 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+        style={{ backgroundColor: "var(--ifm-color-primary)" }}
       >
         <FaArrowUp />
       </button>

From d2b949a6f12b3f7f21b6fc7c4e02565cca2ed7fe Mon Sep 17 00:00:00 2001
From: rahulrr-coder <rahulrr5002@protonmail.com>
Date: Mon, 20 Oct 2025 12:51:59 +0530
Subject: [PATCH 2/5] fix: Remove unused ScrollTopToBottom component from Home
 page

---
 src/pages/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 02895a95..c48ab78b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
 import Head from "@docusaurus/Head";
 import Header from "../components/header/header";
 import ScrollBottomToTop from "../components/scroll/bottom-to-top";
-import ScrollTopToBottom from "../components/scroll/top-to-bottom";
+
 import { BlogCarousel } from "../components/blogCarousel/blogCarousel";
 import OurProjects from "../components/ourProjects";
 import TopMateSection from "../components/topmate/TopMateSection";
@@ -108,7 +108,6 @@ export default function Home(): ReactNode {
             <FAQs />
           </div>
 
-          <ScrollTopToBottom />
           <ScrollBottomToTop />
         </main>
       </div>

From 5390a644af8df3ff18a17ffce5070beb4adcaa79 Mon Sep 17 00:00:00 2001
From: rahulrr-coder <rahulrr5002@protonmail.com>
Date: Mon, 20 Oct 2025 12:52:13 +0530
Subject: [PATCH 3/5] fix: Remove ScrollTopToBottom component to streamline
 codebase

---
 src/components/scroll/top-to-bottom.tsx | 41 -------------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 src/components/scroll/top-to-bottom.tsx

diff --git a/src/components/scroll/top-to-bottom.tsx b/src/components/scroll/top-to-bottom.tsx
deleted file mode 100644
index 98b2bbdf..00000000
--- a/src/components/scroll/top-to-bottom.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { FaArrowDown } from "react-icons/fa";
-
-export default function ScrollTopToBottom() {
-  const [showButton, setShowButton] = useState(false);
-
-  const scrollToBottom = () => {
-    window.scrollTo({
-      top: document.documentElement.scrollHeight,
-      behavior: "smooth",
-    });
-  };
-
-  const handleScroll = () => {
-    const bottomThreshold =
-      document.documentElement.scrollHeight - window.innerHeight - 100;
-    if (window.scrollY < bottomThreshold) {
-      setShowButton(true);
-    } else {
-      setShowButton(false);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
-  return (
-    showButton && (
-      <button
-        onClick={scrollToBottom}
-        className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-lg border-none bg-green-600 p-2.5 text-white opacity-80 shadow-md transition-opacity duration-300 hover:bg-green-700 hover:opacity-100"
-      >
-        <FaArrowDown />
-      </button>
-    )
-  );
-}

From fc3f71237d92338405b4ef0d08da8c7226627d71 Mon Sep 17 00:00:00 2001
From: rahulrr-coder <rahulrr5002@protonmail.com>
Date: Mon, 20 Oct 2025 13:58:19 +0530
Subject: [PATCH 4/5] fix: Refactor scroll-to-top button visibility logic and
 clean up code

---
 src/components/scroll/bottom-to-top.tsx | 45 +++++++++++++------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/scroll/bottom-to-top.tsx b/src/components/scroll/bottom-to-top.tsx
index 065f97da..1c77295e 100644
--- a/src/components/scroll/bottom-to-top.tsx
+++ b/src/components/scroll/bottom-to-top.tsx
@@ -1,8 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FaArrowUp } from "react-icons/fa";
 
 export default function ScrollBottomToTop() {
-  const [showButton, setShowButton] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
 
   const scrollToTop = () => {
     window.scrollTo({
@@ -11,30 +19,25 @@ export default function ScrollBottomToTop() {
     });
   };
 
-  const handleScroll = () => {
-    if (window.scrollY > 300) {
-      setShowButton(true);
-    } else {
-      setShowButton(false);
-    }
-  };
-
   useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", toggleVisibility);
+
     return () => {
-      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", toggleVisibility);
     };
   }, []);
 
   return (
-    showButton && (
-      <button
-        onClick={scrollToTop}
-        className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-all duration-300 hover:scale-110 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
-        style={{ backgroundColor: "var(--ifm-color-primary)" }}
-      >
-        <FaArrowUp />
-      </button>
-    )
+    <div className="scroll-to-top">
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+          style={{ backgroundColor: "var(--ifm-color-primary)" }}
+        >
+          <FaArrowUp />
+        </button>
+      )}
+    </div>
   );
 }

From ad819d059e83eb1b8749f8f7c961d0da9d960e3e Mon Sep 17 00:00:00 2001
From: rahulrr-coder <rahulrr5002@protonmail.com>
Date: Mon, 20 Oct 2025 13:58:43 +0530
Subject: [PATCH 5/5] fix: Move ScrollBottomToTop component outside of main for
 better structure

---
 src/pages/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c48ab78b..292442b9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -107,10 +107,9 @@ export default function Home(): ReactNode {
           <div className="m-4">
             <FAQs />
           </div>
-
-          <ScrollBottomToTop />
         </main>
       </div>
+      <ScrollBottomToTop />
     </Layout>
   );
 }