+
);
};
diff --git a/src/app/components/ScrollToTopButton.jsx b/src/app/components/ScrollToTopButton.jsx
new file mode 100644
index 00000000..9b923d1a
--- /dev/null
+++ b/src/app/components/ScrollToTopButton.jsx
@@ -0,0 +1,42 @@
+"use client";
+import { useEffect, useState } from "react";
+import { FaArrowUp } from "react-icons/fa";
+
+const ScrollToTopButton = () => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+
+ // Set the button visibility based on scroll position
+ setIsVisible(scrollTop > 100);
+ };
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ };
+
+ useEffect(() => {
+ // Add scroll event listener when component mounts
+ window.addEventListener("scroll", handleScroll);
+
+ // Remove scroll event listener when component unmounts
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ return (
+
+
+
+ );
+};
+
+export default ScrollToTopButton;
diff --git a/src/app/globals.css b/src/app/globals.css
index fd81e885..25686a55 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,3 +25,28 @@ body {
)
rgb(var(--background-start-rgb));
}
+
+.menu {
+ font-family: Verdana, sans-serif;
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background-color: #007bff;
+ color: #fff;
+ font-size: 18px;
+ padding: 10px;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s, visibility 0.3s;
+}
+
+.scroll-to-top.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
diff --git a/src/app/layout.js b/src/app/layout.js
index c93f8061..768a3d25 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,17 +1,21 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import ScrollToTopButton from "./components/ScrollToTopButton";
+import "./globals.css";
+import { Inter } from "next/font/google";
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
-}
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
export default function RootLayout({ children }) {
return (
- {children}
+
+ {children}
+
+
- )
+ );
}