diff --git a/src/components/button.js b/src/components/button.js index 9c9202b..696519a 100644 --- a/src/components/button.js +++ b/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 ( + + {children} + + ); + } return {children}; } diff --git a/src/images/victorian_plumbing_logo.png b/src/images/victorian_plumbing_logo.png new file mode 100644 index 0000000..b731889 Binary files /dev/null and b/src/images/victorian_plumbing_logo.png differ diff --git a/src/pages/index.js b/src/pages/index.js index 4097596..53c9fcf 100644 --- a/src/pages/index.js +++ b/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 }) { -
+
+ +
+ +
+
+ + Victorian Plumbing is a leading retailer of bathrooms online and + our preferred supplier of bathroom suites. + + +
+
+
+
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 } } }