fix blue button class name and [TODO] add status page

src/css/base.sass

@@ -40,6 +40,6 @@ button
   border: 2px solid greenyellow
   color: greenyellow
 
-.blue-buton
+.blue-button
   border: 2px solid blue
   color: blue

src/pages/404.js

@@ -15,7 +15,7 @@ const NotFoundPage = () => {
         Sorry we couldn’t find what you were looking for.
         <br />
         <AniLink cover to="/">
-          <button className="blue-buton">Go to home page</button>
+          <button className="blue-button">Go to home page</button>
         </AniLink>
       </p>
     </>

src/pages/add.js

@@ -85,7 +85,7 @@ const AddURLPage = () => {
       <br />
 
       <AniLink cover to="/">
-        <button className="blue-buton">Go to home page</button>
+        <button className="blue-button">Go to home page</button>
       </AniLink>
     </>
   )

src/pages/delete.js

@@ -82,7 +82,7 @@ const DeleteURLPage = () => {
       <br />
 
       <AniLink cover to="/">
-        <button className="blue-buton">Go to home page</button>
+        <button className="blue-button">Go to home page</button>
       </AniLink>
     </>
   )

src/pages/index.js

@@ -21,6 +21,12 @@ const LoginPage = () => {
           <button className="red-button">Delete URL</button>
         </AniLink>
       </div>
+
+      <br />
+
+      <AniLink cover to="/status">
+        <button className="blue-button">System Status</button>
+      </AniLink>
     </>
   )
 }

src/pages/status.js

@@ -0,0 +1,22 @@
+import React from "react"
+import AniLink from "gatsby-plugin-transition-link/AniLink"
+
+import Seo from "../components/seo"
+
+const LoginPage = () => {
+  return (
+    <>
+      <Seo
+        title="Home Page"
+      />
+
+      <p>TODO</p>
+
+      <AniLink cover to="/">
+        <button className="blue-button">Go to home page</button>
+      </AniLink>
+    </>
+  )
+}
+
+export default LoginPage