Configure hero page

client/src/app/components/primary-button/PrimaryButton.scss

@@ -2,9 +2,10 @@
 
 .primary-button {
 	border-color: transparent;
-	border-radius: 30px;
-	font-size: 24px;
+	border-radius: 50px;
+	font-size: 2em;
 	font-weight: 600;
+	padding: 15px 100px;
 	background: linear-gradient(
 		90deg,
 		rgba(109, 146, 218, 1) 0%,
@@ -14,7 +15,6 @@
 	background-position: 0% 50%;
 	color: $secondary-color;
 	max-width: 10em;
-	padding: 10px 25px;
 	position: relative;
 	z-index: 10;
 	transition: background-position 0.35s ease-out;

client/src/app/containers/header/Header.js

@@ -1,18 +1,43 @@
 import React from "react";
+import Image from "react-bootstrap/Image";
 
 import "./Header.scss";
+import PrimaryButton from "app/components/primary-button/PrimaryButton";
 
-function Header({ title, children }) {
-  return (
-    <header className="global-header">
-      <div className="header-image">
-        <div className="header-overlay">
-          <h1>{title}</h1>
-          {children}
-        </div>
-      </div>
-    </header>
-  );
+import LogoWhite from "assets/header-logo/logo-white.png";
+import LogoShadowBlue from "assets/header-logo/logo-shadow-blue.png";
+import LogoShadowGreen from "assets/header-logo/logo-shadow-green.png";
+
+function Header({ title }) {
+	return (
+		<header className="global-header">
+			<Logo />
+			<div className="header-items">
+				<h1>{title}</h1>
+				<PrimaryButton href="#newsletter" text="Get Involved" />
+			</div>
+		</header>
+	);
+}
+
+// Logo with blue and green shadows
+function Logo() {
+	return (
+		<div className="logo-wrapper">
+			<Image
+				src={LogoShadowGreen}
+				alt="Hack at UCI logo"
+				className="logo-shadow-green"
+			/>
+			<Image
+				src={LogoShadowBlue}
+				alt="Hack at UCI logo"
+				className="logo-shadow-blue"
+			/>
+
+			<Image src={LogoWhite} alt="Hack at UCI logo" className="logo-white" />
+		</div>
+	);
 }
 
 export default Header;

client/src/app/containers/header/Header.scss

@@ -1,32 +1,49 @@
-@import 'src/globals/hack-variables.scss';
+@import "src/globals/hack-variables.scss";
 
 .global-header {
-  background: $blue-gradient;
-  color: white;
-  height: 20rem;
-}
+	height: 750px;
 
-.header-image {
-  height: 100%;
-  background-image: url('~assets/hackshapes_header.png');
-  background-repeat: no-repeat;
-  background-size: 1920px auto;
-  // keep laptop near center of header
-  background-position: calc(50% - 400px + min(400px, 25vw)) 100%;
+	display: flex;
+	flex-direction: row;
+	gap: 100px;
+	align-items: center;
+	justify-content: center;
 }
 
-.header-overlay {
-  height: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.header-items {
+	h1 {
+		font-size: 6em !important;
+		margin-bottom: 45px;
+	}
 }
 
-@media (orientation: portrait) {
-  .header-overlay {
-    h1 {
-      font-size: 3rem !important;
-    }
-  }
+.logo-wrapper {
+	position: relative;
+
+	width: 350px;
+	height: 350px;
+
+	.logo-white {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%); // Perfect center
+	}
+	.logo-shadow-blue {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-53%, -52%); // Perfect center
+
+		mix-blend-mode: hard-light;
+	}
+
+	.logo-shadow-green {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-48.5%, -51%); // Perfect center
+
+		mix-blend-mode: overlay;
+	}
 }

client/src/app/views/home/Home.js

@@ -6,19 +6,13 @@ import { Header } from "app/containers";
 
 import HomeCards from "./HomeCards";
 import "./Home.scss";
-import PrimaryButton from "app/components/primary-button/PrimaryButton";
 
 function Home() {
 	return (
 		<div className="Home">
-			<Header title="Hack at UCI">
-				<a className="involved-button" href="#newsletter">
-					Get Involved
-				</a>
-			</Header>
+			<Header title="Hack at UCI" />
 
 			<div className="home-content">
-				<PrimaryButton href="" text="Get involved"/>
 				<section className="container home-about">
 					<h2>About Us</h2>
 					<p>

client/src/app/views/home/Home.scss

@@ -1,36 +1,18 @@
-@import 'src/globals/hack-variables.scss';
+@import "src/globals/hack-variables.scss";
 
 html {
-  scroll-behavior: smooth;
-}
-
-.involved-button {
-  border-color: transparent;
-  border-radius: 30px;
-  font-size: 24px;
-  font-weight: 600;
-  padding: 10px 25px;
-  background-color: $red;
-  color: white;
-  max-width: 10em;
-  position: relative;
-  z-index: 10;
-
-  &:hover {
-    color: white;
-    text-decoration: none;
-  }
+	scroll-behavior: smooth;
 }
 
 .home-content {
-  p {
-    font-size: 26px;
-  }
+	p {
+		font-size: 26px;
+	}
 }
 
 .home-cards {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
 }