From e7926ed7aff753e330824ec376abf5c64ae6c66d Mon Sep 17 00:00:00 2001
From: samgildea <gildea.s@husky.neu.edu>
Date: Fri, 9 Apr 2021 13:19:16 -0400
Subject: [PATCH 1/5] #44 updating hero and nav styling

---
 src/components/header/header-styles.js  |  7 ++++---
 src/components/homepage/index-styles.js | 19 ++++++++++++++++++-
 src/components/homepage/index.js        |  4 ++++
 src/style/colors.js                     |  2 ++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
index 816aa08..392c627 100644
--- a/src/components/header/header-styles.js
+++ b/src/components/header/header-styles.js
@@ -4,15 +4,16 @@ 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);
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
+  color: ${colors.white900};
+
 `
 
 export const Logo = styled.div`
@@ -44,7 +45,7 @@ export const NavLink = styled.div`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
-  color: ${colors.black900};
+  color: ${colors.white900};
 `
 
 export const MobileIcon = styled.div`
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
index ba375dc..9a4615d 100644
--- 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
index f4f774a..c96a7a4 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -14,12 +14,16 @@ import {
   FutureCTA,
   FutureImage,
   HomePageContainer,
+  HeroImage
 } from "./index-styles"
 
 export default function HomePage({ data }) {
   return (
     <HomePageContainer>
       <HeroContainer>
+        <HeroImage>
+          <img src={data.hero_background_image.url} />
+        </HeroImage>
         <HeroTextSection>
           <HeroHeadline>
             <H1>{data.hero_headline}</H1>
diff --git a/src/style/colors.js b/src/style/colors.js
index 6b48546..9ae52f5 100644
--- a/src/style/colors.js
+++ b/src/style/colors.js
@@ -6,6 +6,8 @@ const colors = {
 
   black900: "#000000",
   white900: "#FFFFFF",
+
+  orange900: '#F27A28'
 }
 
 export default colors

From 9de5c4795ac4afc18e02681e5a9778ed13dfd410 Mon Sep 17 00:00:00 2001
From: samgildea <gildea.s@husky.neu.edu>
Date: Fri, 9 Apr 2021 13:28:39 -0400
Subject: [PATCH 2/5] #44 changing hamburger color

---
 src/components/header/header-styles.js | 1 +
 src/components/header/header.jsx       | 2 +-
 src/vectors/hamburger.svg              | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
index 392c627..50dad24 100644
--- a/src/components/header/header-styles.js
+++ b/src/components/header/header-styles.js
@@ -49,6 +49,7 @@ export const NavLink = styled.div`
 `
 
 export const MobileIcon = styled.div`
+
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: none;
   }
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 759811c..27278ad 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -28,7 +28,7 @@ export const Header = () => {
       <Logo>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
-        <Hamburger />
+        <Hamburger className="hamburger" />
       </MobileIcon>
       <NavLinks>
         <NavLink href="/about">
diff --git a/src/vectors/hamburger.svg b/src/vectors/hamburger.svg
index 365600c..b538294 100644
--- a/src/vectors/hamburger.svg
+++ b/src/vectors/hamburger.svg
@@ -1,5 +1,5 @@
 <svg width="27" height="17" viewBox="0 0 27 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="27" height="3" fill="black"/>
-<rect y="7" width="27" height="3" fill="black"/>
-<rect y="14" width="27" height="3" fill="black"/>
+<rect width="27" height="3" fill="white"/>
+<rect y="7" width="27" height="3" fill="white"/>
+<rect y="14" width="27" height="3" fill="white"/>
 </svg>

From acb38db297f9be41098bd287e023f31e545a7e2e Mon Sep 17 00:00:00 2001
From: samgildea <gildea.s@husky.neu.edu>
Date: Fri, 9 Apr 2021 20:13:16 -0400
Subject: [PATCH 3/5] #44 adding react helmet

---
 package-lock.json                | 21 +++++++++++++++++++++
 package.json                     |  1 +
 src/components/homepage/index.js |  5 +++++
 3 files changed, 27 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 96d0642..554ae5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12857,6 +12857,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
       "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -12894,6 +12910,11 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
diff --git a/package.json b/package.json
index 4f0b8fb..5405b7d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "node-sass": "^5.0.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/homepage/index.js b/src/components/homepage/index.js
index c96a7a4..0607f02 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -17,9 +17,14 @@ import {
   HeroImage
 } from "./index-styles"
 
+import { Helmet } from "react-helmet"
+
+
 export default function HomePage({ data }) {
   return (
     <HomePageContainer>
+      <Helmet bodyAttributes={{ class: 'portfolio-page' }} />
+
       <HeroContainer>
         <HeroImage>
           <img src={data.hero_background_image.url} />

From 339543d440199259acb334f1ad74cb4da6d54af5 Mon Sep 17 00:00:00 2001
From: samgildea <gildea.s@husky.neu.edu>
Date: Mon, 12 Apr 2021 17:39:50 -0400
Subject: [PATCH 4/5] #44 and #26 adding colors/styling nav and hero

---
 src/components/header/header-styles.js | 31 +++++++--
 src/components/header/header.jsx       | 17 +++--
 src/components/homepage/index.js       | 87 +++++++++++++-------------
 src/components/layout.js               |  4 +-
 src/pages/about.js                     |  5 +-
 src/pages/index.js                     |  2 +-
 src/style/colors.js                    |  9 ++-
 7 files changed, 95 insertions(+), 60 deletions(-)

diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
index 50dad24..1f25c03 100644
--- a/src/components/header/header-styles.js
+++ b/src/components/header/header-styles.js
@@ -7,13 +7,18 @@ export const NavContainer = styled.div`
   padding-bottom: 32px;
   &.colorChange {
     background-color: rgb(0, 0, 0, 0.55);
+    color: ${colors.white900};
+
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
-  color: ${colors.white900};
+  color: ${colors.black900};
 
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const Logo = styled.div`
@@ -21,6 +26,7 @@ export const Logo = styled.div`
   font-size: 24px;
   padding-top: 32px;
   padding-left: 80px;
+  color: ${colors.black900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     text-align: center;
@@ -28,6 +34,10 @@ export const Logo = styled.div`
     padding-top: 24px;
     padding-left: 0px;
   }
+
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const NavLinks = styled.div`
@@ -35,21 +45,34 @@ export const NavLinks = styled.div`
   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.white900};
+
+
+  color: ${colors.black900};
+
+  &.home-header {
+    color: ${colors.white900};
+  }
+
 `
 
 export const MobileIcon = styled.div`
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: none;
   }
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 27278ad..c12f0df 100644
--- 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,20 @@ 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 className={home === true ? "home-header" : ""}>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
         <Hamburger className="hamburger" />
       </MobileIcon>
