Merge branch 'master' into #37-singular-product-page-feature-and-spec…

…-section

gatsby-config.js

@@ -33,6 +33,7 @@ module.exports = {
         schemas: {
           // all the schemas here
           test: require("./src/schemas/test.json"),
+          faq: require("./src/schemas/faq.json"),
           product_page: require("./src/schemas/product_page.json"),
           product: require("./src/schemas/product.json"),
           Process: require("./src/schemas/process.json"),
@@ -47,9 +48,9 @@ module.exports = {
       resolve: "gatsby-plugin-react-svg",
       options: {
         rule: {
-          include: /vectors/ // See below to configure properly
-        }
-      }
-    }
+          include: /vectors/, // See below to configure properly
+        },
+      },
+    },
   ],
 }

package.json

@@ -14,6 +14,8 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
     "@walltowall/gatsby-source-prismic-schemas": "^1.1.0",
     "gatsby": "^2.26.1",
     "gatsby-background-image": "^1.5.0",

src/components/contact/contact-styles.js

@@ -1,12 +1,12 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 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;
 `
@@ -16,7 +16,6 @@ export const ContactForm = styled.div`
   width: 100%;
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     width: 36vw;
-
   }
   color: ${colors.blue900};
   input {
@@ -49,7 +48,7 @@ export const ContactSection = styled.div`
 export const ContactDescription = styled.div`
   margin-bottom: 64px;
 `
-export const ContactButton = styled.button`
+export const ContactButton = styled.a`
   font-size: 16px;
   padding-right: 60px;
   padding-left: 60px;
@@ -60,6 +59,11 @@ export const ContactButton = styled.button`
   color: ${colors.white900};
 
   border: none;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 0 46px -9px ${colors.orange900};
+  }
 `
 
 export const ContactImageSection = styled.div`
@@ -72,7 +76,6 @@ export const ContactImageSection = styled.div`
     object-fit: cover;
   }
 
-
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     margin-right: -${layoutPaddingMobile};
 
@@ -83,9 +86,7 @@ export const ContactImageSection = styled.div`
       height: 263px;
       object-fit: cover;
     }
-
   }
-
 `
 
 export const SpecificContactInfo = styled.div`
@@ -108,7 +109,4 @@ export const AddressSection = styled.div`
   margin-bottom: 110px;
 `
 
-export const UseCaseSection = styled.div`
-
-
-`
+export const UseCaseSection = styled.div``

src/components/faq/faq-contact/FAQContact.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { ContactButton } from "../../contact/contact-styles"
+import { Banner, CTABackground, CTATitle } from "./FAQContact.styles"
+export const FAQContact = ({
+  imageUrl,
+  ctaTitle,
+  ctaLabel,
+  ctaDestination,
+}) => (
+  <>
+    <Banner imageUrl={imageUrl}>
+      <CTABackground>
+        <CTATitle>{ctaTitle}</CTATitle>
+        <ContactButton href={ctaDestination}>{ctaLabel}</ContactButton>
+      </CTABackground>
+    </Banner>
+  </>
+)

src/components/faq/faq-contact/FAQContact.styles.js

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled"
+import colors from "../../../style/colors"
+import dimensions from "../../../style/dimensions"
+import { H3 } from "../../../style/type-styles"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../../style/variables"
+
+export const Banner = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-image: url(${props => props.imageUrl});
+  width: 100vw;
+  padding: 40px 60px;
+  margin: -${layoutPaddingDesktop};
+  height: 70vh;
+
+  @media (max-width: ${dimensions.maxwidthMobile}px) {
+    height: 40vh;
+    margin: -${layoutPaddingMobile};
+  }
+`
+
+export const CTABackground = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: ${colors.white900};
+`
+
+export const CTATitle = styled(H3)`
+  color: ${colors.blue900};
+`