[feat] add back button

app/about/layout.jsx

@@ -1,4 +1,3 @@
-// generate layour with footer
 import Footer from "@/components/Footer";
 
 export const metadata = {
@@ -7,9 +6,8 @@ export const metadata = {
 export default function Layout({ children }) {
   return (
     <>
-
       {children}
       <Footer />
     </>
   );
-}
+}

app/about/page.jsx

@@ -4,6 +4,11 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
 import Image from "next/legacy/image";
+import FixedButon from "@/components/FixedButton";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+
 
 // images
 import Me1 from "@/public/img/me1.jpg";
@@ -15,9 +20,19 @@ export default function Page() {
 		window.scrollTo(0, 0);
 	}, []);
 
+	
+	const handleBack = () => {
+		window.history.back();
+	};
 	return (
 		<>
 			<main className="overflow-hidden">
+				<FixedButon onClick={handleBack}>
+					<FontAwesomeIcon
+						icon={faChevronLeft}
+						className="text-black pr-10"
+					/>
+				</FixedButon>
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div

app/projects/page.jsx

@@ -20,6 +20,9 @@ import UnmuhJember from "@/public/projects/unmuh/unmuh1.png";
 import Porto from "@/public/projects/porto/porto1.png";
 
 import Hr from "@/components/Hr";
+import FixedButon from "@/components/FixedButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 const projects = [
 	{
@@ -85,10 +88,18 @@ export default function Page() {
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, []);
-
+	const handleBack = () => {
+		window.history.back();
+	};
 	return (
 		<>
 			<main className="overflow-hidden">
+				<FixedButon onClick={handleBack}>
+					<FontAwesomeIcon
+						icon={faChevronLeft}
+						className="text-black pr-10"
+					/>
+				</FixedButon>
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div

components/FixedButton.jsx

@@ -0,0 +1,9 @@
+const FixedButton = ({ children, onClick }) => (
+  <button
+  onClick={onClick}
+    className="fixed top-2 -left-2 md:left-10 flex justify-center items-center  rounded-full p-4  transition duration-300 ease-in-out z-50 transparent">
+    {children}
+  </button>
+);
+
+export default FixedButton;

components/Navbar.jsx

@@ -178,7 +178,7 @@ const Navbar = () => {
 					isNavOpen ? "bg-transparent" : "backdrop-filter backdrop-blur-md"
 				} inset-0  bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div className="">
-					<h1 className="text-2xl">Alvalens</h1>
+					<h1 className="text-2xl ml-2 md:ml-0">Alvalens</h1>
 				</div>
 				<div className="flex flex-row items-center">
 					<button