#18 updating schema

Scout-NU · May 6, 2021 · b12b3c6 · b12b3c6
1 parent 199a2c7
commit b12b3c6
Show file tree

Hide file tree

Showing 4 changed files with 333 additions and 220 deletions.
diff --git a/src/components/about/about-style.js b/src/components/about/about-style.js
@@ -11,7 +11,7 @@ export const IconPlaceholder = styled.div`
 `
 
 export const AboutHeaderText = styled.div`
-  margin-top: 89px;
+  padding-top: 89px;
 `
 
 export const MissionSection = styled.div`

diff --git a/src/components/process/process.js b/src/components/process/process.js
@@ -0,0 +1,95 @@
+import React, { useState } from "react"
+import {
+  ProcessContainer,
+  HowItWorks,
+  HowHeader,
+  HowImage,
+  HowCarousel,
+  HowText,
+  HowParagraph,
+  BlueBackground,
+  FindSection,
+  FindImage,
+  FindText,
+  FindButton,
+  StepsSection,
+  Step,
+  StepImage,
+  StepText,
+  Indicators,
+} from "./process-styles"
+import Circle from "../../vectors/circle.svg"
+import SolidCircle from "../../vectors/solidcircle.svg"
+import { H1, P, H2, H3, Body } from "../../style/type-styles"
+
+export default function Process({ data }) {
+  const [howNumber, setHowNumber] = useState(0)
+
+  return (
+    <ProcessContainer>
+      <BlueBackground />
+
+      <HowItWorks>
+        <HowHeader>
+          <H2>{data.prismicProcessPage.data.how_header}</H2>
+        </HowHeader>
+
+        <HowCarousel>
+          <HowImage>
+            <img
+              src={data.prismicProcessPage.data.how_images[howNumber].how_image.url}
+            />
+          </HowImage>
+          <HowText>
+            <HowParagraph>
+              <Body>
+                {
+                  data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0]
+                    .text
+                }
+              </Body>
+            </HowParagraph>
+
+            <Indicators>
+              {data.prismicProcessPage.data.how_images.map((how_button, id) => {
+                return howNumber === id ? <SolidCircle onClick={() => setHowNumber(id)} /> : <Circle onClick={() => setHowNumber(id)} />
+              })}
+            </Indicators>
+          </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/about.js b/src/pages/about.js
@@ -5,7 +5,6 @@ import styled from "styled-components"
 import dimensions from "../style/dimensions"
 import AboutPage from "../components/about/about"
 
-
 export default function About({ data }) {
   const aboutData = data.prismicAboutPage.data
   return (
@@ -51,6 +50,12 @@ export const query = graphql`
         mission_image {
           url
         }
+        rows {
+          feature_name
+          first_company_check
+          second_company
+          third_company
+        }
         product_benefit {
           product_benefit_image {
             url