working on the contact page template

src/components/templates/contact/ContactForm.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const ContactForm = ({ data }) => {
+  console.log("ContactForm: ", data)
+  return (
+    <div>
+      <h1>ContactForm</h1>
+    </div>
+  )
+}
+
+export default ContactForm

src/components/templates/contact/ContactIntro.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const ContactIntro = ({ data }) => {
+  console.log("ContactIntro: ", data)
+  return (
+    <div>
+      <h1>ContactIntro</h1>
+    </div>
+  )
+}
+
+export default ContactIntro

src/components/templates/contact/ProductsDisplay.js

@@ -0,0 +1,87 @@
+import React from "react"
+import styled from "styled-components"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { medWrapper } from "../../../styles/helpers"
+
+const ProductsDisplay = ({ data }) => {
+  console.log("productsDisplay: ", data)
+  return (
+    <StyledDiv>
+      <div className="wrapper">
+        {data.productsDisplayProducts.map((item, index) => {
+          const image = getImage(
+            item?.productImage?.localFile?.childImageSharp?.gatsbyImageData
+          )
+          const alt = item?.productImage?.altText
+
+          return (
+            <Item key={index}>
+              <div className="item-image">
+                <GatsbyImage image={image} alt={alt} />
+              </div>
+            </Item>
+          )
+        })}
+      </div>
+      <div className="products-overlay" />
+      <div
+        className="products-bg"
+        style={{
+          backgroundImage: `url(${data.productsDisplayBackgroundImage.mediaItemUrl})`,
+        }}
+      />
+    </StyledDiv>
+  )
+}
+
+const StyledDiv = styled.div`
+  position: relative;
+  padding-bottom: 19rem;
+
+  .wrapper {
+    ${medWrapper};
+    position: relative;
+    z-index: 10;
+  }
+
+  .products-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #212326;
+    opacity: 0.6;
+    z-index: 1;
+  }
+  .products-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center bottom;
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+`
+
+const Item = styled.div`
+  width: calc(50%);
+
+  @media (min-width: 768px) {
+    width: calc(50%);
+  }
+
+  @media (min-width: 1025px) {
+    width: calc(25% - 2rem);
+    margin: 1rem;
+  }
+
+  .item-image {
+    padding: 2rem 2rem;
+  }
+`
+
+export default ProductsDisplay

src/components/templates/contact/SideByImages.js

@@ -0,0 +1,69 @@
+import React from "react"
+import styled from "styled-components"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { Link } from "gatsby"
+import { Btn1One } from "../../../styles/helpers"
+
+const SideByImages = ({ data }) => {
+  const imageOne = getImage(
+    data?.sideByImagesOne?.localFile?.childImageSharp?.gatsbyImageData
+  )
+  const imageTwo = getImage(
+    data?.sideByImagesTwo?.localFile?.childImageSharp?.gatsbyImageData
+  )
+  const imageOneAlt = data?.sideByImagesOne?.altText
+  const imageTwoAlt = data?.sideByImagesTwo?.altText
+  return (
+    <StyledDiv>
+      <div className="wrapper">
+        <div className="image-one">
+          <GatsbyImage image={imageOne} alt={imageOneAlt} />
+        </div>
+        <div className="image-two">
+          <GatsbyImage image={imageTwo} alt={imageTwoAlt} />
+        </div>
+        <div className="link">
+          <Link to="/">About Us</Link>
+        </div>
+      </div>
+    </StyledDiv>
+  )
+}
+
+const StyledDiv = styled.div`
+  .wrapper {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+  }
+
+  .link {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+
+    a {
+      ${Btn1One};
+    }
+  }
+
+  .image-one {
+    width: calc(100%);
+
+    @media (min-width: 768px) {
+      width: calc(50%);
+    }
+  }
+  .image-two {
+    width: calc(100%);
+
+    @media (min-width: 768px) {
+      width: calc(50%);
+    }
+  }
+`
+
+export default SideByImages

src/templates/contact.js

@@ -1,15 +1,121 @@
 import React from "react"
+import { graphql } from "gatsby"
 
 import Layout from "../components/Layout"
 import Seo from "../components/Seo"
 
-const contact = () => {
+import ContactIntro from "../components/templates/contact/ContactIntro"
+import ContactForm from "../components/templates/contact/ContactForm"
+import ProductsDisplay from "../components/templates/contact/ProductsDisplay"
+import SideByImages from "../components/templates/contact/SideByImages"
+
+const contact = props => {
   return (
     <Layout>
       <Seo />
-      <h1>contact</h1>
+      <ContactIntro data={props.data.contactIntro.template.contactTemplate} />
+      <ContactForm data={props.data.contactForm.template.contactTemplate} />
+      <ProductsDisplay
+        data={props.data.productsDisplay.template.contactTemplate}
+      />
+      <SideByImages data={props.data.sideByImages.template.contactTemplate} />
     </Layout>
   )
 }
 
+export const contactTempQuery = graphql`
+  query contactTempPage($id: String!) {
+    contactIntro: wpPage(id: { eq: $id }) {
+      template {
+        ... on WpTemplate_Contact {
+          contactTemplate {
+            contactIntroTopTitle
+            contactIntroLogo {
+              altText
+              localFile {
+                childImageSharp {
+                  gatsbyImageData(width: 1500)
+                }
+              }
+            }
+            contactIntroContentTitle
+            contactIntroMainContent
+          }
+        }
+      }
+    }
+
+    contactForm: wpPage(id: { eq: $id }) {
+      template {
+        ... on WpTemplate_Contact {
+          contactTemplate {
+            contactFormDisplay
+            contactFormFlavoursAvailable {
+              name
+              availableInStock
+              colour
+            }
+          }
+        }
+      }
+    }
+
+    productsDisplay: wpPage(id: { eq: $id }) {
+      template {
+        ... on WpTemplate_Contact {
+          contactTemplate {
+            productsDisplayBackgroundImage {
+              altText
+              mediaItemUrl
+              localFile {
+                childImageSharp {
+                  gatsbyImageData(width: 3000)
+                }
+              }
+            }
+            productsDisplayProducts {
+              productImage {
+                altText
+                localFile {
+                  childImageSharp {
+                    gatsbyImageData(width: 1500)
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    sideByImages: wpPage(id: { eq: $id }) {
+      template {
+        ... on WpTemplate_Contact {
+          contactTemplate {
+            sideByImagesOne {
+              altText
+              mediaItemUrl
+              localFile {
+                childImageSharp {
+                  gatsbyImageData(width: 2000)
+                }
+              }
+            }
+
+            sideByImagesTwo {
+              altText
+              mediaItemUrl
+              localFile {
+                childImageSharp {
+                  gatsbyImageData(width: 2000)
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export default contact