Add 404 and 500 status pages.

assets/js/react/components/Footer.tsx

@@ -6,7 +6,7 @@ import { Logo } from "./Logo"
 const navigation = [
   {
     title: "Students",
-    links: [{ title: "Find a Coach", href: "/c/" }],
+    links: [{ title: "Find a Coach", href: "/" }],
   },
   {
     title: "Company",

assets/js/react/pages/Search.tsx

@@ -23,21 +23,22 @@ function SearchResults() {
   })
 
   if (isLoading) {
-    return <Loading loading />
+    return <Loading className="mt-40" loading />
   }
 
   if (isError) {
     return (
       <FallbackMessage
-        title="Unexpected Error"
+        className="mt-40"
-        body="We're looking into this. Please refresh or try again later."
+        title="Blunder!"
+        body="Our tech team is working to restore the checkmate."
       />
     )
   }
 
   return (
     <FadeInStagger
-      className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
       faster
     >
       {data?.map((coach, index) => (

assets/js/react/router.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { createBrowserRouter } from "react-router-dom"
 
+import { FallbackMessage } from "./components/FallbackMessage"
 import { Search } from "./pages/Search"
 
 export const router = createBrowserRouter([
@@ -8,4 +9,14 @@ export const router = createBrowserRouter([
     path: "/",
     element: <Search />,
   },
+  {
+    path: "*",
+    element: (
+      <FallbackMessage
+        className="mt-40"
+        title="Illegal Move!"
+        body="This page has wandered off the board."
+      />
+    ),
+  },
 ])