feat: add better 404 and error pages

src/app/[locale]/not-found.tsx

@@ -1,5 +1,21 @@
+"use client"
 
+import { jgs7 } from "@/fonts"
+import Image from "next/image"
 
 export default function NotFound() {
-  return <div>Not Found</div>
+  return (
+    <div>
+      <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm flex-col">
+        <section className={`text-6xl flex flex-col text-center`}>
+          <span className={`${jgs7.className} text-8xl`}>404</span>
+          <span>Page not found</span>
+        </section>
+        <div className="fixed h-full w-full max-w-[50vw] max-h-[50vh] motion-safe:animate-ping ">
+          <Image src="/web-app-manifest-512x512.png" alt="Loading..." fill className="object-contain" priority />
+        </div>
+      </div>
+    </div>
+  )
 }
+

src/app/[locale]/pages/[slug]/error.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect } from "react"
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold tracking-tight text-black sm:text-8xl">
+          {error.name}
+        </h1>
+        <p className="mt-4 text-lg text-gray-500">{error.message}</p>
+        <div className="mt-6">
+          <button
+            type="button"
+            className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-xs hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+            onClick={reset}
+          >
+            Try again
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}