#38 adding orange line to connect nodes

src/components/homepage/index-styles.js

@@ -59,6 +59,9 @@ export const HeroCTA = styled.div`
 `
 
 export const ImpactSection = styled.div`
+
+  display: flex;
+  justify-content: center;
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     min-height: 100vh;
   }
@@ -70,10 +73,7 @@ export const ImpactHeader = styled.div`
   }
 `
 export const ImpactIcon = styled.div`
-  width: 64px;
-  height: 64px;
-  background-color: ${colors.gray_icon};
-  border-radius: 8px;
+
   margin-top: 128px;
 `
 
@@ -83,14 +83,20 @@ export const ImpactStats = styled.div`
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
-    justify-content: center;
+    // justify-content: center;
     margin-top: 132px;
     margin-bottom: 64px;
   }
 `
 
 export const ImpactExample = styled.div`
   padding-right: 9vw;
+
+  svg {
+    margin-top: 48px;
+    position: relative;
+    z-index: 1;
+  }
 `
 
 export const ImpactStat = styled.div`
@@ -249,3 +255,14 @@ a {
   color: ${colors.orange900};
 }
 `
+export const NodeLine = styled.div`
+position: absolute;
+height: 3px;
+width: 66vw;
+left: -80px;
+margin-top: 64px;
+z-index: 0;
+background-color: #F27A28;
+
+
+`

src/components/homepage/index.js

@@ -26,8 +26,12 @@ import {
   SolutionsCard,
   SolutionsCards,
   SolutionsCTA,
+  NodeLine
 } from "./index-styles"
 
+import Circle from "../../vectors/circle.svg"
+import PlantIcon from "../../vectors/holding-plant-icon.svg"
+
 import TreeIcon from "../../vectors/renewable-tree-icon.svg"
 import SunIcon from "../../vectors/sun-icon.svg"
 import { Helmet } from "react-helmet"
@@ -85,15 +89,20 @@ export default function HomePage({ data }) {
         <ImpactSection>
           <div>
             <ImpactHeader>
-              <ImpactIcon />
+              <ImpactIcon>
+              <PlantIcon />
+
+              </ImpactIcon>
               <H2>{data.impact_section_title}</H2>
             </ImpactHeader>
             <ImpactStats>
-              {data.impact_example.map(example => (
+              {data.impact_example.map((example, idx) => (
                 <ImpactExample>
                   <ImpactStat>
                     <H1>{example.impact_big_text}</H1>
                     <P>{example.impact_small_text}</P>
+                    {idx === 2 && <NodeLine />}
+                    <Circle />
                   </ImpactStat>
                 </ImpactExample>
               ))}