Merge pull request #29 from Scout-NU/#19-homepage-hero

#19 adding lofi hero section

gatsby-config.js

@@ -3,6 +3,7 @@
  *
  * See: https://www.gatsbyjs.com/docs/gatsby-config/
  */
+
 module.exports = {
   /* Your site config here */
   plugins: [
@@ -37,8 +38,7 @@ module.exports = {
           Process: require("./src/schemas/process.json"),
           Homepage: require("./src/schemas/Homepage.json"),
           use_cases_page: require("./src/schemas/use_cases_page.json"),
-          use_case: require("./src/schemas/use_case.json")
-
+          use_case: require("./src/schemas/use_case.json"),
         },
         typePathsFilenamePrefix: "prismic-typepaths---powerhouse-site",
       },

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@walltowall/gatsby-source-prismic-schemas": "^1.1.0",
     "gatsby": "^2.26.1",
+    "gatsby-plugin-exclude": "^1.0.2",
     "gatsby-plugin-netlify-headers": "^1.0.1",
     "gatsby-plugin-sass": "^4.0.2",
     "gatsby-source-prismic": "^3.3.3",

src/components/footer/footer.js

@@ -1,6 +1,4 @@
 import React from "react"
-import styled from "styled-components"
-import dimensions from "../../style/dimensions"
 import { StaticQuery, graphql } from "gatsby"
 
 import {

src/components/homepage/index-styles.js

@@ -0,0 +1,47 @@
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../style/variables"
+import "../../style/colors"
+import colors from "../../style/colors"
+
+export const HeroContainer = styled.div`
+  height: 100vh;
+  background-color: ${colors.gray_image};
+  margin-left: -${layoutPaddingDesktop} !important;
+  width: 100vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-left: -${layoutPaddingMobile} !important;
+  }
+`
+
+export const HeroTextSection = styled.div`
+  padding-top: 275px;
+  padding-left: ${layoutPaddingDesktop};
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-left: ${layoutPaddingMobile};
+  }
+`
+
+export const HeroHeadline = styled.div`
+`
+
+export const HeroDescription = styled.div`
+`
+
+export const HeroCTA = styled.div`
+  margin-top: 64px;
+  a {
+    background-color: ${colors.gray_CTA};
+    text-transform: uppercase;
+    color: ${colors.white900};
+    padding-left: 48px;
+    font-size: 16px;
+    padding-right: 48px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+`

src/components/homepage/index.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { H1, P } from "../../style/type-styles"
+import {
+  HeroContainer,
+  HeroTextSection,
+  HeroHeadline,
+  HeroDescription,
+  HeroCTA,
+} from "./index-styles"
+
+export default function HomePage({ data }) {
+  return (
+    <HeroContainer>
+      <HeroTextSection>
+        <HeroHeadline>
+          <H1>{data.hero_headline}</H1>
+        </HeroHeadline>
+        <HeroDescription>
+          <P>{data.hero_subtext}</P>
+        </HeroDescription>
+        <HeroCTA>
+          <a target="_blank" rel="noreferrer" href={data.hero_button_destination.text}>
+            {data.hero_cta_text}
+          </a>
+        </HeroCTA>
+      </HeroTextSection>
+    </HeroContainer>
+  )
+}

src/pages/UseCases.js

@@ -1,7 +1,6 @@
 import { graphql } from "gatsby"
 
 import React from "react"
-import Layout from "../components/layout"
 
 export default function UseCasesPage({ data }) {
     const useCasesPageData = data.prismicUseCasesPage.data

src/pages/index.js

@@ -1,12 +1,16 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
+import Homepage from "../components/homepage/index"
 
 export default function Home({ data }) {
-
   const homepageData = data.prismicHomepage.data
 
-  return <Layout>{homepageData.hero_headline}</Layout>
+  return (
+    <Layout>
+      <Homepage data={homepageData} />
+    </Layout>
+  )
 }
 
 export const query = graphql`
@@ -69,4 +73,4 @@ export const query = graphql`
       }
     }
   }
-`
+`

src/style/colors.js

@@ -0,0 +1,11 @@
+const colors = {
+  //lofi colors:
+  gray_image: "#C4C4C4",
+  gray_icon: "#A4A4A4",
+  gray_CTA: "#646464",
+
+  black900: "#000000",
+  white900: "#FFFFFF",
+}
+
+export default colors

src/style/global.scss

@@ -1,4 +1,9 @@
-html, body
-{
-    margin: 0px; padding: 0px
-}
+html,
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
+* {
+  min-height: 0vw;
+}

src/style/type-styles.js

@@ -0,0 +1,44 @@
+import styled from "styled-components"
+
+const minSize = {
+  h1: 50,
+  h2: 30,
+  h3: 20,
+  p: 16,
+}
+
+const devices = {
+  mobile: "320",
+  mobileMax: "375",
+  tablet: "768",
+  laptop: "1024",
+  desktop: "1440",
+}
+
+const fontSizes = {
+  h1: `calc(${minSize.h1}px + (64 - ${minSize.h1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+}
+
+const H1 = styled.h1`
+  font-size: ${fontSizes.h1};
+  font-weight: bold;
+`
+
+const H2 = styled.h2`
+  font-size: ${fontSizes.h2};
+  font-weight: bold;
+`
+
+const H3 = styled.h3`
+  font-size: ${fontSizes.h3};
+  font-weight: bold;
+`
+
+const P = styled.p`
+  font-size: ${fontSizes.p};
+`
+
+export { H1, H2, H3, P }

src/style/typography.scss

@@ -2,4 +2,4 @@
 
 * {
   font-family: "Oxygen", sans-serif;
-}
+}