From 317707d1fdbf8e2b5882c25ad8c1d4ed8f67063a Mon Sep 17 00:00:00 2001 From: samgildea Date: Tue, 6 Apr 2021 10:27:58 -0400 Subject: [PATCH 01/13] #38 our impact section styles --- src/components/homepage/index-styles.js | 54 ++++++++++++++++++-- src/components/homepage/index.js | 65 +++++++++++++++++++------ 2 files changed, 99 insertions(+), 20 deletions(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index 976397d..84a4525 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -26,11 +26,9 @@ export const HeroTextSection = styled.div` } ` -export const HeroHeadline = styled.div` -` +export const HeroHeadline = styled.div`` -export const HeroDescription = styled.div` -` +export const HeroDescription = styled.div`` export const HeroCTA = styled.div` margin-top: 64px; @@ -45,3 +43,51 @@ export const HeroCTA = styled.div` padding-bottom: 16px; } ` +export const HomePageContainer = styled.div`` + +export const ImpactSection = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + min-height: 100vh; + } +` +export const ImpactHeader = styled.div` + width: 43vw; + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 100%; + } +` +export const ImpactIcon = styled.div` + width: 64px; + height: 64px; + background-color: ${colors.gray_icon}; + border-radius: 8px; + margin-top: 128px; +` + +export const ImpactStats = styled.div` + margin-top: 64px; + margin-bottom: 174px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: center; + margin-top: 132px; + margin-bottom: 64px; + } +` + +export const ImpactExample = styled.div` + padding-right: 9vw; +` + +export const ImpactStat = styled.div` + text-align: center; +` + +export const ImpactStatIcon = styled.div` + width: 194px; + height: 194px; + background-color: ${colors.gray_icon}; + margin-left: auto; + margin-right: auto; +` diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 6e23a6d..a3c31a0 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -1,29 +1,62 @@ import React from "react" -import { H1, P } from "../../style/type-styles" +import { H1, H2, P } from "../../style/type-styles" import { + HomePageContainer, HeroContainer, HeroTextSection, HeroHeadline, HeroDescription, HeroCTA, + ImpactSection, + ImpactHeader, + ImpactIcon, + ImpactStats, + ImpactExample, + ImpactStat, + ImpactStatIcon, } from "./index-styles" export default function HomePage({ data }) { return ( - - - -

{data.hero_headline}

- - -

{data.hero_subtext}

- - - - {data.hero_cta_text} - - - - + + + + +

{data.hero_headline}

+ + +

{data.hero_subtext}

+ + + + {data.hero_cta_text} + + + + + + + + +

{data.impact_section_title}

+

{data.impact_description}

+ + + {data.impact_example.map(example => ( + + + +

{example.impact_big_text}

+

{example.impact_small_text}

+ + + ))} + + + ) } From 071220322195282ca8609be1ce17474a881ced91 Mon Sep 17 00:00:00 2001 From: samgildea Date: Tue, 6 Apr 2021 11:24:27 -0400 Subject: [PATCH 02/13] #38 header styles --- src/components/header/header-styles.js | 60 ++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/header/header-styles.js diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js new file mode 100644 index 0000000..816aa08 --- /dev/null +++ b/src/components/header/header-styles.js @@ -0,0 +1,60 @@ +import styled from "styled-components" +import dimensions from "../../style/dimensions" +import colors from "../../style/colors" + +export const NavContainer = styled.div` + z-index: 1; + background-color: ${colors.gray_image}; + padding-bottom: 32px; + &.colorChange { + background-color: ${colors.gray_CTA}; + } + + position: fixed; + width: 100%; + transition: 0.5s all ease; +` + +export const Logo = styled.div` + font-weight: bold; + font-size: 24px; + padding-top: 32px; + padding-left: 80px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + text-align: center; + font-size: 20px; + padding-top: 24px; + padding-left: 0px; + } +` + +export const NavLinks = styled.div` + position: absolute; + right: 80px; + top: 40px; + display: flex; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + display: none; + } +` + +export const NavLink = styled.div` + font-weight: bold; + padding-left: 100px; + text-decoration: none; + color: ${colors.black900}; +` + +export const MobileIcon = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: none; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + left: 24px; + top: 32px; + position: absolute; + } +` From c8062ae170f0ddf2458aacc59b18e4ed99a8ada5 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 23 Apr 2021 12:02:48 -0400 Subject: [PATCH 03/13] #38 adding orange line to connect nodes --- src/components/homepage/index-styles.js | 27 ++++++++++++++++++++----- src/components/homepage/index.js | 13 ++++++++++-- src/vectors/circle.svg | 3 +++ src/vectors/holding-plant-icon.svg | 9 +++++++++ 4 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 src/vectors/circle.svg create mode 100644 src/vectors/holding-plant-icon.svg diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index ddf4db6..2131798 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -59,6 +59,9 @@ export const HeroCTA = styled.div` ` export const ImpactSection = styled.div` + + display: flex; + justify-content: center; @media (min-width: ${dimensions.maxwidthTablet}px) { min-height: 100vh; } @@ -70,10 +73,7 @@ export const ImpactHeader = styled.div` } ` export const ImpactIcon = styled.div` - width: 64px; - height: 64px; - background-color: ${colors.gray_icon}; - border-radius: 8px; + margin-top: 128px; ` @@ -83,7 +83,7 @@ export const ImpactStats = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { display: flex; - justify-content: center; + // justify-content: center; margin-top: 132px; margin-bottom: 64px; } @@ -91,6 +91,12 @@ export const ImpactStats = styled.div` export const ImpactExample = styled.div` padding-right: 9vw; + + svg { + margin-top: 48px; + position: relative; + z-index: 1; + } ` export const ImpactStat = styled.div` @@ -249,3 +255,14 @@ a { color: ${colors.orange900}; } ` +export const NodeLine = styled.div` +position: absolute; +height: 3px; +width: 66vw; +left: -80px; +margin-top: 64px; +z-index: 0; +background-color: #F27A28; + + +` \ No newline at end of file diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 832e5ba..0be377d 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -26,8 +26,12 @@ import { SolutionsCard, SolutionsCards, SolutionsCTA, + NodeLine } from "./index-styles" +import Circle from "../../vectors/circle.svg" +import PlantIcon from "../../vectors/holding-plant-icon.svg" + import TreeIcon from "../../vectors/renewable-tree-icon.svg" import SunIcon from "../../vectors/sun-icon.svg" import { Helmet } from "react-helmet" @@ -85,15 +89,20 @@ export default function HomePage({ data }) {
- + + + +

