Merge branch 'feature/paper-scroll-design' of https://github.com/Hack…

…AtUCI/ZotHacks-Site into feature/paper-scroll-design
HackAtUCI · Oct 14, 2022 · 0923466 · 0923466
2 parents f2ed31a + 490c476
commit 0923466
Show file tree

Hide file tree

Showing 18 changed files with 117 additions and 113 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,7 @@ import { Route, Routes, Navigate } from "react-router-dom";
 import "globals/bootstrap.scss";
 import "./App.scss";
 
-import { NavigationBar, Footer } from "app/components";
+import { NavigationBar } from "app/components";
 import { Apply, Home, Schedule, StarterPacks } from "app/views";
 
 function App() {
@@ -18,7 +18,6 @@ function App() {
 				{/* redirect to Home if route not found */}
 				<Route path="*" element={<Navigate to="/" />} />
 			</Routes>
-			<Footer />
 		</div>
 	);
 }

diff --git a/src/App.scss b/src/App.scss
@@ -8,7 +8,7 @@ body {
   text-align: center;
   min-height: 100vh;
   width: 100vw;
-  background-color: #ffffff;
+  background: linear-gradient($redBrownBackground 0%, $orangeBrownBackground 50%, $redBrownBackground 100%);
   color: $fontColor;
   overflow-y: auto;
 

diff --git a/src/app/components/footer/Footer.scss b/src/app/components/footer/Footer.scss
@@ -1,7 +1,6 @@
 @import "globals/zothacks-styles.scss";
 
 .footer {
-  background: $redBrownBackground;
   padding-bottom: 60px;
 }
 

diff --git a/src/app/views/home/Home.js b/src/app/views/home/Home.js
@@ -2,7 +2,7 @@ import React from "react";
 import Fade from "react-reveal/Fade";
 import ReactTooltip from "react-tooltip";
 
-import { Blinkers } from "app/components";
+import { Blinkers, Footer } from "app/components";
 
 import Landing from "./sections/Landing";
 import Intro from "./sections/Intro";
@@ -29,6 +29,7 @@ function Home() {
 				<Sponsors />
 			</Fade>
 			<Faq />
+			<Footer />
 		</div>
 	);
 }

diff --git a/src/app/views/home/Home.scss b/src/app/views/home/Home.scss
@@ -1,6 +1,8 @@
 @import "globals/zothacks-styles.scss";
+@import "globals/zothacks-helper.scss";
 
 .home {
+	@include zothacks-background;
 	text-align: center;
 	min-height: 100vh;
 

diff --git a/src/app/views/home/sections/Intro.scss b/src/app/views/home/sections/Intro.scss
@@ -25,11 +25,14 @@
 		}
 	}
 
