#56 process page styling

Scout-NU · May 3, 2021 · c9b5724 · c9b5724
1 parent b38f2c5
commit c9b5724
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 32 deletions.
diff --git a/src/components/process/process-styles.js 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;
+`
diff --git a/src/components/process/process.js 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 (
+    <ProcessContainer>
+      <BlueBackground />
+
+      <HowItWorks>
+        <HowHeader>
+          <H2>{data.prismicProcessPage.data.how_header}</H2>
+        </HowHeader>
+
+        <HowCarousel>
+          <HowImage>
+            <img
+              src={data.prismicProcessPage.data.how_images[0].how_image.url}
+            />
+          </HowImage>
+          <HowText>
+            <HowParagraph>
+              <Body>
+                {
+                  data.prismicProcessPage.data.how_images[0].how_paragraph[0]
+                    .text
+                }
+              </Body>
+            </HowParagraph>
+          </HowText>
+        </HowCarousel>
+      </HowItWorks>
+
+      <FindSection>
+        <FindImage>
+          <img src={data.prismicProcessPage.data.find_image.url} />
+        </FindImage>
+
+        <FindText>
+          <H2>{data.prismicProcessPage.data.find_header}</H2>
+
+          <FindButton>
+            {data.prismicProcessPage.data.find_button_text}
+          </FindButton>
+        </FindText>
+      </FindSection>
+
+      <StepsSection>
+        {console.log(data.prismicProcessPage.data.steps[0])}
+        {data.prismicProcessPage.data.steps.map(step => {
+            return (
+                <Step>
+
+                    <StepImage>
+                        <img src={step.step_image.url} />
+                    </StepImage>
+
+                    <StepText>
+                        <H2>
+                            {step.step_title}
+                        </H2>
+                        <Body>
+                        {step.step_description}
+
+                        </Body>
+                    </StepText>
+                </Step>
+            )
+        })}
+      </StepsSection>
+    </ProcessContainer>
+  )
+}
diff --git 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 (
     <Layout>
-      <h1>{processData.process_header}</h1>
+      <ProcessComponent data={data} />
     </Layout>
   )
 }
@@ -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
@@ -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" : {