feat: add 3 new case studies
This commit is contained in:
78
src/pages/services/tiling/case-study-3.js
Normal file
78
src/pages/services/tiling/case-study-3.js
Normal file
@@ -0,0 +1,78 @@
|
||||
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">
|
||||
<Header image={images[0].full}>
|
||||
<Heading shadow="xl-black">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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
80
src/pages/services/tiling/case-study-4.js
Normal file
80
src/pages/services/tiling/case-study-4.js
Normal file
@@ -0,0 +1,80 @@
|
||||
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">
|
||||
<Header image={images[0].full}>
|
||||
<Heading shadow="xl-black">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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
81
src/pages/services/tiling/case-study-5.js
Normal file
81
src/pages/services/tiling/case-study-5.js
Normal file
@@ -0,0 +1,81 @@
|
||||
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">
|
||||
<Header image={images[0].full}>
|
||||
<Heading shadow="xl-black">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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -27,7 +27,7 @@ export default function Index({ data }) {
|
||||
</Text>
|
||||
</Section>
|
||||
<Section heading="Case studies" variant="primary">
|
||||
<Grid columns={[1, 2]} breakpoints={["30em"]}>
|
||||
<Grid columns={[1, 2, 3]} breakpoints={["30em", "45em"]}>
|
||||
<Card
|
||||
to="/services/tiling/case-study-1"
|
||||
image={data.images.nodes[0].childImageSharp.fluid}
|
||||
@@ -42,6 +42,27 @@ export default function Index({ data }) {
|
||||
>
|
||||
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>
|
||||
</Grid>
|
||||
</Section>
|
||||
</Layout>
|
||||
@@ -58,7 +79,7 @@ export const query = graphql`
|
||||
}
|
||||
}
|
||||
images: allFile(
|
||||
filter: { relativePath: { regex: "/tiling-cs(1d|2e).jpg$/" } }
|
||||
filter: { relativePath: { regex: "/tiling-cs(1d|2e|3a|4a|5a).jpg$/" } }
|
||||
sort: { fields: relativePath }
|
||||
) {
|
||||
nodes {
|
||||
|
||||
Reference in New Issue
Block a user