{data.impact_section_title}

 - {data.impact_example.map(example => ( + {data.impact_example.map((example, idx) => (

{example.impact_big_text}

{example.impact_small_text}

+ {idx === 2 && } + ))} diff --git a/src/vectors/circle.svg b/src/vectors/circle.svg new file mode 100644 index 0000000..feb8825 --- /dev/null +++ b/src/vectors/circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/vectors/holding-plant-icon.svg b/src/vectors/holding-plant-icon.svg new file mode 100644 index 0000000..34d7545 --- /dev/null +++ b/src/vectors/holding-plant-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + From da2cc706e0197aa9a369ad433c86b0c7ecde2feb Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 28 Apr 2021 18:32:28 -0400 Subject: [PATCH 04/13] #38 temporarily removing about --- src/pages/about.js | 96 +++++----- src/schemas/About.json | 400 ++++++++++++++++++++++------------------- 2 files changed, 260 insertions(+), 236 deletions(-) diff --git a/src/pages/about.js b/src/pages/about.js index 17afb0f..02f82ca 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -1,52 +1,52 @@ -import { graphql } from "gatsby" +// import { graphql } from "gatsby" -import React from "react" -import Layout from "../components/layout" +// import React from "react" +// import Layout from "../components/layout" -export default function About({ data }) { - const aboutData = data.prismicAboutPage.data +// export default function About({ data }) { +// const aboutData = data.prismicAboutPage.data - return ( - -

{aboutData.company_background_section_heading}

- - ) -} +// return ( +// +//

{aboutData.company_background_section_heading}

+// +// ) +// } -export const query = graphql` - query AboutQuery { - prismicAboutPage { - data { - company { - company_name - } - company_background_description - company_background_section_heading - company_comparison_section_heading - company_team_heading - cta_button_destination - cta_button_text - industry_context_explanation { - explanation_description - } - industry_context_heading - mission_description - mission_heading - product_benefit { - product_benefit_title - } - product_feature { - product_feature_name - } - products_navigation_button_destination - products_navigation_button_text - team_member_information { - contact_button_destination - contact_button_text - team_member_description - team_member_title - } - } - } - } -` +// export const query = graphql` +// query AboutQuery { +// prismicAboutPage { +// data { +// company { +// company_name +// } +// company_background_description +// company_background_section_heading +// company_comparison_section_heading +// company_team_heading +// cta_button_destination +// cta_button_text +// industry_context_explanation { +// explanation_description +// } +// industry_context_heading +// mission_description +// mission_heading +// product_benefit { +// product_benefit_title +// } +// product_feature { +// product_feature_name +// } +// products_navigation_button_destination +// products_navigation_button_text +// team_member_information { +// contact_button_destination +// contact_button_text +// team_member_description +// team_member_title +// } +// } +// } +// } +// ` diff --git a/src/schemas/About.json b/src/schemas/About.json index 42c100d..da2e391 100644 --- a/src/schemas/About.json +++ b/src/schemas/About.json @@ -1,197 +1,221 @@ { - "Main": {}, - "Mission Section": { - "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" - } + "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_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" - } - }, - "explanation_description": { - "type": "Text", - "config": { - "label": "Explanation 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" - } + "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" + } + }, + "explanation_description" : { + "type" : "Text", + "config" : { + "label" : "Explanation 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" - } - }, - "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": "Team Member Information" - } + "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" : "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" - } - } - }, - "label": "Product Benefit" - } - }, - "company": { - "type": "Group", - "config": { - "fields": { - "company_name": { - "type": "Text", - "config": { - "label": "Company Name" - } - } - }, - "label": "Company" - } - }, - "product_feature": { - "type": "Group", - "config": { - "fields": { - "product_feature_name": { - "type": "Text", - "config": { - "label": "Product Feature Name" - } - } - }, - "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" - } + "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" + } + } + }, + "label" : "Product Benefit" + } + }, + "company" : { + "type" : "Group", + "config" : { + "fields" : { + "company_name" : { + "type" : "Text", + "config" : { + "label" : "Company Name" + } + } + }, + "label" : "Company" + } + }, + "product_feature" : { + "type" : "Group", + "config" : { + "fields" : { + "product_feature_name" : { + "type" : "Text", + "config" : { + "label" : "Product Feature Name" + } + } + }, + "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" } + } } -} \ No newline at end of file + } \ No newline at end of file From ef9a52264e3b6023857c6e8ba76b56622f6589c0 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 30 Apr 2021 13:46:44 -0400 Subject: [PATCH 05/13] #38 updating image behind impact section --- src/components/homepage/index-styles.js | 91 ++++++++++++++++++++----- src/components/homepage/index.js | 19 +++++- 2 files changed, 90 insertions(+), 20 deletions(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index 2131798..e5edeb3 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -59,11 +59,18 @@ export const HeroCTA = styled.div` ` export const ImpactSection = styled.div` - display: flex; + margin-top: 80px; + margin-bottom: 80px; + min-height: 100vh; + z-index: 1; + position: relative; + + background-color: ${colors.white900}; justify-content: center; - @media (min-width: ${dimensions.maxwidthTablet}px) { - min-height: 100vh; + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-top: 24px; + margin-bottom: 24px; } ` export const ImpactHeader = styled.div` @@ -73,19 +80,22 @@ export const ImpactHeader = styled.div` } ` export const ImpactIcon = styled.div` - margin-top: 128px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-top: 48px; + } ` export const ImpactStats = styled.div` margin-top: 64px; - margin-bottom: 174px; + margin-bottom: 48; @media (min-width: ${dimensions.maxwidthTablet}px) { display: flex; // justify-content: center; margin-top: 132px; - margin-bottom: 64px; + margin-bottom: 80px; } ` @@ -155,8 +165,6 @@ export const FutureSolarIcon = styled.div` height: 64px; margin-bottom: 48px; - - @media (min-width: ${dimensions.maxwidthTablet}px) { svg { width: 118px; @@ -201,7 +209,6 @@ export const SolutionsSection = styled.div` margin-top: 100px; color: ${colors.blue900}; padding-bottom: 100px; - ` export const SolutionsCard = styled.div` @@ -256,13 +263,63 @@ a { } ` export const NodeLine = styled.div` -position: absolute; -height: 3px; -width: 66vw; -left: -80px; -margin-top: 64px; -z-index: 0; -background-color: #F27A28; + position: absolute; + height: 3px; + left: -80px; + margin-top: 64px; + z-index: 0; + background-color: ${colors.orange900}; + @media (min-width: ${dimensions.maxwidthDesktop}px) { + width: 70%; + } -` \ No newline at end of file + @media (min-width: ${dimensions.maxwidthTablet}px) and (max-width: ${dimensions.maxwidthDesktop}px) { + width: 80%; + } +` +export const MobileNodeLine = styled.div` + position: absolute; + height: 3px; + left: -${layoutPaddingMobile}; + margin-top: 64px; + z-index: 0; + background-color: ${colors.orange900}; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 55.8%; + } +` + +export const ImpactImage = styled.div` + position: relative; + + img { + width: 100vw; + height: calc(100vh + 304px); + object-fit: cover; + z-index: 0; + position: absolute; + left: -${layoutPaddingDesktop}; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + img { + width: 100vw; + object-fit: cover; + z-index: 0; + position: absolute; + left: -${layoutPaddingMobile}; + } + } +` + +export const ImpactCTA = styled.div` + display: flex; + justify-content: center; + margin-bottom: 80px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-bottom: 48px; + } +` diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 0be377d..079a6a6 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -26,7 +26,10 @@ import { SolutionsCard, SolutionsCards, SolutionsCTA, - NodeLine + NodeLine, + MobileNodeLine, + ImpactImage, + ImpactCTA, } from "./index-styles" import Circle from "../../vectors/circle.svg" @@ -86,12 +89,15 @@ export default function HomePage({ data }) { {data.section_image_alt} + + + +
- - +

{data.impact_section_title}

 @@ -102,11 +108,18 @@ export default function HomePage({ data }) {

{example.impact_big_text}

{example.impact_small_text}

{idx === 2 && } + ))} + + + + {data.button_text} + +
From 93b85351a875cceaf37d4619f1777d2366f419a7 Mon Sep 17 00:00:00 2001 From: samgildea Date: Sat, 1 May 2021 13:08:12 -0400 Subject: [PATCH 06/13] #38 removing comments for about page --- src/pages/about.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/about.js b/src/pages/about.js index fba6a47..eca47ab 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -1,17 +1,17 @@ -// import { graphql } from "gatsby" +import { graphql } from "gatsby" -// import React from "react" -// import Layout from "../components/layout" +import React from "react" +import Layout from "../components/layout" -// export default function About({ data }) { -// const aboutData = data.prismicAboutPage.data +export default function About({ data }) { + const aboutData = data.prismicAboutPage.data -// return ( -// -//

