diff --git a/src/components/about/about-style.js b/src/components/about/about-style.js index 121aa01..a160eb5 100644 --- 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 new file mode 100644 index 0000000..7194552 --- /dev/null +++ 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 ( + + + + + +

{data.prismicProcessPage.data.how_header}

+ + + + + + + + + + { + data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0] + .text + } + + + + + {data.prismicProcessPage.data.how_images.map((how_button, id) => { + return howNumber === id ? setHowNumber(id)} /> : setHowNumber(id)} /> + })} + + + + + + + + + + + +

{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/about.js b/src/pages/about.js index 4568f9f..85e4e3d 100644 --- 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 diff --git a/src/schemas/About.json b/src/schemas/About.json index 22a1686..3bbc45b 100644 --- a/src/schemas/About.json +++ b/src/schemas/About.json @@ -1,243 +1,256 @@ { - "Main": {}, - "Mission Section": { - "mission_icon": { - "type": "Image", - "config": { - "constraint": {}, - "thumbnails": [], - "label": "Mission Icon" + "Main" : { }, + "Mission Section" : { + "mission_icon" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Mission Icon" + } + }, + "mission_heading" : { + "type" : "Text", + "config" : { + "label" : "Mission Heading" + } + }, + "mission_description" : { + "type" : "Text", + "config" : { + "label" : "Mission Description" + } + }, + "mission_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Mission Image" + } + } + }, + "Industry Context Section" : { + "industry_context_icon" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Industry Context Icon" + } + }, + "industry_context_background_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Industry Context Background Image" + } + }, + "industry_context_heading" : { + "type" : "Text", + "config" : { + "label" : "Industry Context Heading" + } + }, + "industry_context_explanation" : { + "type" : "Group", + "config" : { + "fields" : { + "explanation_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Explanation Image" } - }, - "mission_heading": { - "type": "Text", - "config": { - "label": "Mission Heading" + }, + "explanation_description" : { + "type" : "Text", + "config" : { + "label" : "Explanation Description" } + } }, - "mission_description": { - "type": "Text", - "config": { - "label": "Mission Description" + "label" : "Industry Context Explanation" + } + }, + "cta_button_text" : { + "type" : "Text", + "config" : { + "label" : "CTA Button Text" + } + }, + "cta_button_destination" : { + "type" : "Link", + "config" : { + "label" : "CTA Button Destination" + } + } + }, + "Company Background Section" : { + "company_background_section_heading" : { + "type" : "Text", + "config" : { + "label" : "Company Background Section Heading" + } + }, + "company_background_description" : { + "type" : "Text", + "config" : { + "label" : "Company Background Description" + } + }, + "company_team_heading" : { + "type" : "Text", + "config" : { + "label" : "Company Team Heading" + } + }, + "team_member_information" : { + "type" : "Group", + "config" : { + "fields" : { + "team_member_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Team Member Image" } - }, - "mission_image": { - "type": "Image", - "config": { - "constraint": {}, - "thumbnails": [], - "label": "Mission Image" + }, + "team_member_title" : { + "type" : "Text", + "config" : { + "label" : "Team Member Title" } - } - }, - "mission_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Mission Image" - } - } - }, - "Industry Context Section": { - "industry_context_icon": { - "type": "Image", - "config": { - "constraint": {}, - "thumbnails": [], - "label": "Industry Context Icon" + }, + "team_member_description" : { + "type" : "Text", + "config" : { + "label" : "Team Member Description" } - }, - "industry_context_background_image": { - "type": "Image", - "config": { - "constraint": {}, - "thumbnails": [], - "label": "Industry Context Background Image" + }, + "contact_button_text" : { + "type" : "Text", + "config" : { + "label" : "Contact Button Text" } }, - "industry_context_heading": { - "type": "Text", - "config": { - "label": "Industry Context Heading" + "contact_button_destination" : { + "type" : "Link", + "config" : { + "label" : "Contact Button Destination" } + } }, - "industry_context_explanation": { - "type": "Group", - "config": { - "fields": { - "explanation_image": { - "type": "Image", - "config": { - "constraint": {}, - "thumbnails": [], - "label": "Explanation Image" - } - }, - "explanation_description": { - "type": "Text", - "config": { - "label": "Explanation Description" - } - } - }, - "label": "Industry Context Explanation" + "label" : "Team Member Information" + } + } + }, + "Company Comparison Section" : { + "company_comparison_section_heading" : { + "type" : "Text", + "config" : { + "label" : "Company Comparison Section Heading" + } + }, + "product_benefit" : { + "type" : "Group", + "config" : { + "fields" : { + "product_benefit_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Product Benefit Image" + } + }, + "product_benefit_title" : { + "type" : "Text", + "config" : { + "label" : "Product Benefit Title" } + } }, - "cta_button_text": { - "type": "Text", - "config": { - "label": "CTA Button Text" + "label" : "Product Benefit" + } + }, + "company" : { + "type" : "Group", + "config" : { + "fields" : { + "company_name" : { + "type" : "Text", + "config" : { + "label" : "Company Name" } + } }, - "cta_button_destination": { - "type": "Link", - "config": { - "label": "CTA Button Destination" + "label" : "Company" + } + }, + "product_feature" : { + "type" : "Group", + "config" : { + "fields" : { + "product_feature_name" : { + "type" : "Text", + "config" : { + "label" : "Product Feature Name" } - } - }, - "cta_button_text" : { - "type" : "Text", - "config" : { - "label" : "CTA Button Text" - } - }, - "cta_button_destination" : { - "type" : "Link", - "config" : { - "label" : "CTA Button Destination" - } - } - }, - "Company Background Section" : { - "company_background_section_heading" : { - "type" : "Text", - "config" : { - "label" : "Company Background Section Heading" - } - }, - "company_background_description" : { - "type" : "Text", - "config" : { - "label" : "Company Background Description" - } - }, - "company_team_heading" : { - "type" : "Text", - "config" : { - "label" : "Company Team Heading" - } - }, - "team_member_information" : { - "type" : "Group", - "config" : { - "fields" : { - "team_member_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Team Member Image" - } - }, - "team_member_title" : { - "type" : "Text", - "config" : { - "label" : "Team Member Title" - } - }, - "team_member_description" : { - "type" : "Text", - "config" : { - "label" : "Team Member Description" - } - }, - "contact_button_text" : { - "type" : "Text", - "config" : { - "label" : "Contact Button Text" - } - }, - "contact_button_destination" : { - "type" : "Link", - "config" : { - "label" : "Contact Button Destination" - } + } + }, + "label" : "Product Feature" + } + }, + "rows" : { + "type" : "Group", + "config" : { + "fields" : { + "feature_name" : { + "type" : "Text", + "config" : { + "label" : "Feature Name" } }, - "label" : "Team Member Information" - } - } - }, - "Company Comparison Section" : { - "company_comparison_section_heading" : { - "type" : "Text", - "config" : { - "label" : "Company Comparison Section Heading" - } - }, - "product_benefit" : { - "type" : "Group", - "config" : { - "fields" : { - "product_benefit_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Product Benefit Image" - } - }, - "product_benefit_title" : { - "type" : "Text", - "config" : { - "label" : "Product Benefit Title" - } + "first_company_check" : { + "type" : "Select", + "config" : { + "options" : [ "Yes", "No" ], + "label" : "First Company" } }, - "label" : "Product Benefit" - } - }, - "company" : { - "type" : "Group", - "config" : { - "fields" : { - "company_name" : { - "type" : "Text", - "config" : { - "label" : "Company Name" - } + "second_company" : { + "type" : "Select", + "config" : { + "options" : [ "Yes", "No" ], + "label" : "Second Company" } }, - "label" : "Company" - } - }, - "product_feature" : { - "type" : "Group", - "config" : { - "fields" : { - "product_feature_name" : { - "type" : "Text", - "config" : { - "label" : "Product Feature Name" - } + "third_company" : { + "type" : "Select", + "config" : { + "options" : [ "Yes", "No" ], + "label" : "Third Company" } - }, - "label" : "Product Feature" - } - }, - "products_navigation_button_text" : { - "type" : "Text", - "config" : { - "label" : "Products Navigation Button Text" - } - }, - "products_navigation_button_destination" : { - "type" : "Link", - "config" : { - "label" : "Products Navigation Button Destination" - } + } + }, + "label" : "Rows" + } + }, + "products_navigation_button_text" : { + "type" : "Text", + "config" : { + "label" : "Products Navigation Button Text" + } + }, + "products_navigation_button_destination" : { + "type" : "Link", + "config" : { + "label" : "Products Navigation Button Destination" } } - } \ No newline at end of file + } +} \ No newline at end of file