diff --git a/gatsby-config.js b/gatsby-config.js
index d7c2f4e..816016d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -36,7 +36,7 @@ module.exports = {
product_page: require("./src/schemas/product_page.json"),
product: require("./src/schemas/product.json"),
Process: require("./src/schemas/process.json"),
- Homepage: require("./src/schemas/Homepage.json"),
+ homepage: require("./src/schemas/homepage.json"),
use_cases_page: require("./src/schemas/use_cases_page.json"),
use_case: require("./src/schemas/use_case.json"),
},
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
index 35ac151..d22a54c 100644
--- a/src/components/homepage/index-styles.js
+++ b/src/components/homepage/index-styles.js
@@ -142,3 +142,63 @@ export const HomePageContainer = styled.div`
position: relative;
z-index: 0;
`
+
+export const SolutionsSection = styled.div`
+ height: 100vh;
+ margin-top: 100px;
+ color: ${colors.blue900};
+ padding-bottom: 100px;
+
+`
+
+export const SolutionsCard = styled.div`
+ a {
+ text-decoration: none;
+ color: ${colors.blue900};
+ }
+ @media (max-width: ${dimensions.maxwidthTablet}px) {
+ img {
+ width: 100%;
+ object-fit: cover;
+ }
+
+ margin-bottom: 48px;
+ margin-top: 48px;
+ }
+ @media (min-width: ${dimensions.maxwidthTablet}px) {
+ img {
+ width: 25vw;
+ height: 248px;
+
+ object-fit: cover;
+ }
+ }
+
+ text-align: center;
+`
+
+export const SolutionsCards = styled.div`
+ @media (min-width: ${dimensions.maxwidthTablet}px) {
+ display: flex;
+ justify-content: space-between;
+ }
+`
+
+export const SolutionsCTA = styled.div`
+margin-top: 64px;
+display: flex;
+justify-content: center;
+
+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 c45cbdc..1d4cf56 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -1,5 +1,5 @@
import React from "react"
-import { H1, P, H2 } from "../../style/type-styles"
+import { H1, P, H2, H3 } from "../../style/type-styles"
import {
HeroContainer,
HeroTextSection,
@@ -15,8 +15,13 @@ import {
FutureImage,
HomePageContainer,
HeroImage,
+ SolutionsSection,
+ SolutionsCard,
+ SolutionsCards,
+ SolutionsCTA,
} from "./index-styles"
+import TreeIcon from "../../vectors/renewable-tree-icon.svg"
import SunIcon from "../../vectors/sun-icon.svg"
import { Helmet } from "react-helmet"
@@ -70,6 +75,33 @@ export default function HomePage({ data }) {
+
+
+
+ {data.solutions_header}
+
+
+ {data.use_cases.map((use_case, idx) => {
+ return (
+
+
+ 
+ {use_case.use_case.document.data.preview_title}
+
+
+ )
+ })}
+
+
+
+
+ View use cases
+ {" "}
+
+
)
diff --git a/src/pages/index.js b/src/pages/index.js
index 9b2e09a..7c932b8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -71,6 +71,24 @@ export const query = graphql`
target
}
sign_up_button_text
+ solutions_header
+ use_cases {
+ use_case {
+ document {
+ ... on PrismicUseCase {
+ id
+ url
+ uid
+ data {
+ preview_title
+ preview_image {
+ url
+ }
+ }
+ }
+ }
+ }
+ }
}
}
}
diff --git a/src/pages/UseCases.js b/src/pages/solutions.js
similarity index 100%
rename from src/pages/UseCases.js
rename to src/pages/solutions.js
diff --git a/src/schemas/Homepage.json b/src/schemas/Homepage.json
index d558a72..008ebde 100644
--- a/src/schemas/Homepage.json
+++ b/src/schemas/Homepage.json
@@ -1,191 +1,191 @@
{
- "Main" : { },
- "Hero Section" : {
- "hero_headline" : {
- "type" : "Text",
- "config" : {
- "label" : "Hero Headline"
- }
- },
- "hero_subtext" : {
- "type" : "Text",
- "config" : {
- "label" : "Hero Subtext"
- }
- },
- "hero_cta_text" : {
- "type" : "Text",
- "config" : {
- "label" : "Hero Button Text"
- }
- },
- "hero_button_destination" : {
- "type" : "Link",
- "config" : {
- "label" : "Hero Button Destination"
- }
- },
- "hero_background_image" : {
- "type" : "Image",
- "config" : {
- "constraint" : { },
- "thumbnails" : [ ],
- "label" : "Hero Background Image"
- }
- }
- },
- "Intro to Solar" : {
- "section_title" : {
- "type" : "Text",
- "config" : {
- "label" : "Section title"
- }
- },
- "section_description" : {
- "type" : "Text",
- "config" : {
- "label" : "Section Description"
- }
- },
- "button_text" : {
- "type" : "Text",
- "config" : {
- "label" : "Button Text"
- }
- },
- "button_destination" : {
- "type" : "Link",
- "config" : {
- "label" : "Button Destination"
- }
- },
- "section_image_alt" : {
- "type" : "Text",
- "config" : {
- "label" : "section image alt"
- }
- },
- "section_image" : {
- "type" : "Image",
- "config" : {
- "constraint" : { },
- "thumbnails" : [ ],
- "label" : "Section Image"
- }
- }
- },
- "Impact Section" : {
- "impact_section_title" : {
- "type" : "Text",
- "config" : {
- "label" : "Impact Section Title"
- }
- },
- "impact_description" : {
- "type" : "Text",
- "config" : {
- "label" : "Impact Description"
- }
- },
- "impact_image" : {
- "type" : "Image",
- "config" : {
- "constraint" : { },
- "thumbnails" : [ ],
- "label" : "Impact Image"
- }
- },
- "impact_example" : {
- "type" : "Group",
- "config" : {
- "fields" : {
- "impact_example_image" : {
- "type" : "Image",
- "config" : {
- "constraint" : { },
- "thumbnails" : [ ],
- "label" : "Impact Example Image"
+ "Main" : { },
+ "Hero Section" : {
+ "hero_headline" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Hero Headline"
+ }
+ },
+ "hero_subtext" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Hero Subtext"
+ }
+ },
+ "hero_cta_text" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Hero Button Text"
+ }
+ },
+ "hero_button_destination" : {
+ "type" : "Link",
+ "config" : {
+ "label" : "Hero Button Destination"
+ }
+ },
+ "hero_background_image" : {
+ "type" : "Image",
+ "config" : {
+ "constraint" : { },
+ "thumbnails" : [ ],
+ "label" : "Hero Background Image"
+ }
+ }
+ },
+ "Intro to Solar" : {
+ "section_title" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Section title"
+ }
+ },
+ "section_description" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Section Description"
+ }
+ },
+ "button_text" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Button Text"
+ }
+ },
+ "button_destination" : {
+ "type" : "Link",
+ "config" : {
+ "label" : "Button Destination"
+ }
+ },
+ "section_image_alt" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "section image alt"
+ }
+ },
+ "section_image" : {
+ "type" : "Image",
+ "config" : {
+ "constraint" : { },
+ "thumbnails" : [ ],
+ "label" : "Section Image"
+ }
+ }
+ },
+ "Impact Section" : {
+ "impact_section_title" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Impact Section Title"
+ }
+ },
+ "impact_description" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Impact Description"
+ }
+ },
+ "impact_image" : {
+ "type" : "Image",
+ "config" : {
+ "constraint" : { },
+ "thumbnails" : [ ],
+ "label" : "Impact Image"
+ }
+ },
+ "impact_example" : {
+ "type" : "Group",
+ "config" : {
+ "fields" : {
+ "impact_example_image" : {
+ "type" : "Image",
+ "config" : {
+ "constraint" : { },
+ "thumbnails" : [ ],
+ "label" : "Impact Example Image"
+ }
+ },
+ "impact_big_text" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Impact Big Text"
+ }
+ },
+ "impact_small_text" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Impact Small Text"
+ }
}
},
- "impact_big_text" : {
- "type" : "Text",
- "config" : {
- "label" : "Impact Big Text"
+ "label" : "Impact Example"
+ }
+ }
+ },
+ "Email Section" : {
+ "email_eyebrow_heading" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Email Eyebrow Heading"
+ }
+ },
+ "enter_email_label" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Enter Email Label"
+ }
+ },
+ "email_description" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Email Description"
+ }
+ },
+ "sign_up_button_text" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Sign Up Button Text"
+ }
+ },
+ "sign_up_button_destination" : {
+ "type" : "Link",
+ "config" : {
+ "label" : "Sign Up Button Destination"
+ }
+ }
+ },
+ "Solutions" : {
+ "solutions_header" : {
+ "type" : "Text",
+ "config" : {
+ "label" : "Solutions Header"
+ }
+ },
+ "use_cases" : {
+ "type" : "Group",
+ "config" : {
+ "fields" : {
+ "use_case" : {
+ "type" : "Link",
+ "config" : {
+ "select" : "document",
+ "customtypes" : [ "use_case" ],
+ "label" : "Use Case"
+ }
}
},
- "impact_small_text" : {
- "type" : "Text",
- "config" : {
- "label" : "Impact Small Text"
- }
- }
- },
- "label" : "Impact Example"
- }
- }
- },
- "Email Section" : {
- "email_eyebrow_heading" : {
- "type" : "Text",
- "config" : {
- "label" : "Email Eyebrow Heading"
- }
- },
- "enter_email_label" : {
- "type" : "Text",
- "config" : {
- "label" : "Enter Email Label"
- }
- },
- "email_description" : {
- "type" : "Text",
- "config" : {
- "label" : "Email Description"
- }
- },
- "sign_up_button_text" : {
- "type" : "Text",
- "config" : {
- "label" : "Sign Up Button Text"
- }
- },
- "sign_up_button_destination" : {
- "type" : "Link",
- "config" : {
- "label" : "Sign Up Button Destination"
- }
- }
- },
- "Solutions" : {
- "solutions_header" : {
- "type" : "Text",
- "config" : {
- "label" : "Solutions Header"
- }
- },
- "use_cases" : {
- "type" : "Group",
- "config" : {
- "fields" : {
- "use_case" : {
- "type" : "Link",
- "config" : {
- "select" : "document",
- "customtypes" : [ "use_case" ],
- "label" : "Use Case"
- }
- }
- },
- "label" : "Use Cases"
- }
- },
- "use" : {
- "type" : "Link",
- "config" : {
- "select" : "document",
- "customtypes" : [ "use_case" ],
- "label" : "use"
+ "label" : "Use Cases"
+ }
+ },
+ "use" : {
+ "type" : "Link",
+ "config" : {
+ "select" : "document",
+ "customtypes" : [ "use_case" ],
+ "label" : "use"
+ }
}
}
- }
-}
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/src/vectors/renewable-tree-icon.svg b/src/vectors/renewable-tree-icon.svg
new file mode 100644
index 0000000..75ed21b
--- /dev/null
+++ b/src/vectors/renewable-tree-icon.svg
@@ -0,0 +1,20 @@
+