{aboutData.company_background_section_heading}

-// -// ) -// } + return ( + +

{aboutData.company_background_section_heading}

+ + ) +} export const query = graphql` query AboutQuery { From f54a9e7f006ff95dc587abb2f5bc655628664bea Mon Sep 17 00:00:00 2001 From: samgildea Date: Sun, 2 May 2021 17:20:39 -0400 Subject: [PATCH 07/13] #53 homepage CTA bottom --- src/components/homepage/index-styles.js | 65 +++++++++++++++++++++++-- src/components/homepage/index.js | 24 +++++++++ src/pages/index.js | 7 +++ src/schemas/Homepage.json | 36 ++++++++++++++ src/vectors/plant-icon.svg | 8 +++ 5 files changed, 137 insertions(+), 3 deletions(-) create mode 100644 src/vectors/plant-icon.svg diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index d22a54c..cf83db8 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -102,8 +102,6 @@ export const FutureSolarIcon = styled.div` height: 64px; margin-bottom: 48px; - - @media (min-width: ${dimensions.maxwidthTablet}px) { svg { width: 118px; @@ -148,7 +146,6 @@ export const SolutionsSection = styled.div` margin-top: 100px; color: ${colors.blue900}; padding-bottom: 100px; - ` export const SolutionsCard = styled.div` @@ -202,3 +199,65 @@ a { color: ${colors.orange900}; } ` +export const CTASection = styled.div` + height: 100vh; + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-top: 480px; + } +` + +export const CTAImage = styled.div` + margin-top: 100px; + margin-bottom: 100px; + img { + object-fit: cover; + width: 351px; + height: 234px; + } + + margin-left: -${layoutPaddingMobile}; + + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + object-fit: cover; + width: 50vw; + height: 472px; + } + + margin-left: -${layoutPaddingDesktop}; + } +` + +export const CTAContent = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + align-items: center; + } +` + +export const CTAText = styled.div` + color: ${colors.blue900}; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-left: 133px; + } +` + +export const CTAButton = styled.div` +margin-top: 64px; +display: flex; + +a { + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + border: solid ${colors.orange900}; 1px; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: ${colors.orange900}; +} +` diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 1d4cf56..fdb995c 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -19,10 +19,16 @@ import { SolutionsCard, SolutionsCards, SolutionsCTA, + CTASection, + CTAImage, + CTAContent, + CTAText, + CTAButton, } from "./index-styles" import TreeIcon from "../../vectors/renewable-tree-icon.svg" import SunIcon from "../../vectors/sun-icon.svg" +import PlantIcon from "../../vectors/plant-icon.svg" import { Helmet } from "react-helmet" export default function HomePage({ data }) { @@ -102,6 +108,24 @@ export default function HomePage({ data }) { {" "} + + + + + + + + + +

{data.cta_text}

+ + + Contact Us + {" "} + + + + ) diff --git a/src/pages/index.js b/src/pages/index.js index 7c932b8..d4f8036 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -53,6 +53,13 @@ export const query = graphql` width } } + + cta_text + cta_button_destination + cta_button_text + cta_image { + url + } impact_example { impact_big_text impact_small_text diff --git a/src/schemas/Homepage.json b/src/schemas/Homepage.json index 372ca0f..f69372c 100644 --- a/src/schemas/Homepage.json +++ b/src/schemas/Homepage.json @@ -189,6 +189,14 @@ } }, "Quote Section" : { + "quote_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "quote image" + } + }, "quotes" : { "type" : "Group", "config" : { @@ -215,5 +223,33 @@ "label" : "Quotes" } } + }, + "Reach Out Section" : { + "cta_text" : { + "type" : "Text", + "config" : { + "label" : "CTA Text" + } + }, + "cta_button_text" : { + "type" : "Text", + "config" : { + "label" : "CTA Button Text" + } + }, + "cta_button_destination" : { + "type" : "Text", + "config" : { + "label" : "CTA Button Destination" + } + }, + "cta_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "CTA Image" + } + } } } \ No newline at end of file diff --git a/src/vectors/plant-icon.svg b/src/vectors/plant-icon.svg new file mode 100644 index 0000000..630d513 --- /dev/null +++ b/src/vectors/plant-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + From d8a6877b3b8d38d4b631392f826076278d78c905 Mon Sep 17 00:00:00 2001 From: samgildea Date: Sun, 2 May 2021 17:22:19 -0400 Subject: [PATCH 08/13] #53 spacing --- src/components/homepage/index-styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index cf83db8..52d51de 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -217,7 +217,6 @@ export const CTAImage = styled.div` margin-left: -${layoutPaddingMobile}; - @media (min-width: ${dimensions.maxwidthTablet}px) { img { object-fit: cover; From accf78c0d08c3a302ecbad9b926c8be144799235 Mon Sep 17 00:00:00 2001 From: samgildea Date: Mon, 3 May 2021 15:06:55 -0400 Subject: [PATCH 09/13] #57 solutions page --- src/components/contact/contact-styles.js | 114 ++++++++++++++ src/components/header/header.jsx | 2 +- src/components/solutions/solutions-styles.js | 154 +++++++++++++++++++ src/components/solutions/solutions.js | 94 +++++++++++ src/pages/process.js | 4 - src/pages/solutions.js | 51 +++--- src/schemas/use_cases_page.json | 26 +++- src/vectors/solar-panel.svg | 12 ++ 8 files changed, 429 insertions(+), 28 deletions(-) create mode 100644 src/components/contact/contact-styles.js create mode 100644 src/components/solutions/solutions-styles.js create mode 100644 src/components/solutions/solutions.js create mode 100644 src/vectors/solar-panel.svg diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js new file mode 100644 index 0000000..d5767b0 --- /dev/null +++ b/src/components/contact/contact-styles.js @@ -0,0 +1,114 @@ +import styled from "styled-components" +import colors from "../../style/colors" +import dimensions from "../../style/dimensions" + +import { fontSizes } from "../../style/type-styles" +import { + layoutPaddingDesktop, + layoutPaddingMobile, +} from "../../style/variables" +export const ContactContainer = styled.div` + min-height: 100vh; +` + +export const ContactForm = styled.div` + padding-top: 172px; + width: 100%; + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 36vw; + + } + color: ${colors.blue900}; + input { + border-width: 0 0 2px; + border-color: ${colors.input_gray}; + width: 100%; + margin-bottom: 32px; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + input { + border-width: 0 0 2px; + border-color: ${colors.input_gray}; + width: 36vw; + margin-bottom: 32px; + } + } + input::placeholder { + font-size: ${fontSizes.body}; + color: ${colors.input_gray}; + } +` + +export const ContactSection = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-between; + } +` +export const ContactDescription = styled.div` + margin-bottom: 64px; +` +export const ContactButton = styled.button` + font-size: 16px; + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + background-color: ${colors.orange900}; + text-transform: uppercase; + color: ${colors.white900}; + + border: none; +` + +export const ContactImageSection = styled.div` + margin-right: -${layoutPaddingDesktop}; + img { + margin-top: 172px; + right: 0px; + width: 50vw; + height: 531px; + object-fit: cover; + } + + + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-right: -${layoutPaddingMobile}; + + img { + margin-top: 172px; + right: 0px; + width: 100%; + height: 263px; + object-fit: cover; + } + + } + +` + +export const SpecificContactInfo = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-apart; + } +` + +export const EmailSection = styled.div` + margin-right: 127px; + margin-top: 64px; + color: ${colors.blue900}; +` + +export const AddressSection = styled.div` + margin-top: 64px; + color: ${colors.blue900}; + width: 228px; + margin-bottom: 110px; +` + +export const UseCaseSection = styled.div` + + +` \ No newline at end of file diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index a740d58..d8f2a97 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -44,7 +44,7 @@ export const Header = ({ home }) => { PRODUCTS - + SOLUTIONS diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js new file mode 100644 index 0000000..92fa828 --- /dev/null +++ b/src/components/solutions/solutions-styles.js @@ -0,0 +1,154 @@ +import styled from "styled-components" +import colors from "../../style/colors" +import dimensions from "../../style/dimensions" +import { + layoutPaddingDesktop, + layoutPaddingMobile, +} from "../../style/variables" + +export const SolutionsContainer = styled.div`` + +export const TaglineSection = styled.div`` + +export const TaglineHeader = styled.div` + color: ${colors.blue900}; +` +export const TaglineDescription = styled.div` + color: ${colors.blue900}; +` + +export const TaglineImage = styled.div` + img { + width: 100%; + height: 464px; + object-fit: cover; + margin-bottom: 28px; + margin-top: 141px; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + position: absolute; + right: 0; + top: 127px; + width: 56vw; + height: 464px; + object-fit: cover; + margin-top: 0px; + } + } +` + +export const TaglineText = styled.div` + width: 100%; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + padding-top: 180px; + width: 35vw; + } +` + +export const UseCaseSection = styled.div` + margin-top: 98px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 286px; + } +` + +export const UseCaseCard = styled.div` + margin-bottom: 80px; + width: 100%; + a { + text-decoration: none; + color: ${colors.blue900}; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 25vw; + } +` + +export const UseCaseCTA = styled.div` +margin-top: 50px; +a { + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + border: solid ${colors.orange900}; 1px; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: ${colors.orange900}; + } + +` +export const UseCaseCards = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-between; + } +` + +export const ModelsCTA = styled.div` + margin-top: 160px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + } +` + +export const ModelCTAContent = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + } +` + +export const ModelCTAImage = styled.div` + img { + width: 100%; + height: 464px; + object-fit: cover; + } + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + width: 45vw; + height: 464px; + object-fit: cover; + margin-left: -${layoutPaddingDesktop}; + } + } +` + +export const ModelCTAText = styled.div` + margin-bottom: 116px; + margin-top: 116px; + + color: ${colors.blue900}; + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-left: 76px; + margin-top: 72px; + margin-bottom: 0px; + } +` + +export const ModelsButton = styled.div` + margin-top: 42px; + + 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; + text-decoration: none; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 0px; + } +` diff --git a/src/components/solutions/solutions.js b/src/components/solutions/solutions.js new file mode 100644 index 0000000..af81b18 --- /dev/null +++ b/src/components/solutions/solutions.js @@ -0,0 +1,94 @@ +import React from "react" +import { H1, P, H2, H3, Body } from "../../style/type-styles" +import TreeIcon from "../../vectors/renewable-tree-icon.svg" +import SunIcon from "../../vectors/sun-icon.svg" +import { Helmet } from "react-helmet" +import { + SolutionsContainer, + TaglineSection, + TaglineHeader, + TaglineDescription, + TaglineImage, + TaglineText, + UseCaseSection, + UseCaseCard, + UseCaseCards, + UseCaseCTA, + ModelsCTA, + ModelCTAContent, + ModelCTAImage, + ModelCTAText, + ModelsButton, +} from "./solutions-styles" +import PurchaseIcon from "../../vectors/solar-panel.svg" +export default function Solutions({ data }) { + return ( + <> + + + + + + + + + +

