diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js
new file mode 100644
index 0000000..259cdf4
--- /dev/null
+++ b/src/components/process/process-styles.js
@@ -0,0 +1,111 @@
+import styled from "styled-components"
+import colors from "../../style/colors"
+import dimensions from "../../style/dimensions"
+import {
+ layoutPaddingDesktop,
+ layoutPaddingMobile,
+} from "../../style/variables"
+export const ProcessContainer = styled.div``
+
+export const HowItWorks = styled.div`
+ min-height: 100vh;
+ position: relative;
+ z-index: 1;
+`
+
+export const HowHeader = styled.div`
+ padding-top: 216px;
+ color: ${colors.blue900};
+`
+
+export const HowImage = styled.div`
+ img {
+ width: 627px;
+ height: 581px;
+ object-fit: cover;
+ }
+`
+
+export const HowCarousel = styled.div`
+ display: flex;
+ margin-bottom: 242px;
+`
+
+export const HowText = styled.div`
+ width: 36vw;
+ background-color: ${colors.white900};
+ height: 581px;
+`
+
+export const HowParagraph = styled.div`
+ padding-left: 90px;
+ padding-top: 108px;
+ padding-right: 72px;
+`
+
+export const BlueBackground = styled.div`
+ width: 63vw;
+ position: absolute;
+ right: 0;
+ min-height: calc(100vh + 242px);
+ background-color: ${colors.softblue900};
+ top: 127px;
+ z-index: 0;
+`
+
+export const FindSection = styled.div`
+ position: relative;
+ min-height: 100vh;
+`
+
+export const FindImage = styled.div`
+ img {
+ width: 100vw;
+ left: -${layoutPaddingDesktop};
+ position: absolute;
+ z-index: 0;
+ height: 100vh;
+ object-fit: cover;
+ }
+`
+export const FindText = styled.div`
+ position: relative;
+ z-index: 1;
+ color: ${colors.blue900};
+ padding-top: 350px;
+`
+export const FindButton = styled.a`
+ background-color: ${colors.orange900};
+ text-transform: uppercase;
+ color: ${colors.white900};
+ padding-left: 48px;
+ font-size: 16px;
+ padding-right: 48px;
+ padding-top: 16px;
+ padding-bottom: 16px;
+`
+
+export const StepsSection = styled.div`
+
+
+`
+
+export const Step = styled.div`
+
+display: flex;
+align-items: center;
+
+`
+
+export const StepImage = styled.div`
+
+margin-top: 230px;
+margin-left: -${layoutPaddingDesktop};
+
+`
+
+export const StepText = styled.div`
+justify-content: center;
+padding-left: 238px;
+width: 32vw;
+`
\ No newline at end of file
diff --git a/src/components/process/process.js b/src/components/process/process.js
new file mode 100644
index 0000000..48fd234
--- /dev/null
+++ b/src/components/process/process.js
@@ -0,0 +1,90 @@
+import React from "react"
+import {
+ ProcessContainer,
+ HowItWorks,
+ HowHeader,
+ HowImage,
+ HowCarousel,
+ HowText,
+ HowParagraph,
+ BlueBackground,
+ FindSection,
+ FindImage,
+ FindText,
+ FindButton,
+ StepsSection,
+ Step,
+ StepImage,
+ StepText
+} from "./process-styles"
+import { H1, P, H2, H3, Body } from "../../style/type-styles"
+
+export default function Process({ data }) {
+ return (
+
+
+
+
+
+ {data.prismicProcessPage.data.how_header}
+
+
+
+
+
+
+
+
+
+ {
+ data.prismicProcessPage.data.how_images[0].how_paragraph[0]
+ .text
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.prismicProcessPage.data.find_header}
+
+
+ {data.prismicProcessPage.data.find_button_text}
+
+
+
+
+
+ {console.log(data.prismicProcessPage.data.steps[0])}
+ {data.prismicProcessPage.data.steps.map(step => {
+ return (
+
+
+
+
+
+
+
+
+ {step.step_title}
+
+
+ {step.step_description}
+
+
+
+
+ )
+ })}
+
+
+ )
+}
diff --git a/src/pages/process.js b/src/pages/process.js
index 1b5c615..f84ac12 100644
--- a/src/pages/process.js
+++ b/src/pages/process.js
@@ -1,13 +1,14 @@
import { graphql } from "gatsby"
import Layout from "../components/layout"
import React from "react"
+import ProcessComponent from "../components/process/process"
export default function Process({ data }) {
const processData = data.prismicProcessPage.data
return (
- {processData.process_header}
+
)
}
@@ -16,40 +17,27 @@ export const query = graphql`
query ProcessQuery {
prismicProcessPage {
data {
- find_button_destination
- find_button_text
- find_description
- find_header
- header_image {
- url
- dimensions {
- width
- height
- }
- }
- how_description {
- text
- }
how_header
how_images {
how_image {
url
- dimensions {
- width
- height
- }
+ }
+ how_paragraph {
+ text
}
}
- process_header
+ find_header
+ find_image {
+ url
+ }
+
+ find_button_text
+
steps {
- step_description
step_image {
url
- dimensions {
- width
- height
- }
}
+ step_description
step_title
}
}
diff --git a/src/schemas/process.json b/src/schemas/process.json
index d067820..5b18ab2 100644
--- a/src/schemas/process.json
+++ b/src/schemas/process.json
@@ -23,13 +23,6 @@
"label" : "How Header"
}
},
- "how_description" : {
- "type" : "StructuredText",
- "config" : {
- "multi" : "paragraph",
- "label" : "How Description"
- }
- },
"how_images" : {
"type" : "Group",
"config" : {
@@ -41,6 +34,13 @@
"thumbnails" : [ ],
"label" : "How Image"
}
+ },
+ "how_paragraph" : {
+ "type" : "StructuredText",
+ "config" : {
+ "multi" : "paragraph",
+ "label" : "How Paragraph"
+ }
}
},
"label" : "How Images"
@@ -71,6 +71,14 @@
"config" : {
"label" : "Find Button Destination"
}
+ },
+ "find_image" : {
+ "type" : "Image",
+ "config" : {
+ "constraint" : { },
+ "thumbnails" : [ ],
+ "label" : "Find Image"
+ }
}
},
"Steps" : {