create error pages

app/routes/_index.tsx

@@ -25,17 +25,17 @@ const content = {
   homepage: {
     items: [
       {text: '1.Shop', link: '/collections/frontpage'},
-      {text: '2.camera setup', link: '/collections'},
-      {text: '3.display setup', link: '/collections'},
-      {text: '4.other functions', link: '/collections'},
+      {text: '2.camera setup', link: '/error'},
+      {text: '3.display setup', link: '/error'},
+      {text: '4.other functions', link: '/error'},
     ],
   },
   shop: {
     items: [
       {text: '1.All items', link: '/collections'},
-      {text: '2.Tees', link: '/collections/tops'},
-      {text: '3.Keyrings', link: '/collections/keyrings'},
-      {text: '4.Posters', link: '/collections/posters'},
+      {text: '2.Tees', link: '/collections/error'},
+      {text: '3.Keyrings', link: '/collections/error'},
+      {text: '4.Posters', link: '/collections/error'},
     ],
   },
 };

app/routes/error.tsx

@@ -0,0 +1,30 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({request}: LoaderFunctionArgs) {
+  // throw new Response(`${new URL(request.url).pathname} not found`, {
+  //   status: 507,
+  // });
+  return null;
+}
+
+export default function ErrorPage() {
+  return (
+    <div
+      className="flex flex-col justify-center w-full h-full"
+      style={{fontSize: '1rem'}}
+    >
+      <>/Error 777/</>
+      <br />
+      <>Physical storage could not be read.</>
+      <br />
+      <span className="mt-2 text-sm">
+        Unmounting /dev/storage/vhs0: FAILURE
+      </span>
+      <span className="mb-2 text-sm">
+        {'>'} trace: {'{'}read_err, vhs_track, recalibrate{'}'}
+      </span>
+      <>[!] Please eject the cassette and power cycle the device</>
+      {/* <p>[!] CONTACT: Support at 1-777-PUAS for further assistance.</p> */}
+    </div>
+  );
+}