-	@media only screen and (max-width: $break-medium) {
-		.intro .card{
+	@media only screen and (max-width: 500px) {
+		.intro .card p {
 			width: auto;
-			height: auto;
-
+		}
+	}
+	@media only screen and (max-width: 900px) {
+		.intro .card{
+			width: 75vw;
 		}
 		.intro:before{
 			content: "";
@@ -40,16 +43,16 @@
 			width: 90vh;
 
 			position: absolute;
-			background-image: url('../../../../assets/images/scroll_light_medium.png');
+			background-image: url('../../../../assets/images/scroll_NEW_light.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			transform: rotate(90deg) translate(7.5vw, 5vw);
+			transform: rotate(90deg) translate(7.5vw, 1vw);
 		}
 	}
-	@media only screen and (min-width: $break-medium) {
+	@media only screen and (min-width: 901px) {
 		.intro .card {
-			background-image: url('../../../../assets/images/scroll_light_medium.png');
+			background-image: url('../../../../assets/images/scroll_NEW_light.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;

diff --git a/src/app/views/home/sections/Landing.js b/src/app/views/home/sections/Landing.js
@@ -3,23 +3,27 @@ import React from "react";
 import Fade from "react-reveal/Fade";
 
 import "./Landing.scss";
+import jeepBody from "assets/images/jeep_body.png";
+import jeepWheels from "assets/images/jeep_wheels.png"
 
 const APPLICATION_URL =
 	"https://docs.google.com/forms/d/e/1FAIpQLSdPhGwP7KUTcIa6rWsPlyCswlykZwR-dXCJo78Gxahy0Q3sTA/viewform";
 
 function Landing() {
 	return (
-		<section className="landing">
-			<div className="intro-wrapper">
-				<div className="title-info">
-					<Fade duration={1000} left>
-						<div className="hero-wrapper">
-							<h1 className="glow">ZotHacks</h1>
-							<span className="h3">November 20-21, 2021</span>
-						</div>
-					</Fade>
+		<section className="container landing">
+			<Fade duration={1000} left>
+				<div className="jeep-wrapper">
+					<img src={jeepBody} alt="Jeep's Body" />
+					<img src={jeepWheels} alt="Jeep's Wheels" />
 				</div>
-			</div>
+			</Fade>
+			<Fade duration={1000} right>
+				<div className="landing-title">
+					<h1 className="glow">ZotHacks</h1>
+					<span className="h3">November 20-21, 2021</span>
+				</div>
+			</Fade>
 		</section>
 	);
 }

diff --git a/src/app/views/home/sections/Landing.scss b/src/app/views/home/sections/Landing.scss
@@ -1,93 +1,40 @@
+@use "globals/bootstrap";
 @import "globals/zothacks-styles.scss";
 
 .home {
 	.landing {
 		height: 100vh;
-		position: relative;
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column-reverse;
 		align-items: center;
-		flex-direction: column;
-		text-align: left;
-		color: white;
-		box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
-		background: linear-gradient(
-			to right,
-			$lightPurpleBackground,
-			$darkPurpleBackground
-		);
+		justify-content: center;
 
-		.intro-wrapper {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: calc(100% - 320px);
+		@include bootstrap.media-breakpoint-up(lg) {
+			flex-direction: row;
 		}
 
-		.schedule-nav {
-			position: absolute;
-			top: 0;
-			right: 0;
-			display: flex;
-			justify-content: flex-end;
-
-			a {
-				margin-right: 0 !important;
-				text-decoration: none;
-				display: flex;
-				align-items: center;
+		text-align: center;
+		color: white;
+		box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
 
-				h5 {
-					margin-bottom: 0;
-					margin-left: 30px;
-				}
-			}
+		h1 {
+			@include bootstrap.font-size(5rem);
 		}
 
-		.schedule-button {
-			margin: 2em;
-			box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+		.landing-title {
+			padding: 2rem;
 		}
 
-		.title-info {
-			display: flex;
-			flex-direction: row;
-			margin-top: 15rem;
-
-			@media screen and (max-width: $break-medium) {
-				flex-direction: column-reverse;
-				align-items: center;
-				text-align: center;
-				justify-content: center;
-				margin-top: 20rem;
-
-				h1 {
-					font-size: 60px;
-				}
-			}
-
-			.hero-wrapper {
-				display: flex;
-				flex-direction: column;
-				justify-content: flex-start;
-				z-index: 3;
-			}
-
-			@media screen and (max-width: $break-small) {
-				.title-info {
-					width: 100vw;
-				}
-			}
-
-			div {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
+		.jeep-wrapper {
+			img {
+				width: min(100%, calc(30rem + 10vw));
+				height: auto;
 			}
 
-			h1 {
-				margin-bottom: 0.1em !important;
+			:first-child {
+				position: absolute;
+				top: 20px;
+				animation: wobble 1.5s forwards, bounce 1s 1.5s infinite;
 			}
 		}
 	}

diff --git a/src/app/views/home/sections/Mentors.scss b/src/app/views/home/sections/Mentors.scss
@@ -12,6 +12,7 @@
 			width: 1200px;
 			height: 600px;
 			padding: 80px;
+			align-items: center;
 		}
 
 		& > h2 {
@@ -25,7 +26,7 @@
 			justify-content: space-between;
 			align-items: center;
 
-			@media screen and (max-width: $break-medium) {
+			@media screen and (max-width: 900px) {
 				flex-direction: column;
 				align-items: center;
 			}
@@ -35,7 +36,7 @@
 				height: 18vw;
 				border-radius: 1rem;
 
-				@media screen and (max-width: $break-medium) {
+				@media screen and (max-width: 900px) {
 					width: 10rem;
 					height: 10rem;
 					margin-right: 0;
@@ -53,7 +54,7 @@
 					text-align: left;
 				}
 
-				@media screen and (max-width: $break-medium) {
+				@media screen and (max-width: 900px) {
 					margin: 2rem 0 1rem 0;
 					text-align: center;
 					align-items: center;
@@ -64,10 +65,13 @@
 			}
 		}
 	}
-	@media only screen and (max-width: $break-medium) {
+	@media only screen and (max-width: 900px) {
 		.mentors .card{
-			width: auto;
-			height: auto;
+			width: 50vw;
+
+			p, a {
+				text-align: center;
+			}
 		}
 		.mentors:before{
 			content: "";
@@ -78,20 +82,33 @@
 			width: 90vh;
 
 			position: absolute;
-			background-image: url('../../../../assets/images/scroll_dark_wide.png');
+			background-image: url('../../../../assets/images/scroll_NEW_dark.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			transform: rotate(90deg) translate(7.5vw, 5vw);
+			transform: rotate(90deg) translate(7.5vw, 1vw);
 		}
 	}
-	@media only screen and (min-width: $break-medium) {
+	@media only screen and (min-width: 901px) {
 		.mentors .card {
-			background-image: url('../../../../assets/images/scroll_dark_wide.png');
+			background-image: url('../../../../assets/images/scroll_NEW_dark.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			padding: 150px;
+			padding: 90px 150px 150px 150px;
+		}
+	}
+	@media only screen and (min-width: 901px) and (max-width: $break-medium) {
+		.mentor-information {
+			align-items: start;
+		}
+
+		.mentors .card {
+			width: 90vw;
+
+			p {
+				text-align: left;
+			}
 		}
 	}
 }
diff --git a/src/app/views/schedule/Schedule.js b/src/app/views/schedule/Schedule.js
@@ -1,6 +1,8 @@
 import React from "react"
 import "./Schedule.scss"
 
+import { Footer } from "app/components"
+
 import { scheduleData } from "../../../assets/data/schedule-data"
 import Countdown from "react-countdown"
 import pixels from "../../../assets/images/pixels.svg"
@@ -61,6 +63,7 @@ function Schedule() {
           )
         })}
       </section>
+      <Footer />
     </div>
   )
 }

diff --git a/src/app/views/schedule/Schedule.scss b/src/app/views/schedule/Schedule.scss
@@ -1,10 +1,11 @@
 @import "globals/zothacks-styles.scss";
+@import "globals/zothacks-helper.scss";
 
 .Schedule {
+  @include zothacks-background;
   text-align: center;
   min-height: 100vh;
   min-width: 100vw;
-  background: linear-gradient(270deg, #191970 0%, #a23fd1 100%);
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/app/views/starter-packs/StarterPacks.js b/src/app/views/starter-packs/StarterPacks.js
@@ -1,6 +1,8 @@
 import React from "react"
 import "./StarterPacks.scss"
 
+import { Footer } from "app/components"
+
 import PinkStar from "../../../assets/images/pinkStar.svg";
 import BlueStar from "../../../assets/images/blueStar.svg";
 import ExternalLink from "../../containers/external-link/ExternalLink";
@@ -136,6 +138,7 @@ function StarterPacks() {
           </div>
 
       </section>
+      <Footer />
     </div>
   )
 }