background lanterns 404

src/app/not-found.tsx

@@ -1,5 +1,12 @@
+import Lantern from "@/components/404Lanterns";
+
 const NotFound = () => {
-  return <div>404 Page Not Found</div>;
+  return (
+    <div>
+      404 Page Not Found
+      <Lantern />
+    </div>
+  );
 };
 
 export default NotFound;

src/components/404Lanterns.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Image from "next/image";
+import Lantern from "@/public/notfound/lantern404.webp";
+
+const LanternBackground = () => {
+  return (
+    <div>
+      <Image
+        src={Lantern}
+        alt="Lantern background"
+        className="w-70 absolute right-20 top-28"
+      />
+    </div>
+  );
+};
+
+export default LanternBackground;