From dbc260c6746a8cf9b5e00f49f4ee744d7c45b27d Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Mon, 2 Nov 2020 13:48:33 +0530
Subject: [PATCH] [feat] add 404

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 src/App.js       |  3 +++
 src/index.css    |  8 ++++++++
 src/pages/404.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/src/App.js b/src/App.js
index 296a047..4dc5503 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { Router } from "@reach/router";
 import Home from "./pages/Home";
 import Exp from "./pages/Exp";
 import Projects from "./pages/Projects";
+import NotFound from "./pages/404";
 
 function App() {
 	return (
@@ -10,6 +11,8 @@ function App() {
 			<Home path="/" />
 			<Exp path="/experience" />
 			<Projects path="/projects" />
+
+			<NotFound path="*" />
 		</Router>
 	);
 }
diff --git a/src/index.css b/src/index.css
index 11f34ea..e239e42 100644
--- a/src/index.css
+++ b/src/index.css
@@ -50,3 +50,11 @@ h1 {
 h2 {
 	font-size: 3rem;
 }
+
+a {
+	color: white;
+}
+
+a:hover {
+	color: var(--primary-color);
+}
diff --git a/src/pages/404.js b/src/pages/404.js
index e69de29..ffc1749 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -0,0 +1,28 @@
+import { css } from "emotion";
+import Container from "../components/Container";
+import Heading from "../components/Heading";
+
+const Dashed = props => (
+	<span
+		className={css`
+			border-bottom: 1px dashed #fff;
+		`}>
+		{props.children}
+	</span>
+);
+
+function Home() {
+	return (
+		<Container>
+			<Heading>Nothing here</Heading>
+			<p>
+				404. Back to{" "}
+				<b>
+					<a href="/">MKRhere?</a>
+				</b>
+			</p>
+		</Container>
+	);
+}
+
+export default Home;