diff --git a/gatsby-config.js b/gatsby-config.js index ae88bd6..7553619 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -23,14 +23,6 @@ module.exports = { { title: "Tiling", to: "/services/tiling" - }, - { - title: "Electrics", - to: "/services/electrics" - }, - { - title: "Carpentry", - to: "/services/carpentry" } ] }, diff --git a/package-lock.json b/package-lock.json index 5636954..50ba234 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1134,6 +1134,15 @@ "to-fast-properties": "^2.0.0" } }, + "@browniebroke/gatsby-image-gallery": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@browniebroke/gatsby-image-gallery/-/gatsby-image-gallery-4.0.2.tgz", + "integrity": "sha512-kP6vxq4PkI2Lf6pHngcwdHY2pIm16K3eKYt99GnEOYSpucIbKUoar5WmZFSg3wWXc/48SiDzPpkp2yYuAsYZFw==", + "requires": { + "react-image-lightbox": "^5.1.1", + "styled-components": "^5.0.0" + } + }, "@emotion/babel-plugin": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz", @@ -1206,6 +1215,14 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, "@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", @@ -1264,6 +1281,11 @@ } } }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -3532,6 +3554,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.13.0.tgz", "integrity": "sha512-6sL3JVKDa3OjXtmBYrr467BnQeUjNI7p2dy+aBwbB8WqChHLJOFh5+lxfzC0z/7hBehqmWpBV7xHfZdIP1lAzQ==" }, + "babel-plugin-styled-components": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz", + "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -4551,6 +4589,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5511,6 +5554,11 @@ } } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -5635,6 +5683,16 @@ "fastparse": "^1.1.2" } }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -7391,6 +7449,11 @@ } } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exif-parser": { "version": "0.1.12", "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz", @@ -15423,6 +15486,15 @@ "source-map": "^0.7.3" } }, + "react-image-lightbox": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz", + "integrity": "sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA==", + "requires": { + "prop-types": "^15.6.2", + "react-modal": "^3.8.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -15433,6 +15505,17 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-modal": { + "version": "3.12.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.12.1.tgz", + "integrity": "sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -17506,6 +17589,38 @@ "inline-style-parser": "0.1.1" } }, + "styled-components": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz", + "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 377e328..8c3771d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ ] }, "dependencies": { + "@browniebroke/gatsby-image-gallery": "^4.0.2", "@emotion/react": "^11.1.4", "@emotion/styled": "^11.0.0", "@fontsource/cooper-hewitt": "^4.1.0", diff --git a/src/components/custom-gallery.js b/src/components/custom-gallery.js new file mode 100644 index 0000000..1559d52 --- /dev/null +++ b/src/components/custom-gallery.js @@ -0,0 +1,15 @@ +import React from "react"; +import Gallery from "@browniebroke/gatsby-image-gallery"; +import styled from "@emotion/styled"; + +const Container = styled.div` + padding: 0 15px; // Offset negative margin in Gallery +`; + +export default function CustomGallery({ ...other }) { + return ( + + + + ); +} diff --git a/src/components/header.js b/src/components/header.js index 9857c8a..b726b9e 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -5,7 +5,8 @@ import { css } from "@emotion/react"; const Container = styled.header` position: relative; height: 50vh; - color: white; + min-height: 280px; + color: var(--color-white); ${props => props.avoidNav && `margin-top: 40px;`} `; @@ -47,6 +48,8 @@ export default function Header({ map, position = "middle middle", avoidNav, + variant, + swap, children }) { const [posY, posX] = position.split(" "); diff --git a/src/components/heading.js b/src/components/heading.js index 0a226dc..6e306c5 100644 --- a/src/components/heading.js +++ b/src/components/heading.js @@ -55,7 +55,8 @@ export default function Heading({ return ( diff --git a/src/components/index.js b/src/components/index.js index 7208d14..6d64cc4 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,7 @@ export { default as Button } from "./button"; export { default as Card } from "./card"; export { default as Content } from "./content"; +export { default as CustomGallery } from "./custom-gallery"; export { default as CustomSlick } from "./custom-slick"; export { default as Footer } from "./footer"; export { default as Grid } from "./grid"; @@ -18,5 +19,6 @@ export { default as NavLink } from "./nav-link"; export { default as Nav } from "./nav"; export { default as ReviewSummary } from "./review-summary"; export { default as Section } from "./section"; +export { default as Table } from "./table"; export { default as Text } from "./text"; export { default as Tile } from "./tile"; diff --git a/src/components/table.js b/src/components/table.js new file mode 100644 index 0000000..71c7d90 --- /dev/null +++ b/src/components/table.js @@ -0,0 +1,21 @@ +import React from "react"; +import styled from "@emotion/styled"; + +const CustomTable = styled.table` + margin-bottom: var(--spacing-y-md); + border-collapse: collapse; + + td { + padding: var(--spacing-y-xs) var(--spacing-x-sm); + border: 1px solid var(--color-dark-grey); + } + + td:first-of-type { + font-weight: 700; + text-align: right; + } +`; + +export default function Table({ children }) { + return {children}; +} diff --git a/src/icons/team.svg b/src/icons/team.svg new file mode 100644 index 0000000..db92874 --- /dev/null +++ b/src/icons/team.svg @@ -0,0 +1,3 @@ + diff --git a/src/images/banner_bathroom.jpg b/src/images/banner_bathroom.jpg new file mode 100644 index 0000000..bebd380 Binary files /dev/null and b/src/images/banner_bathroom.jpg differ diff --git a/src/images/banner_tiling.jpg b/src/images/banner_tiling.jpg new file mode 100644 index 0000000..53ae5d6 Binary files /dev/null and b/src/images/banner_tiling.jpg differ diff --git a/src/images/bathroom-cs1a.jpg b/src/images/bathroom-cs1a.jpg new file mode 100644 index 0000000..b29e757 Binary files /dev/null and b/src/images/bathroom-cs1a.jpg differ diff --git a/src/images/bathroom-cs1b.jpg b/src/images/bathroom-cs1b.jpg new file mode 100644 index 0000000..d45a946 Binary files /dev/null and b/src/images/bathroom-cs1b.jpg differ diff --git a/src/images/bathroom-cs1c.jpg b/src/images/bathroom-cs1c.jpg new file mode 100644 index 0000000..44a84c5 Binary files /dev/null and b/src/images/bathroom-cs1c.jpg differ diff --git a/src/images/bathroom-cs1d.jpg b/src/images/bathroom-cs1d.jpg new file mode 100644 index 0000000..bcd8121 Binary files /dev/null and b/src/images/bathroom-cs1d.jpg differ diff --git a/src/images/bathroom-cs1e.jpg b/src/images/bathroom-cs1e.jpg new file mode 100644 index 0000000..1fa2664 Binary files /dev/null and b/src/images/bathroom-cs1e.jpg differ diff --git a/src/images/bathroom-cs2a.jpg b/src/images/bathroom-cs2a.jpg new file mode 100644 index 0000000..1004431 Binary files /dev/null and b/src/images/bathroom-cs2a.jpg differ diff --git a/src/images/bathroom-cs2b.jpg b/src/images/bathroom-cs2b.jpg new file mode 100644 index 0000000..8437bb3 Binary files /dev/null and b/src/images/bathroom-cs2b.jpg differ diff --git a/src/images/bathroom-cs2c.jpg b/src/images/bathroom-cs2c.jpg new file mode 100644 index 0000000..83c052a Binary files /dev/null and b/src/images/bathroom-cs2c.jpg differ diff --git a/src/images/bathroom-cs3a.jpg b/src/images/bathroom-cs3a.jpg new file mode 100644 index 0000000..5f17342 Binary files /dev/null and b/src/images/bathroom-cs3a.jpg differ diff --git a/src/images/bathroom-cs3b.jpg b/src/images/bathroom-cs3b.jpg new file mode 100644 index 0000000..3304fa5 Binary files /dev/null and b/src/images/bathroom-cs3b.jpg differ diff --git a/src/images/bathroom-cs3c.jpg b/src/images/bathroom-cs3c.jpg new file mode 100644 index 0000000..9b765a7 Binary files /dev/null and b/src/images/bathroom-cs3c.jpg differ diff --git a/src/images/bathroom-cs4a.jpg b/src/images/bathroom-cs4a.jpg new file mode 100644 index 0000000..5d600bb Binary files /dev/null and b/src/images/bathroom-cs4a.jpg differ diff --git a/src/images/bathroom-cs4b.jpg b/src/images/bathroom-cs4b.jpg new file mode 100644 index 0000000..6bc1386 Binary files /dev/null and b/src/images/bathroom-cs4b.jpg differ diff --git a/src/images/bathroom-cs4c.jpg b/src/images/bathroom-cs4c.jpg new file mode 100644 index 0000000..6c953fc Binary files /dev/null and b/src/images/bathroom-cs4c.jpg differ diff --git a/src/images/bathroom-cs5a.jpg b/src/images/bathroom-cs5a.jpg new file mode 100644 index 0000000..c22b28f Binary files /dev/null and b/src/images/bathroom-cs5a.jpg differ diff --git a/src/images/bathroom-cs5b.jpg b/src/images/bathroom-cs5b.jpg new file mode 100644 index 0000000..88c2364 Binary files /dev/null and b/src/images/bathroom-cs5b.jpg differ diff --git a/src/images/bathroom.jpg b/src/images/bathroom.jpg new file mode 100644 index 0000000..beefe39 Binary files /dev/null and b/src/images/bathroom.jpg differ diff --git a/src/images/bathroom.png b/src/images/bathroom.png deleted file mode 100644 index cb19cfa..0000000 Binary files a/src/images/bathroom.png and /dev/null differ diff --git a/src/images/bathroom2.png b/src/images/bathroom2.png deleted file mode 100644 index c355e71..0000000 Binary files a/src/images/bathroom2.png and /dev/null differ diff --git a/src/images/bathroom3.png b/src/images/bathroom3.png deleted file mode 100644 index 540b6a8..0000000 Binary files a/src/images/bathroom3.png and /dev/null differ diff --git a/src/images/bathroom4.png b/src/images/bathroom4.png deleted file mode 100644 index 06a4358..0000000 Binary files a/src/images/bathroom4.png and /dev/null differ diff --git a/src/images/floor_tiles.png b/src/images/floor_tiles.png deleted file mode 100644 index 8ba913b..0000000 Binary files a/src/images/floor_tiles.png and /dev/null differ diff --git a/src/images/service_bathroom.png b/src/images/service_bathroom.png deleted file mode 100644 index fc72906..0000000 Binary files a/src/images/service_bathroom.png and /dev/null differ diff --git a/src/images/service_carpentry.png b/src/images/service_carpentry.png deleted file mode 100644 index 5119f19..0000000 Binary files a/src/images/service_carpentry.png and /dev/null differ diff --git a/src/images/service_electrics.png b/src/images/service_electrics.png deleted file mode 100644 index 41a9b30..0000000 Binary files a/src/images/service_electrics.png and /dev/null differ diff --git a/src/images/service_tiling.png b/src/images/service_tiling.png deleted file mode 100644 index 82249ea..0000000 Binary files a/src/images/service_tiling.png and /dev/null differ diff --git a/src/images/tiling-cs1a.jpg b/src/images/tiling-cs1a.jpg new file mode 100644 index 0000000..7973986 Binary files /dev/null and b/src/images/tiling-cs1a.jpg differ diff --git a/src/images/tiling-cs1b.jpg b/src/images/tiling-cs1b.jpg new file mode 100644 index 0000000..b5f2003 Binary files /dev/null and b/src/images/tiling-cs1b.jpg differ diff --git a/src/images/tiling-cs1c.jpg b/src/images/tiling-cs1c.jpg new file mode 100644 index 0000000..6404a8a Binary files /dev/null and b/src/images/tiling-cs1c.jpg differ diff --git a/src/images/tiling-cs1d.jpg b/src/images/tiling-cs1d.jpg new file mode 100644 index 0000000..7e2ee13 Binary files /dev/null and b/src/images/tiling-cs1d.jpg differ diff --git a/src/images/tiling-cs2a.jpg b/src/images/tiling-cs2a.jpg new file mode 100644 index 0000000..df38287 Binary files /dev/null and b/src/images/tiling-cs2a.jpg differ diff --git a/src/images/tiling-cs2b.jpg b/src/images/tiling-cs2b.jpg new file mode 100644 index 0000000..4a6c2fb Binary files /dev/null and b/src/images/tiling-cs2b.jpg differ diff --git a/src/images/tiling-cs2c.jpg b/src/images/tiling-cs2c.jpg new file mode 100644 index 0000000..fff341a Binary files /dev/null and b/src/images/tiling-cs2c.jpg differ diff --git a/src/images/tiling-cs2d.jpg b/src/images/tiling-cs2d.jpg new file mode 100644 index 0000000..deeee49 Binary files /dev/null and b/src/images/tiling-cs2d.jpg differ diff --git a/src/images/tiling-cs2e.jpg b/src/images/tiling-cs2e.jpg new file mode 100644 index 0000000..d00f243 Binary files /dev/null and b/src/images/tiling-cs2e.jpg differ diff --git a/src/images/tiling.jpg b/src/images/tiling.jpg new file mode 100644 index 0000000..4e8ece1 Binary files /dev/null and b/src/images/tiling.jpg differ diff --git a/src/layout.js b/src/layout.js index 2de4330..294de6f 100644 --- a/src/layout.js +++ b/src/layout.js @@ -6,6 +6,7 @@ import { css, Global } from "@emotion/react"; import "@fontsource/cooper-hewitt/400.css"; import "@fontsource/cooper-hewitt/400-italic.css"; import "@fontsource/cooper-hewitt/700.css"; +import "@browniebroke/gatsby-image-gallery/dist/style.css"; const GlobalStyles = css` :root { diff --git a/src/pages/404.js b/src/pages/404.js index be30f67..fff4199 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -19,9 +19,9 @@ export default function Index({ data }) { export const query = graphql` query { - headerImage: file(relativePath: { eq: "bathroom.png" }) { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 1920, quality: 100) { + fluid(maxWidth: 1920, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } diff --git a/src/pages/about.js b/src/pages/about.js index c649f2a..28fb9f3 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -50,9 +50,9 @@ export default function Index({ data }) { export const query = graphql` query { - headerImage: file(relativePath: { eq: "bathroom3.png" }) { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 1920, quality: 100) { + fluid(maxWidth: 1920, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } diff --git a/src/pages/contact.js b/src/pages/contact.js index bb5bd57..5931cea 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -6,6 +6,7 @@ import { Button, Grid, Header, + Heading, Icon, IconWithContent, InputText, @@ -14,9 +15,10 @@ import { Section, Text } from "../components"; -import Phone from "../icons/phone.svg"; -import Envelope from "../icons/envelope.svg"; import CheckCircle from "../icons/check-circle.svg"; +import Envelope from "../icons/envelope.svg"; +import Phone from "../icons/phone.svg"; +import Team from "../icons/team.svg"; const encodeData = data => Object.keys(data) @@ -53,15 +55,45 @@ export default function Index({ data }) {
-

Get in touch

+ + Get in touch +
- Get in touch with us - More info here + + + + + + The team + + +
    +
  • + + Nicholas Day - Sales and Marketing Manager + +
  • +
  • + + Daniel Costea - Project Director + +
  • +
  • + + Maria Antonia - After Sales Manager + +
  • +
  • + + Harry Jackson - Design and Consultation Manager + +
  • +
@@ -93,7 +125,7 @@ export default function Index({ data }) { Thank you for contacting us - + We will be in touch shortly @@ -163,9 +195,9 @@ export default function Index({ data }) { export const query = graphql` query { - headerImage: file(relativePath: { eq: "bathroom4.png" }) { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 1920, quality: 100) { + fluid(maxWidth: 1920, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } diff --git a/src/pages/index.js b/src/pages/index.js index cd501fd..a601bb7 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -58,21 +58,7 @@ export default function Index({ data }) { image={data.tilingImage.childImageSharp.fluid} heading={Tiling} > - Our tiling is primo! - - Electrics} - > - Bring some light to your next project - - Carpentry} - > - Our woodworking is sharp! + We can install many different styles
@@ -165,37 +151,23 @@ export default function Index({ data }) { export const query = graphql` query { - headerImage: file(relativePath: { eq: "bathroom.png" }) { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 1920, quality: 100) { + fluid(maxWidth: 1920, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } } - bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) { + bathroomImage: file(relativePath: { eq: "bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 480, quality: 100) { + fluid(maxWidth: 480, maxHeight: 320, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } } - tilingImage: file(relativePath: { eq: "service_tiling.png" }) { + tilingImage: file(relativePath: { eq: "tiling.jpg" }) { 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) { + fluid(maxWidth: 480, maxHeight: 320, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } diff --git a/src/pages/services/bathrooms.js b/src/pages/services/bathrooms.js deleted file mode 100644 index dc5aba5..0000000 --- a/src/pages/services/bathrooms.js +++ /dev/null @@ -1,120 +0,0 @@ -import React from "react"; -import { graphql } from "gatsby"; -import Img from "gatsby-image"; -import styled from "@emotion/styled"; -import Layout from "../../layout"; -import { Grid, Header, Section, Text } from "../../components"; - -const FullWidth = styled.div` - grid-column: 1 / 3; -`; - -export default function Index({ data }) { - return ( - -
-

Bathrooms

-
-
- -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed - risus ultricies tristique nulla aliquet enim tortor. Laoreet id - donec ultrices tincidunt arcu non sodales. Eu ultrices vitae - auctor eu augue ut lectus arcu bibendum. Egestas diam in arcu - cursus euismod quis. Suspendisse potenti nullam ac tortor vitae - purus faucibus ornare suspendisse. - -
-
- -
- - - Lacus sed turpis tincidunt id aliquet. Faucibus ornare suspendisse - sed nisi lacus sed viverra tellus in. In hac habitasse platea - dictumst. Dolor sit amet consectetur adipiscing. Facilisis magna - etiam tempor orci eu lobortis elementum. Sed enim ut sem viverra - aliquet. Leo vel fringilla est ullamcorper eget nulla facilisi - etiam. Sem integer vitae justo eget. Vitae elementum curabitur - vitae nunc sed velit dignissim sodales. Felis imperdiet proin - fermentum leo vel orci porta non. Donec et odio pellentesque diam - volutpat commodo sed egestas. Cursus in hac habitasse platea - dictumst quisque sagittis. Proin fermentum leo vel orci porta non - pulvinar. - - -
- -
-
- - Arcu dictum varius duis at consectetur. Blandit volutpat maecenas - volutpat blandit. Varius morbi enim nunc faucibus a pellentesque - sit amet. Mattis pellentesque id nibh tortor id aliquet lectus. - Venenatis a condimentum vitae sapien pellentesque habitant morbi - tristique. - -
- - - Commodo viverra maecenas accumsan lacus vel facilisis volutpat est - velit. Consequat nisl vel pretium lectus quam id leo in vitae. - Phasellus faucibus scelerisque eleifend donec. Ultricies mi quis - hendrerit dolor magna eget est lorem ipsum. Vitae tempus quam - pellentesque nec nam aliquam sem. Nulla at volutpat diam ut - venenatis tellus in metus vulputate. Faucibus in ornare quam - viverra. Neque ornare aenean euismod elementum nisi quis eleifend - quam adipiscing. Egestas maecenas pharetra convallis posuere morbi - leo. Proin nibh nisl condimentum id venenatis a condimentum vitae - sapien. - - - Phasellus egestas tellus rutrum tellus pellentesque eu. Facilisi - nullam vehicula ipsum a. Eget lorem dolor sed viverra. Nulla - facilisi nullam vehicula ipsum a arcu. Orci a scelerisque purus - semper. Sed tempus urna et pharetra pharetra. Ac turpis egestas - integer eget aliquet. Dui id ornare arcu odio. At volutpat diam ut - venenatis tellus in metus vulputate. Eu nisl nunc mi ipsum - faucibus vitae aliquet nec. Pharetra vel turpis nunc eget lorem. - Duis tristique sollicitudin nibh sit amet. Id nibh tortor id - aliquet lectus. Sed vulputate mi sit amet mauris commodo. Amet est - placerat in egestas. Tincidunt id aliquet risus feugiat in ante - metus dictum at. Vitae auctor eu augue ut lectus arcu bibendum at - varius. Viverra justo nec ultrices dui sapien eget. Nisl - condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. - - -
-
-
- ); -} - -export const query = graphql` - query { - headerImage: file(relativePath: { eq: "bathroom2.png" }) { - childImageSharp { - fluid(maxWidth: 1920, quality: 100) { - ...GatsbyImageSharpFluid_withWebp - } - } - } - image1: file(relativePath: { eq: "bathroom3.png" }) { - childImageSharp { - fluid(maxWidth: 640, quality: 100) { - ...GatsbyImageSharpFluid_withWebp - } - } - } - image2: file(relativePath: { eq: "bathroom4.png" }) { - childImageSharp { - fluid(maxWidth: 640, quality: 100) { - ...GatsbyImageSharpFluid_withWebp - } - } - } - } -`; diff --git a/src/pages/services/bathrooms/case-study-1.js b/src/pages/services/bathrooms/case-study-1.js new file mode 100644 index 0000000..e10f00b --- /dev/null +++ b/src/pages/services/bathrooms/case-study-1.js @@ -0,0 +1,86 @@ +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 ( + +
+ Modern Bathroom + Maldon, Essex +
+
+ + + + + + + + + + + + + + + + + + + +
Key featuresDamp proofing, Tiling, Alcove lighting
Price£4,900
Time takenX days
DateJan 2099
+ + 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/bathrooms/case-study-2.js b/src/pages/services/bathrooms/case-study-2.js new file mode 100644 index 0000000..cb367d2 --- /dev/null +++ b/src/pages/services/bathrooms/case-study-2.js @@ -0,0 +1,82 @@ +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 ( + +
+ Compact Bathroom + Hackney, London +
+
+ + + + + + + + + + + + + + + + + + + +
Key featuresDamp proofing, Recessed shower mixer
Price£4,000
Time takenX days
DateJan 2099
+ 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/bathrooms/case-study-3.js b/src/pages/services/bathrooms/case-study-3.js new file mode 100644 index 0000000..7f5e23b --- /dev/null +++ b/src/pages/services/bathrooms/case-study-3.js @@ -0,0 +1,82 @@ +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 ( + +
+ Modest Shower Room + Location unknown +
+
+ + + + + + + + + + + + + + + + + + + +
Key featuresAccessible shower, False ceiling with spot lights
Price£4,300
Time takenX days
DateJan 2099
+ + 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/bathrooms/case-study-4.js b/src/pages/services/bathrooms/case-study-4.js new file mode 100644 index 0000000..3fa0b26 --- /dev/null +++ b/src/pages/services/bathrooms/case-study-4.js @@ -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 ( + +
+ Period with a Modern Twist + Hampstead, London +
+
+ + + + + + + + + + + + + + + + + + + +
Key featuresPeriod features with modern twist
Price£7,800
Time takenX days
DateJan 2099
+ + 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/bathrooms/case-study-5.js b/src/pages/services/bathrooms/case-study-5.js new file mode 100644 index 0000000..20f7b75 --- /dev/null +++ b/src/pages/services/bathrooms/case-study-5.js @@ -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 ( + +
+ En-suite + Chelmsford, Essex +
+
+ + + + + + + + + + + + + + + + + + + +
Key featuresFeature wall with alcove shelf
Price£6,400
Time takenX days
DateJan 2099
+ + 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/bathrooms/index.js b/src/pages/services/bathrooms/index.js new file mode 100644 index 0000000..a68d4e8 --- /dev/null +++ b/src/pages/services/bathrooms/index.js @@ -0,0 +1,105 @@ +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 ( + +
+ Bathrooms +
+
+ + It's more than likely the most important room in your house and one of + the biggest investments you will ever make. We offer a professional + design service and an expert installation service. All our tradesman + are vetted and handpicked based on their skills within their chosen + fields. + + + With over 30 years experience in bathroom installation we will help + you choose the perfect bathroom for your home. We can complete your + whole bathroom installation including electrics, plastering, plumbing + and paint and decorating. + + + If you want a high quality bathroom you have come to the right place. + + + We provide an initial consultation followed by a competitive quote. + +
+
+ + Modern Bathroom} + > + Maldon, Essex + + Compact Bathroom} + > + Hackney, London + + Modest Shower Room} + > + Location unknown + + Period with a Modern Twist} + > + Hampstead, London + + En-suite} + > + Chelmsford, Essex + + +
+
+ ); +} + +export const query = graphql` + query { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { + childImageSharp { + fluid(maxWidth: 1920, quality: 90) { + ...GatsbyImageSharpFluid_withWebp + } + } + } + images: allFile( + filter: { relativePath: { regex: "/bathroom-cs(.*)a.jpg$/" } } + sort: { fields: relativePath } + ) { + nodes { + childImageSharp { + fluid(maxWidth: 640, maxHeight: 480, quality: 90) { + ...GatsbyImageSharpFluid_withWebp + } + } + } + } + } +`; diff --git a/src/pages/services/index.js b/src/pages/services/index.js index e71ad21..837df96 100644 --- a/src/pages/services/index.js +++ b/src/pages/services/index.js @@ -7,7 +7,7 @@ export default function Index({ data }) { return (
-

Services

+ Services
@@ -23,21 +23,7 @@ export default function Index({ data }) { image={data.tilingImage.childImageSharp.fluid} heading={Tiling} > - Our tiling is primo! - - Electrics} - > - Bring some light to your next project - - Carpentry} - > - Our woodworking is sharp! + We can install many different styles
@@ -47,37 +33,23 @@ export default function Index({ data }) { export const query = graphql` query { - headerImage: file(relativePath: { eq: "floor_tiles.png" }) { + headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 1920, quality: 100) { + fluid(maxWidth: 1920, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } } - bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) { + bathroomImage: file(relativePath: { eq: "bathroom.jpg" }) { childImageSharp { - fluid(maxWidth: 480, quality: 100) { + fluid(maxWidth: 480, maxHeight: 320, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } } - tilingImage: file(relativePath: { eq: "service_tiling.png" }) { + tilingImage: file(relativePath: { eq: "tiling.jpg" }) { 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) { + fluid(maxWidth: 480, maxHeight: 320, quality: 90) { ...GatsbyImageSharpFluid_withWebp } } diff --git a/src/pages/services/tiling/case-study-1.js b/src/pages/services/tiling/case-study-1.js new file mode 100644 index 0000000..3c99693 --- /dev/null +++ b/src/pages/services/tiling/case-study-1.js @@ -0,0 +1,50 @@ +import React from "react"; +import { graphql } from "gatsby"; +import Layout from "../../../layout"; +import { + CustomGallery, + Header, + Heading, + Section, + Text +} from "../../../components"; + +export default function Index({ data }) { + const images = data.images.nodes.map(node => node.childImageSharp); + return ( + +
+ Under Floor Heating + Location unknown +
+
+ + Case study info needed + +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/tiling/case-study-2.js b/src/pages/services/tiling/case-study-2.js new file mode 100644 index 0000000..126f2b2 --- /dev/null +++ b/src/pages/services/tiling/case-study-2.js @@ -0,0 +1,65 @@ +import React from "react"; +import { graphql } from "gatsby"; +import Layout from "../../../layout"; +import { + CustomGallery, + Header, + Heading, + Section, + Text +} from "../../../components"; + +export default function Index({ data }) { + const images = data.images.nodes.map(node => node.childImageSharp); + return ( + +
+ Ceramic Floor Tiles + Brentwood, Essex +
+
+ + The client needed 19m2 of ceramic floor tiles 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. +
+
+ +
+
+ ); +} + +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 + } + } + } + } + } +`; diff --git a/src/pages/services/tiling/index.js b/src/pages/services/tiling/index.js new file mode 100644 index 0000000..82b8aac --- /dev/null +++ b/src/pages/services/tiling/index.js @@ -0,0 +1,71 @@ +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 ( + +
+ Tiling +
+
+ + We can install both floor and wall tiles, including ceramic, natural + stone, marble, quartz, porcelain and mosaic tiles. + + + Our elite team of 3 stonemasons and 3 tilers has a combined total of + 112 years of experience within the industry. + +
+
+ + Under Floor Heating} + >Location unknown + Ceramic Floor Tiles} + > + Brentwood, Essex + + +
+
+ ); +} + +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(.*)a.jpg$/" } } + sort: { fields: relativePath } + ) { + nodes { + childImageSharp { + fluid(maxWidth: 640, maxHeight: 480, quality: 90) { + ...GatsbyImageSharpFluid_withWebp + } + } + } + } + } +`;