refactor(case-studies): generate pages from json

gatsby-node.js

@@ -0,0 +1,57 @@
+const { resolve } = require("path");
+const caseStudies = require("./src/data/case-studies.json");
+
+exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
+  Object.keys(caseStudies).forEach(key => {
+    caseStudies[key].forEach((cs, i) => {
+      const {
+        title,
+        titleColor,
+        location,
+        image,
+        key_features,
+        price,
+        time_taken,
+        date,
+        content
+      } = cs;
+      const node = {
+        path: `/services/${key}/case-study-${i + 1}`,
+        type: key,
+        title,
+        titleColor,
+        location,
+        image,
+        key_features,
+        price,
+        time_taken,
+        date,
+        content,
+        id: createNodeId(`${key}-${i + 1}`),
+        internal: {
+          type: "CaseStudy",
+          contentDigest: createContentDigest(cs)
+        }
+      };
+      actions.createNode(node);
+    });
+  });
+};
+
+exports.createPages = async ({ actions }) => {
+  const { createPage } = actions;
+  const template = resolve(__dirname, `src/case-study.js`);
+  Object.keys(caseStudies).forEach(key => {
+    caseStudies[key].forEach((cs, i) => {
+      const path = `/services/${key}/case-study-${i + 1}`;
+      createPage({
+        path,
+        component: template,
+        context: {
+          pagePath: path,
+          images: `/${key}-cs${i + 1}(.*).jpg$/`
+        }
+      });
+    });
+  });
+};

src/case-study.js

@@ -0,0 +1,122 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Layout from "./layout";
+import {
+  CustomGallery,
+  Header,
+  Heading,
+  Section,
+  Table,
+  Text
+} from "./components";
+
+const shadows = {
+  white: "xl-white",
+  "dark-grey": "xl-black"
+};
+
+export default function CaseStudy({ data }) {
+  const {
+    path,
+    title,
+    titleColor,
+    location,
+    image,
+    key_features,
+    price,
+    time_taken,
+    date,
+    content
+  } = data.caseStudy;
+  const images = data.images.nodes.map(node => node.childImageSharp);
+  return (
+    <Layout location={path} title={`${title} Case Study`}>
+      <Header image={images[image].full}>
+        <Heading shadow={shadows[titleColor]} color={titleColor}>
+          {title}
+        </Heading>
+        <Text size="lg" color={titleColor}>
+          {location}
+        </Text>
+      </Header>
+      <Section>
+        <Table>
+          <tbody>
+            <tr>
+              <td>Key features</td>
+              <td>{key_features}</td>
+            </tr>
+            <tr>
+              <td>Price</td>
+              <td>{price}</td>
+            </tr>
+            <tr>
+              <td>Time taken</td>
+              <td>{time_taken}</td>
+            </tr>
+            <tr>
+              <td>Date</td>
+              <td>{date}</td>
+            </tr>
+          </tbody>
+        </Table>
+        {content.map((child, i) => (
+          <Text key={i}>{child}</Text>
+        ))}
+      </Section>
+      <Section heading="Gallery" variant="primary">
+        <CustomGallery images={images} />
+      </Section>
+    </Layout>
+  );
+}
+
+export const query = graphql`
+  query CaseStudyQuery($pagePath: String!, $images: String!) {
+    caseStudy(path: { eq: $pagePath }) {
+      path
+      title
+      titleColor
+      location
+      image
+      key_features
+      price
+      time_taken
+      date
+      content
+    }
+    images: allFile(
+      filter: { relativePath: { regex: $images } }
+      sort: { fields: relativePath }
+    ) {
+      nodes {
+        childImageSharp {
+          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+          full: fluid(maxWidth: 1280, quality: 90) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+        }
+      }
+    }
+  }
+`;
+/*
+    images: allFile
+      filter: { relativePath: { regex: $images } }
+      sort: { fields: relativePath }
+    ) {
+      nodes {
+        childImageSharp {
+          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+          full: fluid(maxWidth: 1280, quality: 90) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+        }
+      }
+    }
+  }
+`;*/

src/data/case-studies.json

