From dea639d78f0caee50231d785ca9692afe6ff3d12 Mon Sep 17 00:00:00 2001
From: Shruti Gupta <202151151@iiitvadodara.ac.in>
Date: Fri, 13 Oct 2023 23:58:12 +0530
Subject: [PATCH] scroll to top button added

---
 src/components/home/BackToTopButton.js | 39 ++++++++++++++++++++++++++
 src/pages/index.js                     |  2 ++
 2 files changed, 41 insertions(+)
 create mode 100644 src/components/home/BackToTopButton.js

diff --git a/src/components/home/BackToTopButton.js b/src/components/home/BackToTopButton.js
new file mode 100644
index 00000000..205ea0cc
--- /dev/null
+++ b/src/components/home/BackToTopButton.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { ArrowUpIcon } from '@heroicons/react/outline'
+
+function BackToTopButton() {
+    const [backToTopButton, setBackToTopButton] = useState(false);
+
+    useEffect(() =>{
+        window.addEventListener("scroll", () => {
+            if(window.scrollY > 100){
+                setBackToTopButton(true)
+            } else{
+                setBackToTopButton(false)
+            }
+        })
+    }, [])
+
+    const scrollUp = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        })
+    }
+
+    return (
+        <div>
+            {backToTopButton && (
+            
+                <button onClick={scrollUp} className ="fixed bottom-12 right-12 w-12 h-12 text-5xl text-white bg-sky-500  rounded-full flex items-center justify-center hover:shadow-xl hover:ring-2 hover:ring-rose-500 hover:ring-offset-2 focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:bg-gray-700" > <ArrowUpIcon className="h-8 w-8" /> </button>
+                
+                
+            )}
+            
+
+        </div>
+    )
+}
+
+export default BackToTopButton;
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index a81da218..b3fe2c33 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,3 +1,4 @@
+import BackToTopButton from '@/components/home/BackToTopButton'
 import { BigText, InlineCode, Paragraph, Widont } from '@/components/home/common'
 import { Features } from '@/components/home/Features'
 import { Footer } from '@/components/home/Footer'
@@ -125,6 +126,7 @@ export default function Home() {
       <Testimonials />
       <Support />
       <div className="mx-auto max-w-screen-lg space-y-20 sm:space-y-32 md:space-y-40 lg:space-y-44 xl:max-w-screen-xl"></div>
+      <BackToTopButton />
       <Footer />
     </div>
   )