#49 updating schemas, changing use cases to solutions and styling fut…

…ure of solar section

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"),
         },

src/components/homepage/index-styles.js

@@ -8,18 +8,15 @@ import {
 import "../../style/colors"
 import colors from "../../style/colors"
 
-
 export const HeroImage = styled.div`
-position: absolute;
-top: 0;
-z-index: 0;
-img {
-
-  width: 100vw;
-  height: 100vh;
-  object-fit: cover;
-
-}
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  img {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+  }
 `
 
 export const HeroContainer = styled.div`
@@ -67,13 +64,10 @@ export const FutureSection = styled.div`
   position: relative;
   padding-top: 64px;
 
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
     align-items: center;
     padding-top: 0px;
-
-
   }
 `
 
@@ -132,7 +126,66 @@ export const FutureCTA = styled.div`
 `
 
 export const HomePageContainer = styled.div`
-position: relative;
-z-index: 0;
+  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};
+}
+`

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,14 @@ import {
   FutureImage,
   HomePageContainer,
   HeroImage,
+  SolutionsSection,
+  SolutionsCard,
+  SolutionsCards,
+  SolutionsCTA,
 } from "./index-styles"
 
+import TreeIcon from "../../vectors/renewable-tree-icon.svg"
+
 import { Helmet } from "react-helmet"
 
 export default function HomePage({ data }) {
@@ -65,6 +71,32 @@ export default function HomePage({ data }) {
           </FutureText>
           <FutureImage></FutureImage>
         </FutureSection>
+
+        <SolutionsSection>
+          <TreeIcon />
+          <H2>{data.solutions_header}</H2>
+
+          <SolutionsCards>
+            {data.use_cases.map((use_case, idx) => {
+              return (
+                <SolutionsCard key={idx}>
+                  <a href={use_case.use_case.document.uid}>
+                    <img
+                      src={use_case.use_case.document.data.preview_image.url}
+                    />
+                    <H3>{use_case.use_case.document.data.preview_title}</H3>
+                  </a>
+                </SolutionsCard>
+              )
+            })}
+          </SolutionsCards>
+
+          <SolutionsCTA>
+            <a target="_blank" s rel="noreferrer" href="/solutions">
+              View use cases
+            </a>{" "}
+          </SolutionsCTA>
+        </SolutionsSection>
       </HomePageContainer>
     </>
   )

src/pages/index.js

@@ -70,6 +70,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
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }