feat: add 404 and 500 page

theodorusclarence · Jan 21, 2022 · a3db99f · a3db99f · vercel · Jan 21, 2022
1 parent 39670e0
commit a3db99f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,26 +1,23 @@
 import * as React from 'react';
-import { RiAlarmWarningFill } from 'react-icons/ri';
 
+import Accent from '@/components/Accent';
 import Layout from '@/components/layout/Layout';
-import ArrowLink from '@/components/links/ArrowLink';
 import Seo from '@/components/Seo';
 
 export default function NotFoundPage() {
   return (
     <Layout>
-      <Seo templateTitle='Not Found' />
+      <Seo templateTitle='Link not found' />
 
       <main>
-        <section className='bg-white'>
-          <div className='layout flex flex-col justify-center items-center min-h-screen text-center text-black'>
-            <RiAlarmWarningFill
-              size={60}
-              className='animate-flicker drop-shadow-glow text-red-500'
-            />
-            <h1 className='mt-8 text-4xl md:text-6xl'>Page Not Found</h1>
-            <ArrowLink className='mt-4 md:text-lg' href='/'>
-              Back to Home
-            </ArrowLink>
+        <section className=''>
+          <div className='layout flex flex-col justify-center items-center py-20 min-h-screen'>
+            <h1 className='text-5xl md:text-7xl'>
+              <Accent>Link not found</Accent>
+            </h1>
+            <p className='mt-4 text-gray-300'>
+              Are you sure it is the right link?
+            </p>
           </div>
         </section>
       </main>

diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import Accent from '@/components/Accent';
+import Layout from '@/components/layout/Layout';
+import Seo from '@/components/Seo';
+
+export default function ErrorPage() {
+  return (
+    <Layout>
+      <Seo templateTitle='Error' />
+
+      <main>
+        <section className=''>
+          <div className='layout flex flex-col justify-center items-center py-20 min-h-screen'>
+            <h1 className='text-5xl md:text-7xl'>
+              <Accent>Error occurred</Accent>
+            </h1>
+            <p className='mt-4 text-gray-300'>
+              Sorry, there must be something wrong, please try again
+            </p>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}