Custom 404 page

- Created a `not-found.tsx` file
- Added an Image for the custom
   page.
- re installed react-icons package
   (It was giving some errors)

Author: rohann06

package.json

@@ -42,5 +42,8 @@
   },
   "engines": {
     "node": ">=18.17.0"
+  },
+  "dependencies": {
+    "react-icons": "^5.3.0"
   }
 }

packages/nextjs/app/not-found.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+const NotFound = () => {
+  return (
+    <main className=" text-center">
+      <div className="  h-[500px] md:w-auto my-[100px]">
+        <Image alt=" 404image" src={"/404.svg"} height={300} width={300} className=" overflow-hidden h-full w-full" />
+        <p className=" text-sm font-light">
+          Go back to the{" "}
+          <Link href={"/"}>
+            {" "}
+            <span className=" font-normal underline text-primary-content text-base">Home Page</span>{" "}
+          </Link>{" "}
+        </p>
+      </div>
+    </main>
+  );
+};
+
+export default NotFound;

packages/nextjs/public/404.svg

@@ -12019,6 +12019,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "react-icons@npm:5.3.0"
+  peerDependencies:
+    react: "*"
+  checksum: 3aa5f50e05aafc6d31e0d995fe0d98560069aa88717b24ce8aaa082a7e7b20ca95e1e19d847ed6e52d658a5a30e15826af20d7554bf993a743edd55586db62e3
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -12680,6 +12689,7 @@ __metadata:
   dependencies:
     husky: ^8.0.1
     lint-staged: ^13.0.3
+    react-icons: ^5.3.0
   languageName: unknown
   linkType: soft