Merge pull request #51 from Scout-NU/#49-homepage-solar-section

#49 homepage 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

@@ -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};
+}
+`

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 }) {
             <img alt={data.section_image_alt} src={data.section_image.url} />
           </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
+                      alt={use_case.use_case.document.data.preview_title}
+                      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

@@ -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
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }