From bff9d42cab0d36d35e6ce08ca5c260d08d77cd12 Mon Sep 17 00:00:00 2001
From: nethmalgunawardhana <nethmalgunawardhana@gmail.com>
Date: Tue, 26 Nov 2024 06:32:31 +0530
Subject: [PATCH 1/2] Add BackToTopButton component for improved navigation and
 user experience

---
 src/app/page.tsx                  |  3 +-
 src/components/ui/back-to-top.tsx | 49 +++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/back-to-top.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ad81281..1145361 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -42,7 +42,7 @@ import Lottie from "react-lottie-player";
 import { IContact } from "@/interfaces/IContacts";
 import { getReachUs } from "@/services/reachus.service";
 import RegistrationStatus from "@/components/ui/google-gemini-effect";
-
+import BackToTopButton from "@/components/ui/back-to-top";
 export const products = [
   {
     title: "Are You Ready?",
@@ -291,6 +291,7 @@ export default function Home() {
 
   return (
     <RootLayout>
+       <BackToTopButton />
       <FloatingNav navItems={navItms} />
          { ( isLoading || !isLoadingAnimComplete ) && (
             <div className="fixed inset-0 z-50 flex items-center justify-center bg-white dark:bg-[#545576]">
diff --git a/src/components/ui/back-to-top.tsx b/src/components/ui/back-to-top.tsx
new file mode 100644
index 0000000..f254593
--- /dev/null
+++ b/src/components/ui/back-to-top.tsx
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowUpIcon } from '@heroicons/react/24/solid';
+
+const BackToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  // Show button when page is scrolled up to given distance
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll to top when button is clicked
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  useEffect(() => {
+    // Add scroll event listener
+    window.addEventListener('scroll', toggleVisibility);
+
+    // Clean up the event listener
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <button 
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 z-50 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition-all duration-300 ease-in-out"
+          aria-label="Scroll to top"
+        >
+          <ArrowUpIcon className="h-6 w-6" />
+        </button>
+      )}
+    </>
+  );
+};
+
+export default BackToTopButton;
\ No newline at end of file

From 5c8d04de49bd774660fcd7462b5e8b0d6dbd9084 Mon Sep 17 00:00:00 2001
From: nethmalgunawardhana <nethmalgunawardhana@gmail.com>
Date: Tue, 26 Nov 2024 16:37:49 +0530
Subject: [PATCH 2/2] Add smooth scrolling behavior and update BackToTopButton
 styling for better visibility

---
 src/app/globals.css               | 4 +++-
 src/components/ui/back-to-top.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7110efb..4680eaa 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -59,4 +59,6 @@
     --chart-5: 340 75% 55%;
   }
 }
-
+html {
+  scroll-behavior: smooth;
+}
diff --git a/src/components/ui/back-to-top.tsx b/src/components/ui/back-to-top.tsx
index f254593..899ccc8 100644
--- a/src/components/ui/back-to-top.tsx
+++ b/src/components/ui/back-to-top.tsx
@@ -36,7 +36,7 @@ const BackToTopButton: React.FC = () => {
       {isVisible && (
         <button 
           onClick={scrollToTop}
-          className="fixed bottom-6 right-6 z-50 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition-all duration-300 ease-in-out"
+          className="fixed bottom-6 right-6 z-50 bg-gray-700 text-white p-3 rounded-full shadow-lg hover:bg-gray-900 transition-all duration-300 ease-in-out"
           aria-label="Scroll to top"
         >
           <ArrowUpIcon className="h-6 w-6" />