feat: add initial 404

packages/example/src/pages/404.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FourOhFour } from 'gatsby-theme-carbon';
+
+const links = [
+  { href: '/components/markdown', text: 'Markdown' },
+  { href: '/components/aside', text: 'Aside' },
+  { href: '/components/demo', text: 'Demo' },
+];
+
+const Custom404 = () => <FourOhFour links={links} />;
+
+export default Custom404;

packages/example/src/pages/whoops.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FourOhFour } from 'gatsby-theme-carbon';
+
+const links = [
+  { href: '/components/markdown', text: 'Markdown' },
+  { href: '/components/aside', text: 'Aside' },
+  { href: '/components/demo', text: 'Demo' },
+];
+
+const Custom404 = () => <FourOhFour links={links} />;
+
+export default Custom404;

packages/gatsby-theme-carbon/index.js

@@ -9,6 +9,6 @@ export { default as ResourceCard } from './src/components/ResourceCard';
 export { default as ArticleCard } from './src/components/ArticleCard';
 export { default as Aside } from './src/components/Aside';
 export { default as FeatureCard } from './src/components/FeatureCard';
-
+export { default as FourOhFour } from './src/components/FourOhFour';
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';

packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../Layout';
+import styles, {
+  container,
+  fourOhFour,
+  paragraph,
+  heading,
+  link,
+  list,
+} from './FourOhFour.module.scss';
+
+console.log(styles);
+const whoops = ({ links }) => {
+  const getLinks = () => (
+    <>
+      <br />
+      Maybe some of these most visited links will help you?
+      <ul className={list}>
+        {links.map(({ href, text }, i) => (
+          <li key={i}>
+            <Link className={link} to={href}>
+              {text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+
+  return (
+    <Layout homepage>
+      <div className={container}>
+        <span className={fourOhFour}>404</span>
+        <h2 className={heading}>Something's gone wrong...</h2>
+        <p className={paragraph}>
+          Sorry, we can't find the page you are looking for.
+          {links && getLinks()}
+        </p>
+      </div>
+    </Layout>
+  );
+};
+
+export default whoops;

packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss

@@ -0,0 +1,68 @@
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~@carbon/elements/scss/type/type';
+
+.four-oh-four {
+  @include carbon--type-style('display-02');
+  font-size: 20vw;
+  background: linear-gradient(35deg, #92eeee, #a66efa);
+  display: inline-block;
+  background-size: 200% 200%;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  margin-bottom: 6rem;
+  @include carbon--breakpoint('lg') {
+    font-size: 300px;
+  }
+  animation: gradient 2s ease infinite;
+}
+
+.paragraph {
+  @include carbon--type-style('body-long-01');
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.heading {
+  @include carbon--type-style('expressive-heading-04', true);
+  margin-bottom: 1rem;
+}
+
+.list {
+  margin-top: 2rem;
+}
+
+.link {
+  @include carbon--type-style('body-short-01');
+  display: inline-block;
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.container {
+  margin: 0;
+  margin-top: 4rem;
+  max-width: 100%;
+  min-height: calc(100vh - 500px);
+
+  @include carbon--breakpoint('lg') {
+    padding-left: calc(
+      25% + 2rem
+    ); //2rem to account for 2rem left padding default on grid
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-left: 400px;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

packages/gatsby-theme-carbon/src/components/FourOhFour/index.js

@@ -0,0 +1,3 @@
+import FourOhFour from './FourOhFour';
+
+export default FourOhFour;

packages/gatsby-theme-carbon/src/styles/animations.css

@@ -0,0 +1,11 @@
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -42,6 +42,7 @@ $prefix: 'bx';
 //---------------------------------------
 
 @import 'page';
+@import './animations.css';
 
 @import '../components/markdown/markdown.scss';
 @import '../components/Homepage/homepage.scss';