Feature/scrool to top

frontend/package.json

@@ -22,6 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "styled-components": "^6.1.13",
     "three": "^0.168.0"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import FAQPage from './pages/FAQPage'
 import Navbar from './components/Navbar'
 import CreateNFT from './pages/CreateNFTPage'
 import NotFoundPage from './components/NotFoundPage'
+import ScrollToTop from './components/ScrollToTop'
 function App() {
     const [wallet, setWallet] = useState(null)
     useEffect(() => {
@@ -46,6 +47,7 @@ function App() {
                     </Routes>
                 </div>
             </div>
+            <ScrollToTop></ScrollToTop>
         </BrowserRouter>
     )
 }

frontend/src/components/ScrollToTop.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+
+const ScrollToTop = () => {
+    const [isVisible, setIsVisible] = useState(false)
+
+    // Toggle visibility based on scroll position
+    const toggleVisibility = () => {
+        if (window.pageYOffset > 150) {
+            setIsVisible(true)
+        } else {
+            setIsVisible(false)
+        }
+    }
+
+    // Scroll to top function
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        })
+    }
+
+    // Add event listener for scroll changes
+    useEffect(() => {
+        window.addEventListener('scroll', toggleVisibility)
+        return () => window.removeEventListener('scroll', toggleVisibility)
+    }, [])
+
+    return (
+        <div>
+            {isVisible && (
+                <button
+                    onClick={scrollToTop}
+                    className="fixed bottom-7 right-3 w-12 h-12 bg-customPurple text-white rounded-full shadow-md hover:shadow-lg hover:scale-105 transition duration-300 flex items-center justify-center"
+                >
+                    <span className="text-4xl font-bold text-black">↑</span>
+                </button>
+            )}
+        </div>
+    )
+}
+
+export default ScrollToTop

frontend/tailwind.config.js

@@ -1,10 +1,11 @@
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+    theme: {
+        extend: {
+            colors: {
+                customPurple: 'rgba(219, 118, 247, 1)',
+            },
+        },
+    },
+    plugins: [],
 }