Add 500 error page (#1910)

Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com>
2022-02-18 17:33:18 +00:00 · 2022-02-18 17:33:18 +00:00 · c8ae414ecf
parent e7dc2d3d7a
commit c8ae414ecf
2 changed files with 34 additions and 0 deletions
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@ -0,0 +1,28 @@
+import Head from "next/head";
+
+import Button from "@components/ui/Button";
+
+export default function Error500() {
+  return (
+    <div className="flex h-screen">
+      <Head>
+        <title>Something unexpected occurred | Cal.com</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="m-auto text-center">
+        <h1 className="font-cal text-[250px] text-gray-900">
+          5<img src="error.svg" className="-mt-10 inline w-60" />0
+        </h1>
+        <h2 className="-mt-16 mb-2 text-3xl text-gray-600">It&apos;s not you, it&apos;s us.</h2>
+        <p className="mb-4 max-w-2xl text-gray-500">
+          Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
+          away for you.
+        </p>
+        <Button href="https://cal.com/support">Contact support</Button>
+        <Button color="secondary" href="javascript:history.back()" className="ml-2">
+          Go back
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/public/error.svg
+++ b/apps/web/public/error.svg
@ -0,0 +1,6 @@
+<svg width="282" height="282" viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M35.25 35.25H246.75C249.866 35.25 252.855 36.4879 255.059 38.6915C257.262 40.895 258.5 43.8837 258.5 47V235C258.5 238.116 257.262 241.105 255.059 243.309C252.855 245.512 249.866 246.75 246.75 246.75H35.25C32.1337 246.75 29.145 245.512 26.9415 243.309C24.7379 241.105 23.5 238.116 23.5 235V47C23.5 43.8837 24.7379 40.895 26.9415 38.6915C29.145 36.4879 32.1337 35.25 35.25 35.25ZM235 117.5H47V223.25H235V117.5ZM58.75 70.5V94H82.25V70.5H58.75ZM105.75 70.5V94H129.25V70.5H105.75Z" fill="#292929"/>
+  <path d="M141.039 188.395L141.812 188.395C146.758 188.395 151.246 188.91 155.277 189.941C159.309 190.996 162.848 192.379 165.895 194.09C168.965 195.824 171.508 197.711 173.523 199.75C175.539 201.789 176.992 203.816 177.883 205.832L172.539 207.766C171.555 206.43 170.195 205.117 168.461 203.828C166.75 202.539 164.641 201.367 162.133 200.312C159.648 199.281 156.719 198.449 153.344 197.816C149.992 197.184 146.172 196.867 141.883 196.867L140.969 196.867C136.68 196.867 132.848 197.184 129.473 197.816C126.121 198.449 123.191 199.281 120.684 200.312C118.152 201.367 116.02 202.539 114.285 203.828C112.551 205.117 111.18 206.43 110.172 207.766L104.969 205.832C105.859 203.816 107.312 201.789 109.328 199.75C111.32 197.711 113.852 195.824 116.922 194.09C119.969 192.379 123.508 190.996 127.539 189.941C131.594 188.91 136.094 188.395 141.039 188.395Z" fill="#292929"/>
+  <circle cx="83" cy="155" r="16" fill="#292929"/>
+  <circle cx="199" cy="155" r="16" fill="#292929"/>
+</svg>