add scroll button

components/Scrollbutton/ScrolButton.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+function ScrollButton() {
+  const [backToTopButton, setBackToTopButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 150) {
+        setBackToTopButton(true);
+      } else {
+        setBackToTopButton(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollUp = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className="fixed bottom-14 right-4 h-16 w-12 z-40">
+      {backToTopButton && (
+        <button
+          className="rounded-full transition-transform hover:-translate-y-2 duration-150 ease-in-out shadow-lg bg-white"
+          onClick={scrollUp}
+        >
+          <Image alt="scroll up" width={40} height={40} src="/img/scroll.svg" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default ScrollButton;

pages/index.js

@@ -16,6 +16,8 @@ import speakers from '../config/speakers.json';
 import Link from 'next/link';
 import Button from '../components/Buttons/button';
 import Dropdown from '../components/Dropdown/dropdown';
+import ScrollButton from '../components/Scrollbutton/ScrolButton'; // Adjust the import path if needed
+
 
 export default function Home() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
@@ -191,6 +193,7 @@ export default function Home() {
 			<div className='mt-5'>
 			<Subscription/>
 			</div>
+			<ScrollButton />
 		</div>
 		</div>
 	);