#53 homepage CTA bottom

Scout-NU · May 2, 2021 · f54a9e7 · f54a9e7
1 parent b38f2c5
commit f54a9e7
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 3 deletions.
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -102,8 +102,6 @@ export const FutureSolarIcon = styled.div`
   height: 64px;
   margin-bottom: 48px;
 
-
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     svg {
       width: 118px;
@@ -148,7 +146,6 @@ export const SolutionsSection = styled.div`
   margin-top: 100px;
   color: ${colors.blue900};
   padding-bottom: 100px;
-
 `
 
 export const SolutionsCard = styled.div`
@@ -202,3 +199,65 @@ 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};
+}
+`
diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
@@ -19,10 +19,16 @@ import {
   SolutionsCard,
   SolutionsCards,
   SolutionsCTA,
+  CTASection,
+  CTAImage,
+  CTAContent,
+  CTAText,
+  CTAButton,
 } from "./index-styles"
 
 import TreeIcon from "../../vectors/renewable-tree-icon.svg"
 import SunIcon from "../../vectors/sun-icon.svg"
+import PlantIcon from "../../vectors/plant-icon.svg"
 import { Helmet } from "react-helmet"
 
 export default function HomePage({ data }) {
@@ -102,6 +108,24 @@ export default function HomePage({ data }) {
             </a>{" "}
           </SolutionsCTA>
         </SolutionsSection>
+
+        <CTASection>
+          <CTAContent>
+            <CTAImage>
+              <img src={data.cta_image.url} />
+            </CTAImage>
+
+            <CTAText>
+              <PlantIcon />
+              <H2>{data.cta_text}</H2>
+              <CTAButton>
+                <a target="_blank" s rel="noreferrer" href="/solutions">
+                  Contact Us
+                </a>{" "}
+              </CTAButton>
+            </CTAText>
+          </CTAContent>
+        </CTASection>
       </HomePageContainer>
     </>
   )

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -53,6 +53,13 @@ export const query = graphql`
             width
           }
         }
+
+        cta_text
+        cta_button_destination
+        cta_button_text
+        cta_image {
+          url
+        }
         impact_example {
           impact_big_text
           impact_small_text

diff --git a/src/schemas/Homepage.json b/src/schemas/Homepage.json
@@ -189,6 +189,14 @@
     }
   },
   "Quote Section" : {
+    "quote_image" : {
+      "type" : "Image",
+      "config" : {
+        "constraint" : { },
+        "thumbnails" : [ ],
+        "label" : "quote image"
+      }
+    },
     "quotes" : {
       "type" : "Group",
       "config" : {
@@ -215,5 +223,33 @@
         "label" : "Quotes"
       }
     }
+  },
+  "Reach Out Section" : {
+    "cta_text" : {
+      "type" : "Text",
+      "config" : {
+        "label" : "CTA Text"
+      }
+    },
+    "cta_button_text" : {
+      "type" : "Text",
+      "config" : {
+        "label" : "CTA Button Text"
+      }
+    },
+    "cta_button_destination" : {
+      "type" : "Text",
+      "config" : {
+        "label" : "CTA Button Destination"
+      }
+    },
+    "cta_image" : {
+      "type" : "Image",
+      "config" : {
+        "constraint" : { },
+        "thumbnails" : [ ],
+        "label" : "CTA Image"
+      }
+    }
   }
 }
diff --git a/src/vectors/plant-icon.svg b/src/vectors/plant-icon.svg