dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add 3 new case studies

Browse Source
This commit is contained in:
Dan Head
2021-02-02 17:03:34 +00:00
parent dc8319b946
commit 6fe0f39ac3
7 changed files with 262 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/tiling-cs3a.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 KiB

BIN
src/images/tiling-cs4a.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
src/images/tiling-cs5a.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 KiB

78
src/pages/services/tiling/case-study-3.js Normal file
View 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
View 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
View 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
}
}
}
}
}
`;

25
src/pages/services/tiling/index.js
View File

@@ -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 {