Merge pull request #12 from ElTimuro/DOC-86_Custom-500-page

Custom 500 page created, started Buttons component customise.

apps/web/pages/404.jsx

@@ -7,7 +7,9 @@ export default function Custom404() {
   return (
     <>
       <main className="relative min-h-full bg-gray-100 isolate">
-        <Logo className="absolute w-20 top-10 left-10" />
+        <div className="absolute top-10 left-10">
+          <Logo className="w-10 md:w-20" />
+        </div>
 
         <div className="px-6 py-48 mx-auto text-center max-w-7xl sm:py-40 lg:px-8">
           <p className="text-base font-semibold leading-8 text-brown">404</p>

apps/web/pages/500.jsx

@@ -1,10 +1,33 @@
-import Link from "next/link";
+import Logo from "../components/logo";
+import { Button } from "@documenso/ui";
+import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
+import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 
-export default function FiveUhOh() {
+export default function Custom500() {
   return (
     <>
-      <h1>500 - Something went wrong.</h1>
-      <Link href="/">Go back home</Link>
+      <div className="relative flex flex-col items-center justify-center min-h-full text-white bg-black">
+        <div className="absolute top-10 left-10">
+          <Logo dark className="w-10 md:w-20" />
+        </div>
+
+        <div className="px-4 py-10 mt-20 max-w-7xl">
+          <p className="inline-flex items-center text-3xl font-bold sm:text-5xl">
+            500
+            <span className="relative px-3 font-thin sm:text-6xl -top-1.5">
+              |
+            </span>{" "}
+            <span className="text-base font-semibold align-middle sm:text-2xl">
+              Something went wrong.
+            </span>
+          </p>
+          <div className="flex justify-center mt-10">
+            <Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>
+              Back to home
+            </Button>
+          </div>
+        </div>
+      </div>
     </>
   );
 }