Added a simple 404 page design

app/components/Primitives/PageNotFoundTitle.tsx

@@ -0,0 +1,10 @@
+import { FunctionComponent } from "react";
+
+export const PageNotFoundTitle: FunctionComponent<{ className?: string }> = ({
+  className,
+  children,
+}) => {
+  return (
+    <h1 className={`font-sans font-bold text-8xl ${className}`}>{children}</h1>
+  );
+};

app/routes/j/$id.tsx

@@ -24,6 +24,9 @@ import { JsonTreeViewProvider } from "~/hooks/useJsonTree";
 import { JsonSearchProvider } from "~/hooks/useJsonSearch";
 import { LargeTitle } from "~/components/Primitives/LargeTitle";
 import { Body } from "~/components/Primitives/Body";
+import { PageNotFoundTitle } from "~/components/Primitives/PageNotFoundTitle";
+import { SmallSubtitle } from "~/components/Primitives/SmallSubtitle";
+import { Logo } from "~/components/Icons/Logo";
 
 export const loader: LoaderFunction = async ({ params, request }) => {
   invariant(params.id, "expected params.id");
@@ -171,8 +174,30 @@ export default function JsonDocumentRoute() {
 export function CatchBoundary() {
   const params = useParams();
   return (
-    <div>
-      <h2>We couldn't find {params.id}</h2>
+    <div className="flex items-center justify-center w-screen h-screen bg-[rgb(56,52,139)]">
+      <div className="w-2/3">
+        <div className="text-center text-lime-300">
+          <div className="">
+            <Logo />
+          </div>
+          <PageNotFoundTitle className="text-center leading-tight">
+            404
+          </PageNotFoundTitle>
+        </div>
+        <div className="text-center leading-snug text-white">
+          <SmallSubtitle className="text-slate-200 mb-8">
+            <b>Oops</b>, something went wrong!
+          </SmallSubtitle>
+          <SmallSubtitle className="text-slate-200 mb-8">
+            We couldn't find the page <b>'https://jsonhero.io/j/{params.id}</b>'
+          </SmallSubtitle>
+          <a href="https:jsonhero.io">
+            <button className="self-align-center bg-lime-500 text-slate-900 text-lg font-bold px-5 py-1 rounded-sm uppercase whitespace-nowrap cursor-pointer opacity-90 hover:opacity-100 transition">
+              HOME
+            </button>
+          </a>
+        </div>
+      </div>
     </div>
   );
 }

tailwind.config.js

@@ -15,6 +15,8 @@ module.exports = {
       "5xl": "2rem", // 32px
       "6xl": ["2.625rem", "3rem"], // 42px
       "7xl": "4rem", // 64px
+      "8xl": "8rem", // 128px
+
     },
     extend: {
       height: {