Merge branch 'master' into develop-header-#26

src/components/footer/footer-styles.js

@@ -0,0 +1,149 @@
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+export const FooterContainer = styled.div`
+  background-color: #848484;
+  width: 100%;
+  color: #ffffff;
+`
+
+export const FooterMainContent = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+export const SocialSection = styled.div`
+  padding-left: 80px;
+  padding-top: 50px;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-left: 32px;
+  }
+`
+
+export const FooterHeader = styled.div`
+  font-weight: bold;
+  font-size: 24px;
+`
+
+export const SocialIcons = styled.div`
+  display: flex;
+  padding-top: 15px;
+`
+
+export const SocialPlaceholder = styled.div`
+  width: 24px;
+  height: 24px;
+  background-color: #a4a4a4;
+  border-radius: 8px;
+  margin-right: 16px;
+`
+export const EmailText = styled.div`
+  text-decoration: underline;
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 25px;
+`
+
+export const LinkSection = styled.div`
+  display: flex;
+  margin-left: 9vw;
+  padding-top: 50px;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-left: 0px;
+  }
+
+  li {
+    padding-bottom: 47px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  a {
+    text-decoration: none;
+    color: #ffffff;
+  }
+
+  ul {
+    list-style: none;
+  }
+`
+
+export const LinkColumn = styled.div`
+  padding-right: 9vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-right: 0;
+  }
+`
+
+export const EmailSection = styled.div`
+  margin-left: 32px;
+
+  input {
+    width: 20vw;
+    height: 36px;
+    margin-top: 10px;
+    border: solid #626262 1px;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    input {
+      width: 80%;
+      height: 36px;
+      margin-top: 10px;
+      border: solid #626262 1px;
+    }
+  }
+
+  input::placeholder {
+    padding-left: 14px;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding-top: 50px;
+    position: absolute;
+    right: 62px;
+  }
+`
+
+export const BottomLinks = styled.div`
+  a {
+    text-decoration: none;
+    color: black;
+  }
+  ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding-bottom: 30px;
+  }
+
+  li {
+    font-size: 12px;
+    padding-right: 28px;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    ul {
+      display: flex;
+      justify-content: center;
+      list-style: none;
+      padding-top: 80px;
+      padding-bottom: 12px;
+    }
+  }
+`
+
+export const AddressSection = styled.div`
+  width: 177px;
+  padding-top: 16px;
+`
+export const ScoutSection = styled.div`
+  margin-top: 32px;
+  color: #ffffff;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-bottom: 48px;
+  }
+`

src/components/footer/footer.js

@@ -0,0 +1,104 @@
+import React from "react"
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+import { StaticQuery, graphql } from "gatsby"
+
+import {
+  FooterContainer,
+  FooterMainContent,
+  SocialSection,
+  FooterHeader,
+  SocialIcons,
+  SocialPlaceholder,
+  LinkSection,
+  LinkColumn,
+  EmailSection,
+  AddressSection,
+  ScoutSection,
+} from "./footer-styles"
+
+export default function footer({ data }) {
+  return (
+    <StaticQuery
+      query={graphql`
+        query prismicFooter {
+          prismicFooter {
+            data {
+              email
+              social_media {
+                social_icon {
+                  url
+                }
+                social_link
+              }
+            }
+          }
+        }
+      `}
+      render={data => (
+        <FooterContainer>
+          <FooterMainContent>
+            <SocialSection>
+              <FooterHeader>Powerhouse</FooterHeader>
+              <AddressSection>
+                123 Lorem Ipsum Dolor Tempor Incididunt YZ, 12345 123-456-7890
+              </AddressSection>
+            </SocialSection>
+
+            <LinkSection>
+              <LinkColumn>
+                <ul>
+                  <li>
+                    <a href="/about">Home</a>
+                  </li>
+                  <li>
+                    <a href="/about">About</a>
+                  </li>
+                  <li>
+                    <a href="/about">Process</a>
+                  </li>
+                </ul>
+              </LinkColumn>
+
+              <LinkColumn>
+                <ul>
+                  <li>
+                    <a href="/about">Products</a>
+                  </li>
+                  <li>
+                    <a href="/about">Solutions</a>
+                  </li>
+                  <li>
+                    <a href="/about">FAQ</a>
+                  </li>
+                </ul>
+              </LinkColumn>
+            </LinkSection>
+
+            <EmailSection>
+              <form>
+                <input
+                  type="text"
+                  placeholder="[email protected]"
+                  name="email"
+                  required
+                />
+              </form>
+              <SocialIcons>
+                {data.prismicFooter.data.social_media.map(social => {
+                  return (
+                    <a href={social.social_link}>
+                      <SocialPlaceholder />
+                    </a>
+                  )
+                })}
+              </SocialIcons>
+
+              <ScoutSection>Made with love by Scout</ScoutSection>
+            </EmailSection>
+          </FooterMainContent>
+        </FooterContainer>
+      )}
+    />
+  )
+}

src/components/layout.js

@@ -1,35 +1,29 @@
-
 import React from "react"
 import styled from "styled-components"
 import "../style/typography.scss"
 import "../style/global.scss"
 import dimensions from "../style/dimensions"
 import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables"
-import Footer from "../components/footer.js"
-import Header from "../components/header/header.jsx"
+import Footer from "../components/footer/footer"
+import Header from "../components/header/header"
 
-const LayoutContainer = styled.div`
-@media (min-width: ${dimensions.maxwidthTablet}px) {
-  padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
-}
-@media (max-width: ${dimensions.maxwidthTablet}px) {
-  padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
-}
-`
+const LayoutContainer = styled.div``
 const LayoutBody = styled.div`
-  // @media (min-width: ${dimensions.maxwidthTablet}px) {
-  //   padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
-  // }
-  // @media (max-width: ${dimensions.maxwidthTablet}px) {
-  //   padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
-  // }
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
+  }
 `
 
 const Layout = ({ children }) => {
   return (
     <LayoutContainer>
       <Header />
       <LayoutBody>{children}</LayoutBody>
+      <Footer />
     </LayoutContainer>
   )
 }

src/pages/about.js

@@ -0,0 +1,51 @@
+import { graphql } from "gatsby"
+
+import React from "react"
+
+export default function About({ data }) {
+    const aboutData = data.prismicAboutPage.data
+
+    return (
+        <div>
+            <h1>{aboutData.company_background_section_heading}</h1>
+        </div>
+    )
+}
+
+export const query = graphql`
+  query AboutQuery {
+    prismicAboutPage {
+      data {
+        company {
+          company_name
+        }
+        company_background_description
+        company_background_section_heading
+        company_comparison_section_heading
+        company_team_heading
+        cta_button_destination
+        cta_button_text
+        industry_context_explanation {
+          explanation_description
+        }
+        industry_context_heading
+        mission_description
+        mission_heading
+        product_benefit {
+          product_benefit_title
+        }
+        product_feature {
+          product_feature_name
+        }
+        products_navigation_button_destination
+        products_navigation_button_text
+        team_member_information {
+          contact_button_destination
+          contact_button_text
+          team_member_description
+          team_member_title
+        }
+      }
+    }
+  }
+`

src/pages/process.js

@@ -1,7 +1,5 @@
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-
-
 import React from "react"
 
 export default function Process({ data }) {