{data.prismicUseCasesPage.data.tagline_heading}

+ + + {data.prismicUseCasesPage.data.tagline_description} + + + + + + + {data.prismicUseCasesPage.data.use_cases.map((use_case, idx) => { + return ( + + + {use_case.use_case.document.data.preview_title} +

{use_case.use_case.document.data.preview_title}

+ + {use_case.use_case.document.data.preview_description} + + + + Learn More + + + + ) + })} + + + + + + + + + + + +

{data.prismicUseCasesPage.data.call_to_action_heading}

+ + + + {data.prismicUseCasesPage.data.cta_button_text} + + + + + + + + ) +} diff --git a/src/pages/process.js b/src/pages/process.js index 1b5c615..045e919 100644 --- a/src/pages/process.js +++ b/src/pages/process.js @@ -18,7 +18,6 @@ export const query = graphql` data { find_button_destination find_button_text - find_description find_header header_image { url @@ -27,9 +26,6 @@ export const query = graphql` height } } - how_description { - text - } how_header how_images { how_image { diff --git a/src/pages/solutions.js b/src/pages/solutions.js index 3120536..043d109 100644 --- a/src/pages/solutions.js +++ b/src/pages/solutions.js @@ -2,36 +2,51 @@ import { graphql } from "gatsby" import React from "react" +import SolutionsComponent from "../components/solutions/solutions" +import Layout from "../components/layout" + export default function UseCasesPage({ data }) { - const useCasesPageData = data.prismicUseCasesPage.data + const useCasesPageData = data.prismicUseCasesPage.data - return ( -
-

{useCasesPageData.tagline_heading}

-
- ) + return ( + + + + ) } export const query = graphql` query UseCasesPageQuery { prismicUseCasesPage { data { - call_to_action_heading + tagline_image { + url + } + tagline_heading + tagline_description cta_button_destination { - target + url } cta_button_text - tagline_description - tagline_heading - tagline_image { - url - dimensions { - height - width - } + call_to_action_heading + cta_image { + url } - use_case { - link_type + use_cases { + use_case { + document { + ... on PrismicUseCase { + uid + data { + preview_title + preview_image { + url + } + preview_description + } + } + } + } } } } diff --git a/src/schemas/use_cases_page.json b/src/schemas/use_cases_page.json index f2161fe..5fb6513 100644 --- a/src/schemas/use_cases_page.json +++ b/src/schemas/use_cases_page.json @@ -23,16 +23,32 @@ } }, "Use Cases" : { - "use_case" : { - "type" : "Link", + "use_cases" : { + "type" : "Group", "config" : { - "select" : "document", - "customtypes" : [ "use_case" ], - "label" : "Use Case" + "fields" : { + "use_case" : { + "type" : "Link", + "config" : { + "select" : "document", + "customtypes" : [ "use_case" ], + "label" : "Use Case" + } + } + }, + "label" : "Use Cases" } } }, "Call To Action" : { + "cta_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "CTA Image" + } + }, "call_to_action_heading" : { "type" : "Text", "config" : { diff --git a/src/vectors/solar-panel.svg b/src/vectors/solar-panel.svg new file mode 100644 index 0000000..f34794c --- /dev/null +++ b/src/vectors/solar-panel.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From 530256697335e6094f8981012de619032783d2f2 Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 12:40:10 -0400 Subject: [PATCH 10/13] #38 removing comments and updating alt --- src/components/homepage/index-styles.js | 1 - src/components/homepage/index.js | 7 +++++-- src/pages/process.js | 8 ++++---- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index e5edeb3..0221e32 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -93,7 +93,6 @@ export const ImpactStats = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { display: flex; - // justify-content: center; margin-top: 132px; margin-bottom: 80px; } diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 079a6a6..266de30 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -91,7 +91,10 @@ export default function HomePage({ data }) { - + Impact Section Backgroud Image
@@ -103,7 +106,7 @@ export default function HomePage({ data }) { {data.impact_example.map((example, idx) => ( - +

{example.impact_big_text}

{example.impact_small_text}

diff --git a/src/pages/process.js b/src/pages/process.js index 1b5c615..b014e6a 100644 --- a/src/pages/process.js +++ b/src/pages/process.js @@ -18,7 +18,7 @@ export const query = graphql` data { find_button_destination find_button_text - find_description + # find_description find_header header_image { url @@ -27,9 +27,9 @@ export const query = graphql` height } } - how_description { - text - } + # how_description { + # text + # } how_header how_images { how_image { From 49e06ec0f78af8274c47137e47ba017695d44175 Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 12:49:38 -0400 Subject: [PATCH 11/13] #53 updating alt --- src/components/homepage/index-styles.js | 2 +- src/components/homepage/index.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index acafcb2..caaa1d1 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -205,7 +205,7 @@ export const HomePageContainer = styled.div` export const SolutionsSection = styled.div` height: 100vh; - margin-top: 100px; + margin-top: 200px; color: ${colors.blue900}; padding-bottom: 100px; ` diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index afb6ea2..0ce32f1 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -38,8 +38,6 @@ import { } from "./index-styles" import Circle from "../../vectors/circle.svg" -import PlantIcon from "../../vectors/holding-plant-icon.svg" - import TreeIcon from "../../vectors/renewable-tree-icon.svg" import SunIcon from "../../vectors/sun-icon.svg" import PlantIcon from "../../vectors/plant-icon.svg" @@ -165,7 +163,7 @@ export default function HomePage({ data }) { - +

{data.cta_text}

From 2008a0d1dea273faf795c5d424baed47c2264b5e Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 15:16:19 -0400 Subject: [PATCH 12/13] updating singular use case query --- src/templates/use_case.js | 64 +++++++++++++++++++++------------------ 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/src/templates/use_case.js b/src/templates/use_case.js index 0d0a429..bf01c63 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -14,37 +14,41 @@ export const query = graphql` node { uid data { - preview_title - preview_image { - url + preview_title + preview_image { + url + } + specific_reason { + specific_reason_heading + specific_reason_description + reason_image { + url + } + } + reasons_main_heading + preview_description + overview_image_two { + url + } + overview_image_one { + url + } + overview_heading + overview_description { + text + raw + } + learn_more_button_text + learn_more_button_destination { + url + } + demo_video_url + demo_heading + cta_button_text + cta_button_destination { + url + } } - specific_reason { - specific_reason_heading - specific_reason_description - } - reasons_main_heading - preview_description - overview_image_two { - url - } - overview_image_one { - url - } - overview_heading - overview_description - learn_more_button_text - learn_more_button_destination { - url - } - demo_video { - url - } - demo_heading - cta_button_text - cta_button_destination { - url - } - } } } } From f5128aebbdb108052eab169d1cf7fabe815a3851 Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 15:19:15 -0400 Subject: [PATCH 13/13] updating use case schema --- src/schemas/use_case.json | 175 ++++++++++++++++++++------------------ 1 file changed, 92 insertions(+), 83 deletions(-) diff --git a/src/schemas/use_case.json b/src/schemas/use_case.json index c5d150b..2433881 100644 --- a/src/schemas/use_case.json +++ b/src/schemas/use_case.json @@ -1,125 +1,134 @@ { - "Main" : { - "uid" : { - "type" : "UID", - "config" : { - "label" : "uid" + "Main": { + "uid": { + "type": "UID", + "config": { + "label": "uid" } }, - "preview_title" : { - "type" : "Text", - "config" : { - "label" : "Preview Title" + "preview_title": { + "type": "Text", + "config": { + "label": "Preview Title" } }, - "preview_description" : { - "type" : "Text", - "config" : { - "label" : "Preview Description" + "preview_description": { + "type": "Text", + "config": { + "label": "Preview Description" } }, - "preview_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Preview Image" + "preview_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Preview Image" } }, - "learn_more_button_text" : { - "type" : "Text", - "config" : { - "label" : "Learn More Button Text" + "learn_more_button_text": { + "type": "Text", + "config": { + "label": "Learn More Button Text" } }, - "learn_more_button_destination" : { - "type" : "Link", - "config" : { - "label" : "Learn More Button Destination" + "learn_more_button_destination": { + "type": "Link", + "config": { + "label": "Learn More Button Destination" } } }, - "Overview" : { - "overview_heading" : { - "type" : "Text", - "config" : { - "label" : "Overview Heading" + "Overview": { + "overview_heading": { + "type": "Text", + "config": { + "label": "Overview Heading" } }, - "overview_description" : { - "type" : "Text", - "config" : { - "label" : "Overview Description" + "overview_description": { + "type": "StructuredText", + "config": { + "multi": "paragraph", + "label": "Overview Description" } }, - "overview_image_one" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Overview Image One" + "overview_image_one": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Overview Image One" } }, - "overview_image_two" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Overview Image Two" + "overview_image_two": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Overview Image Two" } } }, - "Reasons" : { - "reasons_main_heading" : { - "type" : "Text", - "config" : { - "label" : "Reasons Main Heading" + "Reasons": { + "reasons_main_heading": { + "type": "Text", + "config": { + "label": "Reasons Main Heading" } }, - "specific_reason" : { - "type" : "Group", - "config" : { - "fields" : { - "specific_reason_heading" : { - "type" : "Text", - "config" : { - "label" : "Specific Reason Heading" + "specific_reason": { + "type": "Group", + "config": { + "fields": { + "reason_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Reason Image" } }, - "specific_reason_description" : { - "type" : "Text", - "config" : { - "label" : "Specific Reason Description" + "specific_reason_heading": { + "type": "Text", + "config": { + "label": "Specific Reason Heading" + } + }, + "specific_reason_description": { + "type": "Text", + "config": { + "label": "Specific Reason Description" } } }, - "label" : "Specific Reason" + "label": "Specific Reason" } }, - "cta_button_text" : { - "type" : "Text", - "config" : { - "label" : "CTA Button Text" + "cta_button_text": { + "type": "Text", + "config": { + "label": "CTA Button Text" } }, - "cta_button_destination" : { - "type" : "Link", - "config" : { - "label" : "CTA Button Destination" + "cta_button_destination": { + "type": "Link", + "config": { + "label": "CTA Button Destination" } } }, - "Demo" : { - "demo_heading" : { - "type" : "Text", - "config" : { - "label" : "Demo Heading" + "Demo": { + "demo_heading": { + "type": "Text", + "config": { + "label": "Demo Heading" } }, - "demo_video" : { - "type" : "Embed", - "config" : { - "label" : "Demo Video" + "demo_video_url": { + "type": "Text", + "config": { + "label": "Demo Video Url" } } }