-      <NavLinks>
+      <NavLinks className={home === true ? "home-header" : ""}>
         <NavLink href="/about">
           <NavText>ABOUT</NavText>
         </NavLink>
@@ -40,7 +45,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.js b/src/components/homepage/index.js
index 0607f02..2fe969b 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -14,57 +14,58 @@ import {
   FutureCTA,
   FutureImage,
   HomePageContainer,
-  HeroImage
+  HeroImage,
 } from "./index-styles"
 
 import { Helmet } from "react-helmet"
 
-
 export default function HomePage({ data }) {
   return (
-    <HomePageContainer>
-      <Helmet bodyAttributes={{ class: 'portfolio-page' }} />
+    <>
+      <Helmet bodyAttributes={{ class: "home-header" }} />
 
-      <HeroContainer>
-        <HeroImage>
-          <img 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>
+      <HomePageContainer>
+        <HeroContainer>
+          <HeroImage>
+            <img 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></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
index ee0c856..0d2e5b4 100644
--- 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
index f500a48..17afb0f 100644
--- 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
index f9d0f33..220a5e0 100644
--- 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/style/colors.js b/src/style/colors.js
index 9ae52f5..3bcf56d 100644
--- a/src/style/colors.js
+++ b/src/style/colors.js
@@ -4,10 +4,15 @@ const colors = {
   gray_icon: "#A4A4A4",
   gray_CTA: "#646464",
 
-  black900: "#000000",
+  black900: "#253253",
   white900: "#FFFFFF",
 
-  orange900: '#F27A28'
+  orange900: "#F27A28",
+  blue900: "#245373",
+  lightblue900: "#6480A5",
+  lighterblue900: "#6EA8C0",
+  softblue900: "#ECF3F7",
+  gray900: "#585858",
 }
 
 export default colors

From 7720c637a619685dacdaebe85bcbae03717188e4 Mon Sep 17 00:00:00 2001
From: samgildea <gildea.s@husky.neu.edu>
Date: Wed, 14 Apr 2021 21:04:18 -0400
Subject: [PATCH 5/5] #44 #26 adding alts for images and removing warnings

---
 src/components/header/header.jsx | 5 ++---
 src/components/homepage/index.js | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index c12f0df..a740d58 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -22,15 +22,14 @@ export const Header = ({ home }) => {
   }
   typeof window !== "undefined" &&
     window.addEventListener("scroll", changeNavbarColor)
-  //
   return (
     <NavContainer
       className={
         (colorChange ? "navbar colorChange" : "navbar") ||
-        (home == true ? "home-header" : "")
+        (home === true ? "home-header" : "")
       }
     >
-      <Logo className={home === true ? "home-header" : ""}>PowerHouse</Logo>
+      <Logo alt="PowerHouse Logo" className={home === true ? "home-header" : ""}>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
         <Hamburger className="hamburger" />
diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
index 2fe969b..fb7ed1c 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -27,7 +27,7 @@ export default function HomePage({ data }) {
       <HomePageContainer>
         <HeroContainer>
           <HeroImage>
-            <img src={data.hero_background_image.url} />
+            <img alt="hero image" src={data.hero_background_image.url} />
           </HeroImage>
           <HeroTextSection>
             <HeroHeadline>
@@ -51,7 +51,7 @@ export default function HomePage({ data }) {
 
         <FutureSection>
           <FutureText>
-            <FutureSolarIcon></FutureSolarIcon>
+            <FutureSolarIcon alt="Future of Solar Icon"></FutureSolarIcon>
             <FutureHeader>
               <H2>{data.section_title}</H2>
             </FutureHeader>