#13 basic style and structure for footer

gatsby-config.js

@@ -33,6 +33,7 @@ module.exports = {
           // all the schemas here
           test: require("./src/schemas/test.json"),
           Process: require("./src/schemas/Process.json"),
+          footer: require("./src/schemas/footer.json")
         },
         typePathsFilenamePrefix: "prismic-typepaths---powerhouse-site",
       },

src/components/footer.js

@@ -0,0 +1,231 @@
+import React from "react"
+import styled from "styled-components"
+import dimensions from "../style/dimensions"
+import { StaticQuery, graphql } from "gatsby"
+
+const FooterContainer = styled.div`
+  background-color: #c4c4c4;
+  width: 100%;
+`
+
+const FooterMainContent = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+const SocialSection = styled.div`
+  margin-left: 32px;
+  padding-top: 50px;
+`
+
+const FooterHeader = styled.div`
+  font-weight: bold;
+  font-size: 24px;
+`
+
+const SocialIcons = styled.div`
+  display: flex;
+  padding-top: 15px;
+`
+
+const SocialPlaceholder = styled.div`
+  margin-right: 12px;
+`
+const EmailText = styled.div`
+  text-decoration: underline;
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 25px;
+`
+
+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: black;
+  }
+
+  ul {
+    list-style: none;
+  }
+`
+
+const LinkColumn = styled.div`
+  padding-right: 9vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-right: 0;
+  }
+`
+
+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;
+  }
+`
+
+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;
+    }
+  }
+`
+
+const EmailFormHeader = styled.div``
+
+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>
+              <SocialIcons>
+                {data.prismicFooter.data.social_media.map(social => {
+                  return (
+                    <a href={social.social_link}>
+                      <SocialPlaceholder>
+                        <img src={social.social_icon.url} />
+                      </SocialPlaceholder>
+                    </a>
+                  )
+                })}
+              </SocialIcons>
+              <EmailText>{data.prismicFooter.data.email}</EmailText>
+            </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>
+                <EmailFormHeader>Sign Up For Our Newsletter</EmailFormHeader>
+                <input
+                  type="text"
+                  placeholder="your@email.com"
+                  name="email"
+                  required
+                />
+              </form>
+            </EmailSection>
+          </FooterMainContent>
+
+          <BottomLinks>
+            <ul>
+              <li>
+                <a href="#">Privacy Policy</a>
+              </li>
+              <li>
+                <a href="#">Accessibility</a>
+              </li>
+              <li>
+                <a href="#">Powerhouse 2021</a>
+              </li>
+            </ul>
+          </BottomLinks>
+        </FooterContainer>
+      )}
+    />
+  )
+}

src/components/layout.js

@@ -1,62 +1,20 @@
 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"
 
 const LayoutContainer = styled.div`
-  body * {
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  html,
-  body,
-  #root {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    min-height: 100%;
-  }
-
-  body {
-    width: 100%;
-    margin: 0 auto;
-    font-size: 16px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-
-    @media (max-width: ${dimensions.maxwidthMobile}px) {
-      font-size: 14px;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  /*
-  A workaround for forcing accessibility wrappers
-  to have a 100% height.
-  Reach Router issue here: https: //github.com/reach/router/issues/63
-  */
-  #___gatsby,
-  div[role="group"][tabindex] {
-    height: 100%;
-    min-height: 100% !important;
-  }
-
-  padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
 
-  margin: 0 auto;
 `
 const LayoutBody = styled.div`
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
   }
 
-  @media (max-width: ${dimensions.maxwidthMobile}px) {
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
   }
 `
@@ -65,8 +23,10 @@ const Layout = ({ children }) => {
   return (
     <LayoutContainer>
       <LayoutBody>{children}</LayoutBody>
+
+      <Footer />
     </LayoutContainer>
   )
 }
 
-export default Layout
+export default Layout

src/pages/index.js

@@ -1,8 +1,9 @@
 import React from "react"
 import { graphql } from "gatsby"
+import Layout from "../components/layout"
 
 export default function Home({ data }) {
-  return <div>{data.prismicTestContent.data.test_title[0].text}</div>
+  return <Layout>{data.prismicTestContent.data.test_title[0].text}</Layout>
 }
 
 export const query = graphql`

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 }) {

src/schemas/footer.json

@@ -0,0 +1,33 @@
+{
+    "Main" : { },
+    "Social" : {
+      "email" : {
+        "type" : "Text",
+        "config" : {
+          "label" : "Email"
+        }
+      },
+      "social_media" : {
+        "type" : "Group",
+        "config" : {
+          "fields" : {
+            "social_icon" : {
+              "type" : "Image",
+              "config" : {
+                "constraint" : { },
+                "thumbnails" : [ ],
+                "label" : "Social Icon"
+              }
+            },
+            "social_link" : {
+              "type" : "Text",
+              "config" : {
+                "label" : "Social Link"
+              }
+            }
+          },
+          "label" : "Social Media"
+        }
+      }
+    }
+  }

src/style/global.scss

@@ -0,0 +1,4 @@
+html, body
+{
+    margin: 0px; padding: 0px
+}