add 404

src/components/ui/errors/ErrorPage.tsx

@@ -0,0 +1,10 @@
+import tw, { styled } from 'twin.macro';
+
+export const ErrorHeader = styled.h2`
+	${tw`text-2xl font-semibold uppercase mb-8 mt-1`}
+`;
+
+export const ErrorStatusText = styled.h1<{ color?: string }>`
+	${tw`text-orange-500 uppercase`}
+	font-size: 145px;
+`;

src/components/ui/icons/Icon.tsx

@@ -28,6 +28,7 @@ export type SvgIcon =
 	| 'web'
 	| 'bag'
 	| 'calendar'
+	| 'arrow-narrow-left'
 	| 'arrow-narrow-right'
 	| 'check';
 

src/pages/404.tsx

@@ -0,0 +1,39 @@
+import tw from 'twin.macro';
+import { Helmet } from 'react-helmet';
+import { Container } from '~/components/ui/containers/Container';
+import { Icon } from '~/components/ui/icons/Icon';
+import React from 'react';
+import { ErrorHeader, ErrorStatusText } from '~/components/ui/errors/ErrorPage';
+import { Card } from '~/components/ui/containers/Card';
+import { Link } from 'gatsby';
+import { Button } from '~/components/ui/controls/Button';
+
+const Root = tw.div`
+	bg-gray-300  flex-grow py-10
+`;
+
+export default function NotFoundPage() {
+	return (
+		<Root>
+			<Helmet defer={false} title={'Not Found'} />
+			<Container className={'items-center'}>
+				<Card tw={'max-w-4xl sm:w-2/3 w-full p-10'}>
+					<div
+						tw={
+							'flex flex-col items-center justify-center transform -translate-y-5'
+						}
+					>
+						<ErrorStatusText>404</ErrorStatusText>
+						<ErrorHeader>Page Not Found</ErrorHeader>
+						<Link to={'/'}>
+							<Button>
+								<Icon name='arrow-narrow-left' size={16} className={'mr-2'} />
+								<span>Home Page</span>
+							</Button>
+						</Link>
+					</div>
+				</Card>
+			</Container>
+		</Root>
+	);
+}