app/not-found.tsx

@@ -0,0 +1,19 @@
+"use client";
+import Lottie from "react-lottie";
+import * as animationData from "./not-found-animation.json";
+
+export default function NotFound() {
+  return (
+    <div className="not-found" style={{ pointerEvents: "none" }}>
+      <Lottie
+        height={400}
+        width={400}
+        options={{
+          animationData: animationData,
+          loop: true,
+          autoplay: true,
+        }}
+      />
+    </div>
+  );
+}

package.json

@@ -32,6 +32,7 @@
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lottie": "^1.2.4",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.15.0",
     "rehype-highlight": "^6.0.0",