#38 our impact section styles

Scout-NU · Apr 6, 2021 · 317707d · 317707d
1 parent e51f26e
commit 317707d
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 20 deletions.
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -26,11 +26,9 @@ export const HeroTextSection = styled.div`
   }
 `
 
-export const HeroHeadline = styled.div`
-`
+export const HeroHeadline = styled.div``
 
-export const HeroDescription = styled.div`
-`
+export const HeroDescription = styled.div``
 
 export const HeroCTA = styled.div`
   margin-top: 64px;
@@ -45,3 +43,51 @@ export const HeroCTA = styled.div`
     padding-bottom: 16px;
   }
 `
+export const HomePageContainer = styled.div``
+
+export const ImpactSection = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    min-height: 100vh;
+  }
+`
+export const ImpactHeader = styled.div`
+  width: 43vw;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+  }
+`
+export const ImpactIcon = styled.div`
+  width: 64px;
+  height: 64px;
+  background-color: ${colors.gray_icon};
+  border-radius: 8px;
+  margin-top: 128px;
+`
+
+export const ImpactStats = styled.div`
+  margin-top: 64px;
+  margin-bottom: 174px;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: center;
+    margin-top: 132px;
+    margin-bottom: 64px;
+  }
+`
+
+export const ImpactExample = styled.div`
+  padding-right: 9vw;
+`
+
+export const ImpactStat = styled.div`
+  text-align: center;
+`
+
+export const ImpactStatIcon = styled.div`
+  width: 194px;
+  height: 194px;
+  background-color: ${colors.gray_icon};
+  margin-left: auto;
+  margin-right: auto;
+`
diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
@@ -1,29 +1,62 @@
 import React from "react"
-import { H1, P } from "../../style/type-styles"
+import { H1, H2, P } from "../../style/type-styles"
 import {
+  HomePageContainer,
   HeroContainer,
   HeroTextSection,
   HeroHeadline,
   HeroDescription,
   HeroCTA,
+  ImpactSection,
+  ImpactHeader,
+  ImpactIcon,
+  ImpactStats,
+  ImpactExample,
+  ImpactStat,
+  ImpactStatIcon,
 } from "./index-styles"
 
 export default function HomePage({ data }) {
   return (
-    <HeroContainer>
-      <HeroTextSection>
-        <HeroHeadline>
-          <H1>{data.hero_headline}</H1>
-        </HeroHeadline>
-        <HeroDescription>
-          <P>{data.hero_subtext}</P>
-        </HeroDescription>
-        <HeroCTA>
-          <a target="_blank" rel="noreferrer" href={data.hero_button_destination.text}>
-            {data.hero_cta_text}
-          </a>
-        </HeroCTA>
-      </HeroTextSection>
-    </HeroContainer>
+    <HomePageContainer>
+      <HeroContainer>
+        <HeroTextSection>
+          <HeroHeadline>
+            <H1>{data.hero_headline}</H1>
+          </HeroHeadline>
+          <HeroDescription>
+            <P>{data.hero_subtext}</P>
+          </HeroDescription>
+          <HeroCTA>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={data.hero_button_destination.text}
+            >
+              {data.hero_cta_text}
+            </a>
+          </HeroCTA>
+        </HeroTextSection>
+      </HeroContainer>
+
+      <ImpactSection>
+        <ImpactHeader>
+          <ImpactIcon />
+          <H2>{data.impact_section_title}</H2>
+          <P>{data.impact_description}</P>
+        </ImpactHeader>
+        <ImpactStats>
+          {data.impact_example.map(example => (
+            <ImpactExample>
+              <ImpactStatIcon />
+              <ImpactStat>
+                <H1>{example.impact_big_text}</H1>
+                <P>{example.impact_small_text}</P>
+              </ImpactStat>
+            </ImpactExample>
+          ))}
+        </ImpactStats>
+      </ImpactSection>
+    </HomePageContainer>
   )
 }