#44 and #26 adding colors/styling nav and hero

Scout-NU · Apr 12, 2021 · 339543d · 339543d
1 parent acb38db
commit 339543d
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 60 deletions.
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -7,49 +7,72 @@ 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`
   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.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
@@ -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
@@ -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
@@ -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/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