feat: better images

src/pages/about.js

@@ -50,7 +50,7 @@ export default function Index({ data }) {
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+    headerImage: file(relativePath: { eq: "bathroom3.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp

src/pages/contact.js

@@ -53,7 +53,7 @@ export default function Index({ data }) {
     <Layout location="/contact">
       <Header
         image={data.headerImage.childImageSharp.fluid}
-        position="bottom right"
+        position="middle right"
       >
         <h1>Get in touch</h1>
       </Header>
@@ -163,7 +163,7 @@ export default function Index({ data }) {
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+    headerImage: file(relativePath: { eq: "bathroom4.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp

src/pages/services/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../../layout";
-import { Header } from "../../components";
+import { Card, Grid, Header, Heading, Section } from "../../components";
 
 export default function Index({ data }) {
   return (
@@ -9,18 +9,78 @@ export default function Index({ data }) {
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h1>Services</h1>
       </Header>
+      <Section>
+        <Grid columns={[1, 2]}>
+          <Card
+            to="/services/bathrooms"
+            image={data.bathroomImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Bathrooms</Heading>}
+          >
+            Fully accredited bathroom refurbishment service
+          </Card>
+          <Card
+            to="/services/tiling"
+            image={data.tilingImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Tiling</Heading>}
+          >
+            Our tiling is primo!
+          </Card>
+          <Card
+            to="/services/electrics"
+            image={data.electricsImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Electrics</Heading>}
+          >
+            Bring some light to your next project
+          </Card>
+          <Card
+            to="/services/carpentry"
+            image={data.carpentryImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Carpentry</Heading>}
+          >
+            Our woodworking is sharp!
+          </Card>
+        </Grid>
+      </Section>
     </Layout>
   );
 }
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom2.png" }) {
+    headerImage: file(relativePath: { eq: "floor_tiles.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp
         }
       }
     }
+    bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
   }
 `;