Merge branch 'master' into #13-footer-component

Scout-NU · Apr 15, 2021 · cee1c87 · cee1c87
2 parents 3edc42d + 216d6d3
commit cee1c87
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "npm": "^7.9.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0",
     "sass": "^1.32.8",
     "styled-components": "^5.2.1"
   },

diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -4,47 +4,72 @@ import colors from "../../style/colors"
 
 export const NavContainer = styled.div`
   z-index: 1;
-  background-color: ${colors.gray_image};
   padding-bottom: 32px;
   &.colorChange {
-    background-color: ${colors.gray_CTA};
+    background-color: rgb(0, 0, 0, 0.55);
+    color: ${colors.white900};
+
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
+  color: ${colors.black900};
+
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const Logo = styled.div`
   font-weight: bold;
   font-size: 24px;
   padding-top: 32px;
   padding-left: 80px;
+  color: ${colors.black900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     text-align: center;
     font-size: 20px;
     padding-top: 24px;
     padding-left: 0px;
   }
+
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const NavLinks = styled.div`
   position: absolute;
   right: 80px;
   top: 40px;
   display: flex;
+  color: ${colors.black900};
+
+  &.home-header {
+    a {
+      color: ${colors.white900};
+    }
+  }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     display: none;
   }
 `
 
-export const NavLink = styled.div`
+export const NavLink = styled.a`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
+
+
   color: ${colors.black900};
+
+  &.home-header {
+    color: ${colors.white900};
+  }
+
 `
 
 export const MobileIcon = styled.div`

diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -10,7 +10,7 @@ import {
 
 import { NavText } from "../../style/type-styles"
 
-export const Header = () => {
+export const Header = ({ home }) => {
   const [open, setOpen] = useState(false)
   const [colorChange, setColorchange] = useState(false)
   const changeNavbarColor = () => {
@@ -22,15 +22,19 @@ export const Header = () => {
   }
   typeof window !== "undefined" &&
     window.addEventListener("scroll", changeNavbarColor)
-
   return (
-    <NavContainer className={colorChange ? "navbar colorChange" : "navbar"}>
-      <Logo>PowerHouse</Logo>
+    <NavContainer
+      className={
+        (colorChange ? "navbar colorChange" : "navbar") ||
+        (home === true ? "home-header" : "")
+      }
+    >
+      <Logo alt="PowerHouse Logo" className={home === true ? "home-header" : ""}>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
-        <Hamburger />
+        <Hamburger className="hamburger" />
       </MobileIcon>
-      <NavLinks>
+      <NavLinks className={home === true ? "home-header" : ""}>
         <NavLink href="/about">
           <NavText>ABOUT</NavText>
         </NavLink>
@@ -40,7 +44,7 @@ export const Header = () => {
         <NavLink href="/products">
           <NavText>PRODUCTS</NavText>
         </NavLink>
-        <NavLink href="/solutions">
+        <NavLink href="/UseCases">
           <NavText>SOLUTIONS</NavText>
         </NavLink>
       </NavLinks>

diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -8,6 +8,20 @@ import {
 import "../../style/colors"
 import colors from "../../style/colors"
 
+
+export const HeroImage = styled.div`
+position: absolute;
+top: 0;
+z-index: 0;
+img {
+
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+
+}
+`
+
 export const HeroContainer = styled.div`
   height: 100vh;
   background-color: ${colors.gray_image};
@@ -21,6 +35,9 @@ export const HeroContainer = styled.div`
 
 export const HeroTextSection = styled.div`
   padding-top: 275px;
+  z-index: 2;
+  color: ${colors.white900};
+  position: relative;
   padding-left: ${layoutPaddingDesktop};
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding-left: ${layoutPaddingMobile};
@@ -34,7 +51,7 @@ export const HeroDescription = styled.div``
 export const HeroCTA = styled.div`
   margin-top: 64px;
   a {
-    background-color: ${colors.gray_CTA};
+    background-color: ${colors.orange900};
     text-transform: uppercase;
     color: ${colors.white900};
     padding-left: 48px;

diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
@@ -14,48 +14,58 @@ import {
   FutureCTA,
   FutureImage,
   HomePageContainer,
+  HeroImage,
 } from "./index-styles"
 
+import { Helmet } from "react-helmet"
+
 export default function HomePage({ data }) {
   return (
-    <HomePageContainer>
-      <HeroContainer>
-        <HeroTextSection>
-          <HeroHeadline>
-            <H1>{data.hero_headline}</H1>
-          </HeroHeadline>
-          <HeroDescription>
-            <P>{data.hero_subtext}</P>
-          </HeroDescription>
-          <HeroCTA>
-            <a
-              target="_blank"
-              s
-              rel="noreferrer"
-              href={data.hero_button_destination.text}
-            >
-              {data.hero_cta_text}
-            </a>
-          </HeroCTA>
-        </HeroTextSection>
-      </HeroContainer>
+    <>
+      <Helmet bodyAttributes={{ class: "home-header" }} />
+
+      <HomePageContainer>
+        <HeroContainer>
+          <HeroImage>
+            <img alt="hero image" src={data.hero_background_image.url} />
+          </HeroImage>
+          <HeroTextSection>
+            <HeroHeadline>
+              <H1>{data.hero_headline}</H1>
+            </HeroHeadline>
+            <HeroDescription>
+              <P>{data.hero_subtext}</P>
+            </HeroDescription>
+            <HeroCTA>
+              <a
+                target="_blank"
+                s
+                rel="noreferrer"
+                href={data.hero_button_destination.text}
+              >
+                {data.hero_cta_text}
+              </a>
+            </HeroCTA>
+          </HeroTextSection>
+        </HeroContainer>
 
-      <FutureSection>
-        <FutureText>
-          <FutureSolarIcon></FutureSolarIcon>
-          <FutureHeader>
-            <H2>{data.section_title}</H2>
-          </FutureHeader>
-          <FutureDescription>
-            <P>{data.section_description}</P>
-          </FutureDescription>
+        <FutureSection>
+          <FutureText>
+            <FutureSolarIcon alt="Future of Solar Icon"></FutureSolarIcon>
+            <FutureHeader>
+              <H2>{data.section_title}</H2>
+            </FutureHeader>
+            <FutureDescription>
+              <P>{data.section_description}</P>
+            </FutureDescription>
 
-          <FutureCTA>
-            <a href={data.button_destination}>{data.button_text}</a>
-          </FutureCTA>
-        </FutureText>
-        <FutureImage></FutureImage>
-      </FutureSection>
-    </HomePageContainer>
+            <FutureCTA>
+              <a href={data.button_destination}>{data.button_text}</a>
+            </FutureCTA>
+          </FutureText>
+          <FutureImage></FutureImage>
+        </FutureSection>
+      </HomePageContainer>
+    </>
   )
 }
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -18,10 +18,10 @@ const LayoutBody = styled.div`
   }
 `
 
-const Layout = ({ children }) => {
+const Layout = ({ children, home }) => {
   return (
     <LayoutContainer>
-      <Header />
+      <Header home={home} />
       <LayoutBody>{children}</LayoutBody>
       <Footer />
     </LayoutContainer>

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -1,14 +1,15 @@
 import { graphql } from "gatsby"
 
 import React from "react"
+import Layout from "../components/layout"
 
 export default function About({ data }) {
     const aboutData = data.prismicAboutPage.data
 
     return (
-        <div>
+        <Layout>
             <h1>{aboutData.company_background_section_heading}</h1>
-        </div>
+        </Layout>
     )
 }
 

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,7 +7,7 @@ export default function Home({ data }) {
   const homepageData = data.prismicHomepage.data
 
   return (
-    <Layout>
+    <Layout home={true}>
       <Homepage data={homepageData} />
     </Layout>
   )

diff --git a/src/vectors/hamburger.svg b/src/vectors/hamburger.svg