Merge branch 'master' into #31-product-page-featured-product-section

Scout-NU · May 5, 2021 · 88b3f42 · 88b3f42
2 parents 070c8b4 + f5128ae
commit 88b3f42
Show file tree

Hide file tree

Showing 17 changed files with 879 additions and 146 deletions.
diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js
@@ -0,0 +1,114 @@
+import styled from "styled-components"
+import colors from "../../style/colors"
+import dimensions from "../../style/dimensions"
+
+import { fontSizes } from "../../style/type-styles"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../style/variables"
+export const ContactContainer = styled.div`
+  min-height: 100vh;
+`
+
+export const ContactForm = styled.div`
+  padding-top: 172px;
+  width: 100%;
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    width: 36vw;
+
+  }
+  color: ${colors.blue900};
+  input {
+    border-width: 0 0 2px;
+    border-color: ${colors.input_gray};
+    width: 100%;
+    margin-bottom: 32px;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    input {
+      border-width: 0 0 2px;
+      border-color: ${colors.input_gray};
+      width: 36vw;
+      margin-bottom: 32px;
+    }
+  }
+  input::placeholder {
+    font-size: ${fontSizes.body};
+    color: ${colors.input_gray};
+  }
+`
+
+export const ContactSection = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+export const ContactDescription = styled.div`
+  margin-bottom: 64px;
+`
+export const ContactButton = styled.button`
+  font-size: 16px;
+  padding-right: 60px;
+  padding-left: 60px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  background-color: ${colors.orange900};
+  text-transform: uppercase;
+  color: ${colors.white900};
+
+  border: none;
+`
+
+export const ContactImageSection = styled.div`
+  margin-right: -${layoutPaddingDesktop};
+  img {
+    margin-top: 172px;
+    right: 0px;
+    width: 50vw;
+    height: 531px;
+    object-fit: cover;
+  }
+
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-right: -${layoutPaddingMobile};
+
+    img {
+      margin-top: 172px;
+      right: 0px;
+      width: 100%;
+      height: 263px;
+      object-fit: cover;
+    }
+
+  }
+
+`
+
+export const SpecificContactInfo = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: space-apart;
+  }
+`
+
+export const EmailSection = styled.div`
+  margin-right: 127px;
+  margin-top: 64px;
+  color: ${colors.blue900};
+`
+
+export const AddressSection = styled.div`
+  margin-top: 64px;
+  color: ${colors.blue900};
+  width: 228px;
+  margin-bottom: 110px;
+`
+
+export const UseCaseSection = styled.div`
+
+
+`
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -44,7 +44,7 @@ export const Header = ({ home }) => {
         <NavLink href="/products">
           <NavText>PRODUCTS</NavText>
         </NavLink>
-        <NavLink href="/UseCases">
+        <NavLink href="/solutions">
           <NavText>SOLUTIONS</NavText>
         </NavLink>
       </NavLinks>

diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -58,6 +58,68 @@ 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 (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+`
+export const ImpactHeader = styled.div`
+  width: 43vw;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+  }
+`
+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: 48;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    margin-top: 132px;
+    margin-bottom: 80px;
+  }
+`
+
+export const ImpactExample = styled.div`
+  padding-right: 9vw;
+
+  svg {
+    margin-top: 48px;
+    position: relative;
+    z-index: 1;
+  }
+`
+
+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;
+`
+
 export const FutureSection = styled.div`
   height: 100vh;
   position: relative;
@@ -102,8 +164,6 @@ export const FutureSolarIcon = styled.div`
   height: 64px;
   margin-bottom: 48px;
 
-
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     svg {
       width: 118px;
@@ -145,10 +205,9 @@ export const HomePageContainer = styled.div`
 
 export const SolutionsSection = styled.div`
   height: 100vh;
-  margin-top: 100px;
+  margin-top: 200px;
   color: ${colors.blue900};
   padding-bottom: 100px;
-
 `
 
 export const SolutionsCard = styled.div`
@@ -202,3 +261,125 @@ a {
   color: ${colors.orange900};
 }
 `
+export const CTASection = styled.div`
+  height: 100vh;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-top: 480px;
+  }
+`
+
+export const CTAImage = styled.div`
+  margin-top: 100px;
+  margin-bottom: 100px;
+  img {
+    object-fit: cover;
+    width: 351px;
+    height: 234px;
+  }
+
+  margin-left: -${layoutPaddingMobile};
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    img {
+      object-fit: cover;
+      width: 50vw;
+      height: 472px;
+    }
+
+    margin-left: -${layoutPaddingDesktop};
+  }
+`
+
+export const CTAContent = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    align-items: center;
+  }
+`
+
+export const CTAText = styled.div`
+  color: ${colors.blue900};
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    margin-left: 133px;
+  }
+`
+
+export const CTAButton = styled.div`
+margin-top: 64px;
+display: flex;
+
+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};
+}
+`
+export const NodeLine = styled.div`
+  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;
+  }
+`