Add scroll up arrow

app/components/ScrollUpArrow.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useEffect, useState } 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 (
+    <div>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-24 right-10 text-white rounded-full border hover:text-gray-500 transition-all text-xl z-10 w-6 h-6 hover:border-gray-500"
+        >
+          ^
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTop;

app/layout.tsx

@@ -4,6 +4,7 @@ import CalendlyScript from './components/CalendlyScript';
 import CrispScript from './components/CrispScript';
 import Footer from './components/Footer';
 import Navbar from './components/Navbar';
+import ScrollToTop from './components/ScrollUpArrow';
 import Tracking from './Tracking';
 
 export const metadata: Metadata = {
@@ -42,6 +43,7 @@ export default function RootLayout({
         <Navbar />
         {children}
         <Footer />
+        <ScrollToTop />
         <Tracking />
         <CalendlyScript />
         <CrispScript />