Merge pull request #4 from hackmcgill/enhancement/88-implement-new-de…

…sign Enhancement/1 implement new design
hackmcgill · Nov 24, 2020 · dadde02 · dadde02
2 parents 6a7d0cf + c475abc
commit dadde02
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 250 deletions.
diff --git a/src/assets/images/designs/about.svg b/src/assets/images/designs/about.svg
diff --git a/src/assets/images/designs/cord.svg b/src/assets/images/designs/cord.svg
diff --git a/src/assets/images/designs/sponsor.svg b/src/assets/images/designs/sponsor.svg
diff --git a/src/components/Bg/BgStyles.jsx b/src/components/Bg/BgStyles.jsx
@@ -1,13 +1,12 @@
 import styled from "styled-components"
 import * as styleVars from "../variable"
-import BgImg from "../../assets/images/designs/bg.svg"
 
 export const BgStyles = styled.section`
   height: 100%;
   position: relative;
   margin-bottom: 60px;
   margin-top: 100px;
-  background: url(${BgImg});
+  background: ${styleVars.hackBlack5};
   background-size: cover;
   background-position: right 80px;
   background-repeat: no-repeat;

diff --git a/src/components/Hero/HeroStyles.jsx b/src/components/Hero/HeroStyles.jsx
@@ -2,6 +2,7 @@ import styled from "styled-components"
 import * as styleVars from "../variable"
 
 export const HeroStyles = styled.section`
+  margin-top: 100px;
   position: relative;
   padding: 0 2rem;
   margin-bottom: 400px;

diff --git a/src/components/Sponsor/Button.jsx b/src/components/Sponsor/Button.jsx
@@ -6,7 +6,7 @@ export const Button = styled.button`
   font-weight: 600;
   font-size: 14px;
   text-transform: none;
-  background-color: ${styleVars.colorHackRed};
+  background-color: ${styleVars.purple};
   color: white;
   border-radius: 3.75em;
   border: none;
@@ -20,8 +20,8 @@ export const Button = styled.button`
   //   width: 175px;
 
   &:hover {
-    background-color: #f56f65;
-    color: white;
+    background-color: ${styleVars.purpleLight};
+    color: ${styleVars.purple};
   }
 `
 

diff --git a/src/components/variable.jsx b/src/components/variable.jsx
@@ -4,6 +4,8 @@ export const colorHackRedMed = "#f56f65"
 export const colorHackRedLight = "#f89790"
 export const colorHackYellow = "#ffd081"
 export const colorHackTeal = "#48DEE2"
+export const purple = "#5C63AB"
+export const purpleLight = "#5C63AB19"
 export const hackBlack = "#202020"
 export const hackBlack80 = "#4d4d4d"
 export const hackBlack70 = "#636363"

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -30,11 +30,11 @@ const IndexPage = () => {
         scrollToSponsor={() => scrollTo(sponsorRef)}
         scrollToFaq={() => scrollTo(faqRef)}
       />
+      <Hero />
       <Bg>
-        <Hero />
         <About scrollRef={aboutRef} />
+        <Sponsor scrollRef={sponsorRef} />
       </Bg>
-      <Sponsor scrollRef={sponsorRef} />
       <FAQ scrollRef={faqRef} />
       <Logos />
       <Footer />