feat: add victorian plumbing promo

src/components/button.js

@@ -1,19 +1,28 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { Link as GatsbyLink } from "gatsby";
 
 const Container = styled.button`
-  background-color: transparent;
+  background-color: var(--color-white);
+  color: var(--color-dark);
   margin: 0;
   padding: 4px 8px;
   border: 1px solid var(--color-dark);
   font-size: var(--font-size-md);
+  text-decoration: none;
+  cursor: pointer;
+
   ${props =>
     props.float &&
     css`
       float: ${props.float};
     `}
 
+  &:visited {
+    color: var(--color-dark);
+  }
+
   &:focus {
     outline: 0;
     box-shadow: 0 0 0 2px var(--color-dark);
@@ -24,6 +33,16 @@ const Container = styled.button`
   }
 `;
 
-export default function Button({ children, ...other }) {
+export default function Button({ children, to, ...other }) {
+  if (to) {
+    const isInternal = /^\/(?!\/)/.test(to);
+    const as = isInternal ? GatsbyLink : "a";
+    const url = isInternal ? { to } : { href: to };
+    return (
+      <Container as={as} {...url} {...other}>
+        {children}
+      </Container>
+    );
+  }
   return <Container {...other}>{children}</Container>;
 }