404 and Use Cases page

package.json

@@ -42,6 +42,7 @@
     "mdi-react": "^8.2.0",
     "prettier": "^2.5.1",
     "react-bootstrap": "1.6.1",
+    "react-spring": "9.4.2",
     "sass": "^1.49.7",
     "typescript": "4.5.5"
   }

src/pages/404/404.module.scss

@@ -0,0 +1,24 @@
+.errorPage {
+    flex: 1 0 auto;
+    padding: 15% 4rem 25% 4rem;
+    background: url('/c-sprinkles-blank.svg');
+    background-size: cover;
+}
+
+.circle {
+    height: 8rem;
+    width: 8rem;
+    margin: 0 auto;
+    background: #afbcd4;
+}
+
+.icon {
+    height: 8rem;
+    width: 8rem;
+
+    svg {
+        height: 8rem;
+        width: 8rem;
+        fill: #e4e9f1;
+    }
+}

src/pages/404/index.tsx

@@ -0,0 +1,23 @@
+import SignDirectionIcon from 'mdi-react/SignDirectionIcon'
+import React from 'react'
+
+import { Layout } from '@components'
+
+import styles from './404.module.scss'
+
+const Custom404: React.FunctionComponent = () => (
+    <Layout className="bg-white">
+        <div className={`${styles.errorPage} d-flex flex-column align-items-center justify-content-center text-dark`}>
+            <div className={`${styles.circle} rounded-circle`}>
+                <div className={`${styles.icon} my-0 mx-auto`}>
+                    <SignDirectionIcon />
+                </div>
+            </div>
+
+            <h1>404: Not Found</h1>
+            <p>Sorry, the requested URL was not found.</p>
+        </div>
+    </Layout>
+)
+
+export default Custom404