feat: return to top arrow feature/button

components/Scroll-button/ScrollToTop.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    isVisible && (
+      <button
+        onClick={scrollToTop}
+        className="fixed bottom-8 right-4 sm:right-8 flex items-center gap-2 px-3 sm:px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-full shadow-lg hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 z-50"
+        style={{ fontSize: '0.875rem', lineHeight: '1.25rem' }}
+        aria-label="Scroll to top"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+          stroke="currentColor"
+          className="w-5 h-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 15l7-7 7 7"
+          />
+        </svg>
+        <span className="text-sm font-medium">Back to top</span>
+      </button>
+    )
+  );
+};
+
+export default ScrollToTop;

package.json

@@ -44,4 +44,4 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^3.0.24"
   }
-}
+}

pages/_app.js

@@ -3,6 +3,7 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import Navbar from '../components/Navbar/navbar';
 import Footer from '../components/Footer/footer';
+import ScrollToTopButton from '../components/Scroll-button/ScrollToTop';
 import { useState, useEffect } from 'react';
 
 function MyApp({ Component, pageProps }) {
@@ -19,8 +20,8 @@ function MyApp({ Component, pageProps }) {
   return (
       <div>
       <Navbar />
-
       <Component {...pageProps} />
+      <ScrollToTopButton/>
       <Footer />
       </div>
   );