#38 updating image behind impact section

Scout-NU · Apr 30, 2021 · ef9a522 · ef9a522
1 parent c633cb0
commit ef9a522
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 20 deletions.
diff --git 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%;
+  }
 
-`
+  @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
@@ -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 }) {
             <img alt={data.section_image_alt} src={data.section_image.url} />
           </FutureImage>
         </FutureSection>
+
+        <ImpactImage>
+          <img src={data.impact_image.url} />
+        </ImpactImage>
         <ImpactSection>
           <div>
             <ImpactHeader>
               <ImpactIcon>
-              <PlantIcon />
-
+                <PlantIcon />
               </ImpactIcon>
               <H2>{data.impact_section_title}</H2>
             </ImpactHeader>
@@ -102,11 +108,18 @@ export default function HomePage({ data }) {
                     <H1>{example.impact_big_text}</H1>
                     <P>{example.impact_small_text}</P>
                     {idx === 2 && <NodeLine />}
+                    <MobileNodeLine />
                     <Circle />
                   </ImpactStat>
                 </ImpactExample>
               ))}
             </ImpactStats>
+
+            <ImpactCTA>
+              <FutureCTA>
+                <a href={data.button_destination}>{data.button_text}</a>
+              </FutureCTA>
+            </ImpactCTA>
           </div>
         </ImpactSection>
         <SolutionsSection>