2 files changed, 65 insertions, 0 deletions

diff --git a/examples/with-gatsby/apps/web/src/pages/404.tsx b/examples/with-gatsby/apps/web/src/pages/404.tsx
new file mode 100644
index 0000000..68a3a72
--- /dev/null
+++ b/examples/with-gatsby/apps/web/src/pages/404.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Link, HeadFC, PageProps } from "gatsby";
+
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+};
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+};
+
+const paragraphStyles = {
+  marginBottom: 48,
+};
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+};
+
+const NotFoundPage: React.FC<PageProps> = () => {
+  return (
+    <main style={pageStyles}>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry 😔, we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  );
+};
+
+export default NotFoundPage;
+
+export const Head: HeadFC = () => <title>Not found</title>;
diff --git a/examples/with-gatsby/apps/web/src/pages/index.tsx b/examples/with-gatsby/apps/web/src/pages/index.tsx
new file mode 100644
index 0000000..30844d6
--- /dev/null
+++ b/examples/with-gatsby/apps/web/src/pages/index.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { HeadFC, PageProps } from "gatsby";
+import { Button } from "ui";
+
+const IndexPage: React.FC<PageProps> = () => {
+  return (
+    <main>
+      <h1>Web</h1>
+      <Button />
+    </main>
+  );
+};
+
+export default IndexPage;
+
+export const Head: HeadFC = () => <title>Home Page</title>;