@@ -0,0 +1,187 @@
+{
+  "bathrooms": [
+    {
+      "title": "Modern Bathroom",
+      "titleColor": "white",
+      "location": "Maldon, Essex",
+      "image": 0,
+      "key_features": "Damp proofing, Tiling, Alcove lighting",
+      "price": "£4,900",
+      "time_taken": "12 days",
+      "date": "December 2020",
+      "content": [
+        "This medium sized bathroom in Maldon, Essex came with very few design problems. The old bathroom was completely stripped out to a shell. The bathroom showed small signs of damp which was easily rectified with a waterproof membrane inserted within the shower walls.",
+        "The client decided to replace the old bath with a large walk-in shower. Client chose to have a false ceiling installed with spot lights and an alcove with electrics and lighting was fitted to give the bathroom a warm feeling.",
+        "We stripped out the old bathroom and disposed of all rubbish. We tiled, plastered and painted the floor and walls, installed the new bathroom with tiling, plastering, painting and all electrical works.",
+        "Total price for labour and building materials: £4,900."
+      ]
+    },
+    {
+      "title": "Compact Bathroom",
+      "titleColor": "white",
+      "location": "Hackney, London",
+      "image": 0,
+      "key_features": "Damp proofing, Recessed shower mixer",
+      "price": "£4,000",
+      "time_taken": "10 days",
+      "date": "November 2020",
+      "content": [
+        "Very small bathroom in a block of flats In Hackney, E9.",
+        "Existing bathroom was extremely old. We stripped the bathroom back to the shell and addressed damp issues.",
+        "Client went with our suggestion of using two different wall tiles.",
+        "Shower mixer was inserted in to wall to give the bathroom a modern, minimal feel.",
+        "Bathroom went from old and dated to fresh and modern.",
+        "Total price for labour and materials: £4,000."
+      ]
+    },
+    {
+      "title": "Modest Shower Room",
+      "titleColor": "dark-grey",
+      "location": "Maldon, Essex",
+      "image": 0,
+      "key_features": "Accessible shower, False ceiling with spot lights",
+      "price": "£4,300",
+      "time_taken": "10 days",
+      "date": "January 2021",
+      "content": [
+        "Medium sized bathroom for an elderly lady who had trouble getting in and out of the bath.",
+        "Complete refurbishment, bathroom was 20 years old and showed signs of damp. Completely stripped out old bathroom, disposed of all rubbish and lefy to air out with windows open for 3 days",
+        "New bathroom installed with a fresh look and easy to maintain. 4 spot lights installed in false ceiling.",
+        "Total price for labour and materials: £4,300."
+      ]
+    },
+    {
+      "title": "Period with a Modern Twist",
+      "titleColor": "white",
+      "location": "Hampstead, London",
+      "image": 0,
+      "key_features": "Period features with modern twist",
+      "price": "£7,800",
+      "time_taken": "3 weeks",
+      "date": "October 2020",
+      "content": [
+        "A complete refurbishment in a three bedroom house in Hampstead, London.",
+        "Existing bathroom was more than 20 years old. We completely stripped out the old bathroom and disposed of all rubbish.",
+        "Client went for a Victorian style with a modern twist.",
+        "Total price for labour and materials: £7,800."
+      ]
+    },
+    {
+      "title": "En-suite",
+      "titleColor": "white",
+      "location": "Chelmsford, Essex",
+      "image": 0,
+      "key_features": "Feature wall with alcove shelf",
+      "price": "£6,400",
+      "time_taken": "11 days",
+      "date": "December 2020",
+      "content": [
+        "2 bedroom flat Chelmsford. An en-suite bathroom. The existing bathroom was 10 years old and very dated.",
+        "Client went for fairly cheap products and tiles to keep within their budget.",
+        "Service included stripping out old bathroom and disposing of all rubbish, supplying and fitting everything.",
+        "Total price for labour and materials: £6,400."
+      ]
+    }
+  ],
+  "tiling": [
+    {
+      "title": "New Extension",
+      "titleColor": "dark-grey",
+      "location": "Eltham, London",
+      "image": 3,
+      "key_features": "Under floor heating",
+      "price": "£2,400",
+      "time_taken": "4 days",
+      "date": "November 2020",
+      "content": [
+        "20 square meters of floor tiles laid in a new extension.",
+        "We fitted under floor heating before laying self levelling compound.",
+        "The tiles were also grouted and sealed.",
+        "The project took 4 days to complete.",
+        "Total price for labour and materials: £2,400."
+      ]
+    },
+    {
+      "title": "Ceramic Floor Tiles",
+      "titleColor": "white",
+      "location": "Brentwood, Essex",
+      "image": 3,
+      "key_features": "Ceramic floor tiles",
+      "price": "£1,100",
+      "time_taken": "1 day",
+      "date": "December 2020",
+      "content": [
+        "The client needed 19 square meters of ceramic floor tiles fitted at short notice.",
+        "We first applied self leveling compound as the concrete floor was quite uneven. After 2 days to allow for the compound to completely dry, we returned to install the tiles.",
+        "The installation was completed in one day and the client was able to continue with the kitchen installation the following day.",
+        "The client provided the ceramic floor tiles and we provided the levelling compound, adhesive and grout.",
+        "Total price for labour and materials: £1,100."
+      ]
+    },
+    {
+      "title": "Period Floor Tiles",
+      "titleColor": "white",
+      "location": "Barnes, London",
+      "image": 0,
+      "key_features": "Period style tiles",
+      "price": "£2,100",
+      "time_taken": "5 days",
+      "date": "October 2020",
+      "content": [
+        "This room had old porcelain tiles, which we removed and disposed. We then applied self levelling compound to the floor and allowed to set for 24 hours.",
+        "All skirting and radiators were removed.",
+        "20 square meters of new tiles were laid and sealed for protection.",
+        "Total price for labour and materials: £2,100."
+      ]
+    },
+    {
+      "title": "Wood Effect Porcelain",
+      "titleColor": "white",
+      "location": "Charlton, London",
+      "image": 0,
+      "key_features": "Wood effect porcelain tiles",
+      "price": "£3,100",
+      "time_taken": "7 days",
+      "date": "October 2020",
+      "content": [
+        "Client needed old wooden floor removed. Once floor was removed 12mm concrete boards were laid to create a solid foundation.",
+        "50 square meters long porcelain tiles were laid sealed and grouted.",
+        "All rubbish was removed from site and included in the price.",
+        "We supplied all materials except tiles.",
+        "Total price for labour and materials: £3,100."
+      ]
+    },
+    {
+      "title": "Period Floor Tiles",
+      "titleColor": "white",
+      "location": "Chelsea, London",
+      "image": 0,
+      "key_features": "Under floor heating",
+      "price": "£5,600",
+      "time_taken": "2 weeks",
+      "date": "October 2020",
+      "content": [
+        "Existing floor consisted of dated tiles, client wanted to replace them and install under floor heating at the same time.",
+        "Floor and adhesive was removed and disposed.",
+        "Electric under floor heating system was installed and levelling compound applied.",
+        "54 square meters new tiles were laid, grouted and sealed.",
+        "Total price for labour and materials: £5,600."
+      ]
+    },
+    {
+      "title": "Patterned Floor Tiles",
+      "titleColor": "dark-grey",
+      "location": "Fulham, London",
+      "image": 0,
+      "key_features": "Under floor heating",
+      "price": "£4,500",
+      "time_taken": "1 week",
+      "date": "October 2020",
+      "content": [
+        "Removed old flooring and adhesive and disposed of all rubbish.",
+        "Installed electric under floor heating and laid 35 square meters of new tiles.",
+        "Total price for labour and materials: £4,500."
+      ]
+    }
+  ]
+}

