docs: add 404 page

omnifed · Oct 3, 2024 · 9f8248d · 9f8248d
1 parent 4f5a5f1
commit 9f8248d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/docs/app/components/icons/paw-icon.tsx b/docs/app/components/icons/paw-icon.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export default function PawIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <path
+        fill="currentColor"
+        d="m258.53 16.727l-7.553 10.367s-14.79 20.28-29.64 44.75c-7.424 12.236-14.9 25.517-20.622 38.108c-5.722 12.588-9.965 24.188-9.965 35.076c0 37.323 30.458 67.783 67.78 67.783c37.327 0 67.784-30.46 67.784-67.782c0-10.888-4.242-22.488-9.964-35.076c-5.723-12.59-13.162-25.872-20.586-38.108c-14.85-24.47-29.676-44.75-29.676-44.75zm0 32.778c4.848 6.853 10.65 14.592 21.245 32.05c7.185 11.838 14.33 24.617 19.565 36.133c5.235 11.518 8.285 22.092 8.285 27.34c0 14.03-5.816 26.627-15.172 35.553a36.4 36.4 0 0 0 2.662-13.698c0-20.197-36.57-70.364-36.57-70.364s-36.572 50.167-36.572 70.364c0 4.86.955 9.492 2.675 13.734c-9.377-8.928-15.21-21.54-15.21-35.588c0-5.248 3.087-15.822 8.322-27.34c5.234-11.516 12.38-24.295 19.564-36.133c10.594-17.457 16.36-25.195 21.207-32.05zM60.66 79.365l-3.285 12.374s-6.49 24.27-11.496 52.45c-2.503 14.09-4.652 29.19-5.44 42.998c-.786 13.807-.538 26.13 3.395 36.28c13.484 34.803 52.873 52.214 87.676 38.73c34.803-13.486 52.21-52.913 38.728-87.713c-3.933-10.153-12.09-19.383-21.974-29.055c-9.884-9.67-21.653-19.38-32.996-28.105C92.578 99.875 71.463 86.3 71.463 86.3l-10.805-6.936zm394.725 0L444.578 86.3s-21.114 13.574-43.8 31.025c-11.344 8.726-23.114 18.434-33 28.105c-9.883 9.672-18.002 18.902-21.936 29.055c-13.483 34.8 3.888 74.227 38.69 87.713c34.804 13.484 74.23-3.927 87.714-38.73c3.934-10.15 4.145-22.473 3.358-36.28s-2.935-28.907-5.438-42.998c-5.006-28.18-11.498-52.45-11.498-52.45l-3.285-12.376zm-11.826 30.55c2.042 8.137 4.64 17.446 8.213 37.56c2.42 13.636 4.46 28.142 5.18 40.772s-.255 23.576-2.15 28.47c-5.067 13.076-15.038 22.716-26.98 27.66a36.5 36.5 0 0 0 7.412-11.788c7.298-18.834-8.68-78.824-8.68-78.824s-52.227 33.564-59.523 52.395a36.4 36.4 0 0 0-2.467 13.725c-5.504-11.706-6.38-25.56-1.31-38.648c1.897-4.893 8.553-13.598 17.595-22.445c9.042-8.85 20.34-18.203 31.316-26.647c16.206-12.465 24.41-17.6 31.393-22.23zm-371.035.037c6.997 4.64 15.17 9.745 31.355 22.193c10.977 8.444 22.276 17.798 31.318 26.647c9.042 8.847 15.696 17.552 17.592 22.445c5.068 13.082 4.197 26.932-1.3 38.635c.063-4.557-.722-9.2-2.47-13.71c-7.295-18.832-59.523-52.396-59.523-52.396s-15.975 59.99-8.678 78.823a36.5 36.5 0 0 0 7.415 11.79c-11.945-4.942-21.92-14.583-26.988-27.663c-1.896-4.894-2.872-15.84-2.152-28.47s2.797-27.137 5.22-40.772c3.568-20.096 6.167-29.375 8.212-37.523zm184.294 122.39c-43.658 0-79.31 28.473-87.347 66.686c-22.89 8.593-43.324 19.73-57.71 34.275c-15.516 15.688-25.112 34.84-25.112 55.518c0 30.856 20.97 57.578 52.124 75.997s73.17 29.38 119.322 29.38s87.99-10.95 118.994-29.38s51.832-45.18 51.832-75.996c0-20.867-9.736-40.188-25.48-55.99c-14.613-14.672-35.395-25.875-58.692-34.423c-8.38-37.994-44.513-66.066-87.932-66.066zm0 18.686c37.094 0 66.64 24.44 71.178 54.936l.838 5.656l5.44 1.832c23.44 7.892 42.783 19.37 55.92 32.557c13.136 13.187 20.04 27.7 20.04 42.817c0 14.93-6.83 29.376-19.52 42.178c3.65-7.606 5.618-15.66 5.618-24.004c0-25.25-31.607-64.705-89.514-79.745q.259-2.356.26-4.774c0-25.574-22.076-46.31-49.308-46.31c-27.233 0-49.31 20.736-49.31 46.31c0 1.543.085 3.065.24 4.568c-58.223 14.926-89.483 54.81-89.483 79.953h-.002c0 8.25 1.937 16.215 5.533 23.743c-12.622-12.743-19.41-27.096-19.41-41.916c0-14.955 6.777-29.303 19.71-42.38C137.982 333.37 157.032 321.95 180.09 314l5.402-1.868l.805-5.694c4.324-30.847 33.236-55.41 70.52-55.41z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
@@ -0,0 +1,54 @@
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { css } from '@cerberus/styled-system/css'
+import Link from 'next/link'
+import PawIcon from './components/icons/paw-icon'
+import { button } from '@cerberus-design/styled-system/recipes'
+
+export default function NotFound() {
+  return (
+    <div
+      className={vstack({
+        justify: 'center',
+        h: '100dvh',
+        pxi: '6',
+        textAlign: 'center',
+      })}
+    >
+      <span
+        className={css({
+          color: 'page.surface.100',
+          mb: 6,
+          maxW: '12rem',
+          w: '1/3',
+          lg: {
+            mb: 10,
+          },
+        })}
+      >
+        <PawIcon />
+      </span>
+
+      <h2
+        className={css({
+          textStyle: 'h1',
+        })}
+      >
+        Away from post
+      </h2>
+      <p
+        className={css({
+          color: 'page.text.100',
+          maxW: '66ch',
+          pb: 8,
+          textWrap: 'pretty',
+        })}
+      >
+        We couldn't find Cerberus...or the page you are trying to reach.
+      </p>
+
+      <Link className={button()} href="/">
+        Return from when you came
+      </Link>
+    </div>
+  )
+}