#20 styling future of solar section and adding images

src/components/homepage/index-styles.js

@@ -1,25 +1,21 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
-
 import {
   layoutPaddingDesktop,
   layoutPaddingMobile,
 } from "../../style/variables"
 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,49 +63,60 @@ export const FutureSection = styled.div`
   position: relative;
   padding-top: 64px;
 
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
     align-items: center;
     padding-top: 0px;
-
-
   }
 `
 
 export const FutureText = styled.div``
 
 export const FutureImage = styled.div`
-  background-color: ${colors.gray_icon};
   width: 100%;
   height: 450px;
   margin-top: 80px;
 
+  img {
+    object-fit: cover;
+    width: 100%;
+  }
+
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     position: absolute;
-    right: 0;
+    right: -${layoutPaddingDesktop};
     width: 42vw;
     height: 768px;
   }
 `
 
 export const FutureHeader = styled.div`
   font-weight: bold;
+  color: ${colors.blue900};
   @media (min-width: ${dimensions.maxwidthTablet}px) {
   }
 `
 
 export const FutureSolarIcon = styled.div`
   width: 64px;
   height: 64px;
-  border-radius: 8px;
-  background-color: ${colors.gray_icon};
   margin-bottom: 48px;
+
+
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    svg {
+      width: 118px;
+      height: 42px;
+    }
+  }
 `
 
 export const FutureDescription = styled.div`
   margin-top: 32px;
   font-size: 18px;
+  color: ${colors.blue900};
+
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     font-size: 16px;
   }
@@ -122,17 +129,16 @@ export const FutureCTA = styled.div`
     padding-left: 60px;
     padding-top: 16px;
     padding-bottom: 16px;
-    border: solid ${colors.gray_CTA}; 1px;
+    border: solid ${colors.orange900}; 1px;
     font-size: 16px;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
-    color: ${colors.gray_CTA};
+    color: ${colors.orange900};
   }
 `
 
 export const HomePageContainer = styled.div`
-position: relative;
-z-index: 0;
-
+  position: relative;
+  z-index: 0;
 `

src/components/homepage/index.js

@@ -17,6 +17,7 @@ import {
   HeroImage,
 } from "./index-styles"
 
+import SunIcon from "../../vectors/sun-icon.svg"
 import { Helmet } from "react-helmet"
 
 export default function HomePage({ data }) {
@@ -51,7 +52,9 @@ export default function HomePage({ data }) {
 
         <FutureSection>
           <FutureText>
-            <FutureSolarIcon alt="Future of Solar Icon"></FutureSolarIcon>
+            <FutureSolarIcon alt="Future of Solar Icon">
+              <SunIcon />
+            </FutureSolarIcon>
             <FutureHeader>
               <H2>{data.section_title}</H2>
             </FutureHeader>
@@ -63,7 +66,9 @@ export default function HomePage({ data }) {
               <a href={data.button_destination}>{data.button_text}</a>
             </FutureCTA>
           </FutureText>
-          <FutureImage></FutureImage>
+          <FutureImage>
+            <img src={data.section_image.url} />
+          </FutureImage>
         </FutureSection>
       </HomePageContainer>
     </>