adding go back button to pages expect home page of course

src/App.jsx

@@ -1,12 +1,14 @@
-import React, { lazy, Suspense, useState } from "react";
+import { lazy, Suspense, useState } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Route, Routes } from "react-router-dom";
+import { Link, Route, Routes, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 // layout
 import Header from "@/layouts/header";
 // components
 import Starfield from "react-starfield";
 import Cursor from "./components/Cursor";
 import Loading from "./components/ui/Loading";
+import GoBack from "./components/ui/GoBack";
 // Data
 import menus from "./pages/tree-view/data";
 
@@ -49,6 +51,7 @@ const ScrollToSection = lazy(() => import("./pages/ScrollToSection"));
 
 function App() {
   const [cursorVariant, setCursorVariant] = useState("default");
+  const location = useLocation();
 
   return (
     <ThemeProvider defaultTheme="dark" storageKey="ui-theme">
@@ -62,6 +65,7 @@ function App() {
       </div>
 
       <Header setCursorVariant={setCursorVariant} />
+      {location.pathname !== "/React-Projects/" && <GoBack />}
       <Suspense fallback={<Loading />}>
         <Routes>
           <Route path="React-Projects">

src/components/ui/GoBack.jsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import { FaArrowLeft } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+const GoBack = () => {
+  return (
+    <Link
+      className={`flex items-center gap-1 fixed top-[20px] z-[0] left-0 px-2 xl:px-4`}
+      to={"React-Projects/"}
+    >
+      <FaArrowLeft className="fill-foreground text-[16px] xl:text-[14px] 2xl:text-[18px]" />
+      <Button
+        className="p-0 text-foreground hidden xl:block 2xl:text-[20px] font-light"
+        variant="link"
+      >
+        Back
+      </Button>
+    </Link>
+  );
+};
+
+export default GoBack;

src/layouts/header.jsx

@@ -17,7 +17,7 @@ const Header = memo(function Header({ setCursorVariant }) {
   const { theme } = useWhatTheme();
 
   return (
-    <header className="bg-background px-6 py-3 max-h-[60px] w-full">
+    <header className="bg-background px-6 py-3 max-h-[60px] w-full z-50">
       <div className="container flex justify-between items-center max-sm:p-0">
         <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           <Logo />