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>;
 }

src/pages/index.js

@@ -4,6 +4,7 @@ import Img from "gatsby-image";
 import styled from "@emotion/styled";
 import Layout from "../layout";
 import {
+  Button,
   Card,
   CustomSlick,
   Grid,
@@ -62,7 +63,23 @@ export default function Index({ data }) {
           </Card>
         </Grid>
       </Section>
-      <Section variant="secondary" heading="All of our work is guaranteed!">
+      <Section variant="primary" heading="Products">
+        <Grid columns={[1, 2]}>
+          <div>
+            <Img fluid={data.vpImage.childImageSharp.fluid} />
+          </div>
+          <div>
+            <Text>
+              Victorian Plumbing is a leading retailer of bathrooms online and
+              our preferred supplier of bathroom suites.
+            </Text>
+            <Button to="https://www.victorianplumbing.co.uk/bathroom-suites">
+              View products
+            </Button>
+          </div>
+        </Grid>
+      </Section>
+      <Section heading="All of our work is guaranteed!">
         <Text align="center">
           If you are looking for a one-stop shop for your new bathroom, look no
           further. We can take care of all jobs required to complete your new
@@ -172,6 +189,13 @@ export const query = graphql`
         }
       }
     }
+    vpImage: file(relativePath: { eq: "victorian_plumbing_logo.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 320, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
     barkImage: file(relativePath: { eq: "bark_logo.png" }) {
       childImageSharp {
         fixed(width: 106, height: 32, quality: 100) {
@@ -181,11 +205,11 @@ export const query = graphql`
     }
     allReview {
       nodes {
+        name
+        title
+        text
         author
         date
-        name
-        text
-        title
       }
     }
   }