src/pages/services/bathrooms.js

@@ -1,14 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  Card,
-  Grid,
-  Header,
-  Heading,
-  Section,
-  Text
-} from "../../../components";
+import Layout from "../../layout";
+import { Card, Grid, Header, Heading, Section, Text } from "../../components";
 
 export default function Index({ data }) {
   return (
@@ -45,41 +38,16 @@ export default function Index({ data }) {
       </Section>
       <Section heading="Case studies" variant="primary">
         <Grid columns={[1, 2, 3]} breakpoints={["25em", "50em"]}>
+          {data.caseStudies.nodes.map((cs, i) => (
             <Card
-            to="/services/bathrooms/case-study-1"
-            image={data.images.nodes[0].childImageSharp.fluid}
-            heading={<Heading el="h3">Modern Bathroom</Heading>}
+              key={i}
+              to={cs.path}
+              image={data.images.nodes[i].childImageSharp.fluid}
+              heading={<Heading el="h3">{cs.title}</Heading>}
             >
-            Maldon, Essex
-          </Card>
-          <Card
-            to="/services/bathrooms/case-study-2"
-            image={data.images.nodes[1].childImageSharp.fluid}
-            heading={<Heading el="h3">Compact Bathroom</Heading>}
-          >
-            Hackney, London
-          </Card>
-          <Card
-            to="/services/bathrooms/case-study-3"
-            image={data.images.nodes[2].childImageSharp.fluid}
-            heading={<Heading el="h3">Modest Shower Room</Heading>}
-          >
-            Maldon, Essex
-          </Card>
-          <Card
-            to="/services/bathrooms/case-study-4"
-            image={data.images.nodes[3].childImageSharp.fluid}
-            heading={<Heading el="h3">Period with a Modern Twist</Heading>}
-          >
-            Hampstead, London
-          </Card>
-          <Card
-            to="/services/bathrooms/case-study-5"
-            image={data.images.nodes[4].childImageSharp.fluid}
-            heading={<Heading el="h3">En-suite</Heading>}
-          >
-            Chelmsford, Essex
+              {cs.location}
             </Card>
+          ))}
         </Grid>
       </Section>
     </Layout>
@@ -95,8 +63,18 @@ export const query = graphql`
         }
       }
     }
+    caseStudies: allCaseStudy(
+      filter: { type: { eq: "bathrooms" } }
+      sort: { fields: path }
+    ) {
+      nodes {
+        title
+        location
+        path
+      }
+    }
     images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs(.*)a.jpg$/" } }
+      filter: { relativePath: { regex: "/bathrooms-cs(.*)a.jpg$/" } }
       sort: { fields: relativePath }
     ) {
       nodes {

src/pages/services/bathrooms/case-study-1.js

@@ -1,89 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/bathrooms/case-study-1"
-      title="Modern Bathroom Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Modern Bathroom</Heading>
-        <Text size="lg">Maldon, Essex</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Damp proofing, Tiling, Alcove lighting</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£4,900</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>12 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>December 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          This medium sized bathroom in Maldon, Essex came with very few design
-          problems. The old bathroom was completely stripped out to a shell. The
-          bathroom showed small signs of damp which was easily rectified with a
-          waterproof membrane inserted within the shower walls.
-        </Text>
-        <Text>
-          The client decided to replace the old bath with a large walk-in
-          shower. Client chose to have a false ceiling installed with spot
-          lights and an alcove with electrics and lighting was fitted to give
-          the bathroom a warm feeling.
-        </Text>
-        <Text>
-          We stripped out the old bathroom and disposed of all rubbish. We
-          tiled, plastered and painted the floor and walls, installed the new
-          bathroom with tiling, plastering, painting and all electrical works.
-        </Text>
-        <Text>Total price for labour and building materials: £4,900.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs1(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/bathrooms/case-study-2.js

@@ -1,85 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/bathrooms/case-study-2"
-      title="Compact Bathroom Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Compact Bathroom</Heading>
-        <Text size="lg">Hackney, London</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Damp proofing, Recessed shower mixer</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£4,000</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>10 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>November 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>Very small bathroom in a block of flats In Hackney, E9.</Text>
-        <Text>
-          Existing bathroom was extremely old. We stripped the bathroom back to
-          the shell and addressed damp issues.
-        </Text>
-        <Text>
-          Client went with our suggestion of using two different wall tiles.
-        </Text>
-        <Text>
-          Shower mixer was inserted in to wall to give the bathroom a modern,
-          minimal feel.
-        </Text>
-        <Text>Bathroom went from old and dated to fresh and modern.</Text>
-        <Text>Total price for labour and materials: £4,000.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs2(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/bathrooms/case-study-3.js

@@ -1,89 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/bathrooms/case-study-3"
-      title="Modest Shower Room Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-black" color="dark-grey">
-          Modest Shower Room
-        </Heading>
-        <Text size="lg" color="dark-grey">
-          Maldon, Essex
-        </Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Accessible shower, False ceiling with spot lights</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£4,300</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>10 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>January 2021</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          Medium sized bathroom for an elderly lady who had trouble getting in
-          and out of the bath.
-        </Text>
-        <Text>
-          Complete refurbishment, bathroom was 20 years old and showed signs of
-          damp. Completely stripped out old bathroom, disposed of all rubbish
-          and lefy to air out with windows open for 3 days
-        </Text>
-        <Text>
-          New bathroom installed with a fresh look and easy to maintain. 4 spot
-          lights installed in false ceiling.
-        </Text>
-        <Text>Total price for labour and materials: £4,300.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs3(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/bathrooms/case-study-4.js

@@ -1,81 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/bathrooms/case-study-4"
-      title="Period with a Modern Twist Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Period with a Modern Twist</Heading>
-        <Text size="lg">Hampstead, London</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Period features with modern twist</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£7,800</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>3 weeks</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>October 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          A complete refurbishment in a three bedroom house in Hampstead,
-          London.
-        </Text>
-        <Text>
-          Existing bathroom was more than 20 years old. We completely stripped
-          out the old bathroom and disposed of all rubbish.
-        </Text>
-        <Text>Client went for a Victorian style with a modern twist</Text>
-        <Text>Total price for labour and materials: £7,800.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs4(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/bathrooms/case-study-5.js

@@ -1,84 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/bathrooms/case-study-5"
-      title="En-suite Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">En-suite</Heading>
-        <Text size="lg">Chelmsford, Essex</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Feature wall with alcove shelf</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£6,400</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>11 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>December 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          2 bedroom flat Chelmsford. An en-suite bathroom. The existing bathroom
-          was 10 years old and very dated.
-        </Text>
-        <Text>
-          Client went for fairly cheap products and tiles to keep within their
-          budget.
-        </Text>
-        <Text>
-          Service included stripping out old bathroom and disposing of all
-          rubbish, supplying and fitting everything.
-        </Text>
-        <Text>Total price for labour and materials: £6,400.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/bathroom-cs5(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Layout from "../../layout";
+import { Card, Grid, Header, Heading, Section, Text } from "../../components";
+
+export default function Index({ data }) {
+  return (
+    <Layout location="/services/tiling" title="Tiling">
+      <Header image={data.headerImage.childImageSharp.fluid}>
+        <Heading shadow="xl-black" color="dark-grey">
+          Tiling
+        </Heading>
+      </Header>
+      <Section heading="We specialise in floor tiling">
+        <Text>
+          We can install both floor and wall tiles, including ceramic, natural
+          stone, marble, quartz, porcelain and mosaic tiles.
+        </Text>
+        <Text>
+          Our elite team of 3 stonemasons and 3 tilers has a combined total of
+          112 years of experience within the industry.
+        </Text>
+      </Section>
+      <Section heading="Case studies" variant="primary">
+        <Grid columns={[1, 2, 3]} breakpoints={["30em", "45em"]}>
+          {data.caseStudies.nodes.map((cs, i) => (
+            <Card
+              key={i}
+              to={cs.path}
+              image={data.images.nodes[i].childImageSharp.fluid}
+              heading={<Heading el="h3">{cs.title}</Heading>}
+            >
+              {cs.location}
+            </Card>
+          ))}
+        </Grid>
+      </Section>
+    </Layout>
+  );
+}
+
+export const query = graphql`
+  query {
+    headerImage: file(relativePath: { eq: "banner_tiling.jpg" }) {
+      childImageSharp {
+        fluid(maxWidth: 1920, quality: 90) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    caseStudies: allCaseStudy(
+      filter: { type: { eq: "tiling" } }
+      sort: { fields: path }
+    ) {
+      nodes {
+        title
+        location
+        path
+      }
+    }
+    images: allFile(
+      filter: { relativePath: { regex: "/tiling-cs(1d|2e|3a|4a|5a|6a).jpg$/" } }
+      sort: { fields: relativePath }
+    ) {
+      nodes {
+        childImageSharp {
+          fluid(maxWidth: 640, maxHeight: 480, quality: 90) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+        }
+      }
+    }
+  }
+`;

src/pages/services/tiling/case-study-1.js

@@ -1,84 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-1"
-      title="New Extension Case Study"
-    >
-      <Header image={images[3].full}>
-        <Heading shadow="xl-black" color="dark-grey">
-          New Extension
-        </Heading>
-        <Text size="lg" color="dark-grey">
-          Eltham, London
-        </Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Under floor heating</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£2,400</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>4 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>November 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          20m<sup>2</sup> of floor tiles laid in a new extension.
-        </Text>
-        <Text>
-          We fitted under floor heating before laying self levelling compound.
-        </Text>
-        <Text>The tiles were also grouted and sealed.</Text>
-        <Text>The project took 4 days to complete.</Text>
-        <Text>Total price for labour and materials: £2,400.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs1(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/case-study-2.js

@@ -1,89 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-2"
-      title="Ceramic Floor Tiles Case Study"
-    >
-      <Header image={images[3].full}>
-        <Heading shadow="xl-white">Ceramic Floor Tiles</Heading>
-        <Text size="lg">Brentwood, Essex</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Ceramic floor tiles</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£1,100</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>1 day</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>December 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          The client needed 19m<sup>2</sup> of ceramic floor tiles fitted at
-          short notice.
-        </Text>
-        <Text>
-          We first applied self leveling compound as the concrete floor was
-          quite uneven. After 2 days to allow for the compound to completely
-          dry, we returned to install the tiles.
-        </Text>
-        <Text>
-          The installation was completed in one day and the client was able to
-          continue with the kitchen installation the following day.
-        </Text>
-        <Text>
-          The client provided the ceramic floor tiles and we provided the
-          levelling compound, adhesive and grout.
-        </Text>
-        <Text>Total price for labour and materials: £1,100.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs2(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/case-study-3.js

@@ -1,81 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-3"
-      title="Period Floor Tiles Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Period Floor Tiles</Heading>
-        <Text size="lg">Barnes, London</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Period style tiles</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£2,100</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>5 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>October 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          This room had old porcelain tiles, which we removed and disposed. We
-          then applied self levelling compound to the floor and allowed to set
-          for 24 hours.
-        </Text>
-        <Text>All skirting and radiators were removed.</Text>
-        <Text>
-          20m<sup>2</sup> of new tiles were laid and sealed for protection.
-        </Text>
-        <Text>Total price for labour and materials: £2,100.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs3(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/case-study-4.js

@@ -1,83 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-4"
-      title="Wood Effect Porcelain Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Wood Effect Porcelain</Heading>
-        <Text size="lg">Charlton, London</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Wood effect porcelain tiles</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£3,100</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>7 days</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>October 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          Client needed old wooden floor removed. Once floor was removed 12mm
-          concrete boards were laid to create a solid foundation.
-        </Text>
-        <Text>
-          50m<sup>2</sup> long porcelain tiles were laid sealed and grouted.
-        </Text>
-        <Text>
-          All rubbish was removed from site and included in the price.
-        </Text>
-        <Text>We supplied all materials except tiles.</Text>
-        <Text>Total price for labour and materials: £3,100.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs4(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/case-study-5.js

@@ -1,84 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-5"
-      title="Period Floor Tiles Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-white">Period Floor Tiles</Heading>
-        <Text size="lg">Chelsea, London</Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Under floor heating</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£5,600</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>2 weeks</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>October 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          Existing floor consisted of dated tiles, client wanted to replace them
-          and install under floor heating at the same time.
-        </Text>
-        <Text>Floor and adhesive was removed and disposed.</Text>
-        <Text>
-          Electric under floor heating system was installed and levelling
-          compound applied.
-        </Text>
-        <Text>
-          54m<sup>2</sup> new tiles were laid, grouted and sealed.
-        </Text>
-        <Text>Total price for labour and materials: £5,600.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs5(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/case-study-6.js

@@ -1,83 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  CustomGallery,
-  Header,
-  Heading,
-  Section,
-  Table,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  const images = data.images.nodes.map(node => node.childImageSharp);
-  return (
-    <Layout
-      location="/services/tiling/case-study-6"
-      title="Patterned Floor Tiles Case Study"
-    >
-      <Header image={images[0].full}>
-        <Heading shadow="xl-black" color="dark-grey">
-          Patterned Floor Tiles
-        </Heading>
-        <Text size="lg" color="dark-grey">
-          Fulham, London
-        </Text>
-      </Header>
-      <Section>
-        <Table>
-          <tbody>
-            <tr>
-              <td>Key features</td>
-              <td>Under floor heating</td>
-            </tr>
-            <tr>
-              <td>Price</td>
-              <td>£4,500</td>
-            </tr>
-            <tr>
-              <td>Time taken</td>
-              <td>1 week</td>
-            </tr>
-            <tr>
-              <td>Date</td>
-              <td>October 2020</td>
-            </tr>
-          </tbody>
-        </Table>
-        <Text>
-          Removed old flooring and adhesive and disposed of all rubbish.
-        </Text>
-        <Text>
-          Installed electric under floor heating and laid 35m<sup>2</sup> of new
-          tiles.
-        </Text>
-        <Text>Total price for labour and materials: £4,500.</Text>
-      </Section>
-      <Section heading="Gallery" variant="primary">
-        <CustomGallery images={images} />
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs6(.*).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          thumb: fluid(maxWidth: 256, maxHeight: 256, quality: 80) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-          full: fluid(maxWidth: 1280, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;

src/pages/services/tiling/index.js

@@ -1,103 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../../../layout";
-import {
-  Card,
-  Grid,
-  Header,
-  Heading,
-  Section,
-  Text
-} from "../../../components";
-
-export default function Index({ data }) {
-  return (
-    <Layout location="/services/tiling" title="Tiling">
-      <Header image={data.headerImage.childImageSharp.fluid}>
-        <Heading shadow="xl-black" color="dark-grey">
-          Tiling
-        </Heading>
-      </Header>
-      <Section heading="We specialise in floor tiling">
-        <Text>
-          We can install both floor and wall tiles, including ceramic, natural
-          stone, marble, quartz, porcelain and mosaic tiles.
-        </Text>
-        <Text>
-          Our elite team of 3 stonemasons and 3 tilers has a combined total of
-          112 years of experience within the industry.
-        </Text>
-      </Section>
-      <Section heading="Case studies" variant="primary">
-        <Grid columns={[1, 2, 3]} breakpoints={["30em", "45em"]}>
-          <Card
-            to="/services/tiling/case-study-1"
-            image={data.images.nodes[0].childImageSharp.fluid}
-            heading={<Heading el="h3">New Extension</Heading>}
-          >
-            Eltham, London
-          </Card>
-          <Card
-            to="/services/tiling/case-study-2"
-            image={data.images.nodes[1].childImageSharp.fluid}
-            heading={<Heading el="h3">Ceramic Floor Tiles</Heading>}
-          >
-            Brentwood, Essex
-          </Card>
-          <Card
-            to="/services/tiling/case-study-3"
-            image={data.images.nodes[2].childImageSharp.fluid}
-            heading={<Heading el="h3">Period Floor Tiles</Heading>}
-          >
-            Barnes, London
-          </Card>
-          <Card
-            to="/services/tiling/case-study-4"
-            image={data.images.nodes[3].childImageSharp.fluid}
-            heading={<Heading el="h3">Wood Effect Porcelain</Heading>}
-          >
-            Charlton, London
-          </Card>
-          <Card
-            to="/services/tiling/case-study-5"
-            image={data.images.nodes[4].childImageSharp.fluid}
-            heading={<Heading el="h3">Period Floor Tiles</Heading>}
-          >
-            Chelsea, London
-          </Card>
-          <Card
-            to="/services/tiling/case-study-6"
-            image={data.images.nodes[5].childImageSharp.fluid}
-            heading={<Heading el="h3">Patterned Floor Tiles</Heading>}
-          >
-            Fulham, London
-          </Card>
-        </Grid>
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    headerImage: file(relativePath: { eq: "banner_tiling.jpg" }) {
-      childImageSharp {
-        fluid(maxWidth: 1920, quality: 90) {
-          ...GatsbyImageSharpFluid_withWebp
-        }
-      }
-    }
-    images: allFile(
-      filter: { relativePath: { regex: "/tiling-cs(1d|2e|3a|4a|5a|6a).jpg$/" } }
-      sort: { fields: relativePath }
-    ) {
-      nodes {
-        childImageSharp {
-          fluid(maxWidth: 640, maxHeight: 480, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
-        }
-      }
-    }
-  }
-`;