2024 Homepage Revamp from Initial Launch (#264)

* Add planet * Revamp Title and FAQs * Fix floating title animation on medium screens (500 to 900px) * Removes padding at the bottom of last paragraph of About section * Reduce size of planet * Fix border radius at bottom of FAQs * Reduce padding between question and answer in FAQs * Add date and tagline and fix animation placement
WICS-UCI · May 23, 2024 · 40a8fb8 · 40a8fb8
1 parent a6d913a
commit 40a8fb8
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 37 deletions.
diff --git a/public/assets/images/planet-3.svg b/public/assets/images/planet-3.svg
diff --git a/src/app/components/faqs/FAQs.scss b/src/app/components/faqs/FAQs.scss
@@ -1,4 +1,4 @@
-// @import "../../../globals/vh-styles.scss";
+@import "src/globals/vh-styles.scss";
 
 #faq-accordion-wrapper {
 	width: 80vw;
@@ -27,11 +27,24 @@
 
 .accordion {
 	text-align: left;
-	--bs-accordion-color: #322660;
-	--bs-accordion-active-color: #322660;
-	--bs-accordion-btn-color: #322660;
+	--bs-accordion-color: $darkPurple;
+	--bs-accordion-active-color: $darkPurple;
+	--bs-accordion-btn-color: $darkPurple;
 	--bs-accordion-bg: none;
 	--bs-accordion-border-color: none;
+	--bs-accordion-border-radius: none;
 	--bs-accordion-active-bg: none;
 	--bs-accordion-btn-focus-box-shadow: none;
 }
+
+.accordion-body {
+	padding-top: 0px;
+}
+
+.accordion-item {
+	border-bottom: $darkPurple 1px solid;
+}
+
+.accordion .accordion-button {
+	box-shadow: none;
+}
diff --git a/src/app/views/home/Home.jsx b/src/app/views/home/Home.jsx
@@ -2,7 +2,7 @@ import FAQs from "src/app/components/faqs/FAQs";
 import Sponsors from "src/app/components/sponsors/Sponsors";
 import Partners from "src/app/components/partners/Partners";
 
-import vhTitle from "/assets/images/titles/vh-title-launch.svg";
+import vh_title from "/assets/images/titles/venushacks.svg";
 import about_title from "/assets/images/titles/vh-about.svg";
 import faq_title from "/assets/images/titles/vh-faq.svg";
 
@@ -16,25 +16,25 @@ const Home = () => {
 		<div className="Home">
 			{/* HERO **********************/}
 			<section id="hero">
-				<div id="astronaut-animation">
-					{/* These assets are a background of a div instead of imgs to prevent
-					them from being able to be saved to camera roll on iOS */}
-					<div id="boba" />
-					<div id="astronaut" />
-					<div id="laptop" />
-					<div id="shiba-inu" />
-				</div>
-
 				<div id="hero-right">
 					<img
-						src={vhTitle}
+						src={vh_title}
 						alt="VenusHacks Title Logo"
 						id="venushacks-title"
 					/>
 					<h4 id="date">{VH_DATE}</h4>
 					<p id="tagline">UC Irvine&apos;s largest women-centric hackathon</p>
 				</div>
+				<div id="astronaut-animation">
+					{/* These assets are a background of a div instead of imgs to prevent
+					them from being able to be saved to camera roll on iOS */}
+					<div id="boba" />
+					<div id="astronaut" />
+					<div id="laptop" />
+					<div id="shiba-inu" />
+				</div>
 			</section>
+			<div id="planet" />
 
 			{/* ABOUT **********************/}
 			<section id="about">
@@ -66,7 +66,7 @@ const Home = () => {
 						providing an inclusive community where students can receive the
 						support to grow and express their creativity in computing.
 					</p>
-					<p>
+					<p className="mb-0">
 						This year, VenusHacks will take place fully in-person in Spring
 						2024! Join us as we welcome high school (18+), undergraduate, and
 						graduate students to participate in our 36-hour (non-overnight)

diff --git a/src/app/views/home/Home.scss b/src/app/views/home/Home.scss
@@ -4,7 +4,7 @@ $boba: "/assets/images/vh-boba.png";
 $astronaut: "/assets/images/vh-astronaut.png";
 $laptop: "/assets/images/vh-laptop.png";
 $shiba: "/assets/images/VH_shiba_inu.png";
-$planet: "/assets/images/vh-planet.png";
+$planet: "/assets/images/planet-3.svg";
 $stars_background: "/assets/images/stars.svg";
 
 body {
@@ -19,7 +19,6 @@ body {
 	min-height: 100vh;
 
 	section {
-		min-height: 100vh;
 		.section-title {
 			max-width: 100vw;
 			height: 60px;
@@ -47,21 +46,34 @@ body {
 
 	#hero {
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		margin: 0 50px;
+		margin: 10vw 15vw;
 		flex-direction: column;
+		background-color: #a8acf977;
+		border-radius: 50px;
+
+		@media screen and (max-width: $break-medium) {
+			margin: 10vw 5vw;
+		}
 
 		#astronaut-animation {
 			display: flex;
 			width: 45%;
 			justify-content: space-between;
 			max-width: 600px;
 			margin-top: 150px;
+			transform: translateY(-700px);
 
 			@media screen and (max-width: $break-medium) {
 				width: 100%;
 				max-width: 325px;
+				transform: translateY(-600px);
+			}
+
+			@media screen and (max-width: $break-small) {
+				width: 100%;
+				max-width: 325px;
+				transform: translateY(-400px);
 			}
 
 			@keyframes floatBoba {
@@ -125,8 +137,8 @@ body {
 				animation: floatAstronaut 4s ease-in-out infinite;
 
 				@media screen and (max-width: $break-small) {
-					width: 40vw;
-					height: 40vw;
+					width: 25vw;
+					height: 25vw;
 				}
 			}
 
@@ -169,8 +181,8 @@ body {
 		} // END #astronaut-animation
 
 		#hero-right {
-			width: 48%;
-			margin-bottom: 20px;
+			// width: 48%;
+			// margin-bottom: 20px;
 
 			@media screen and (max-width: $break-medium) {
 				width: initial;
@@ -188,23 +200,32 @@ body {
 			}
 
 			#date {
-				margin-top: 15px;
+				transform: translateY(-200px);
 				color: $darkPurple;
 				font-family: var(--font-comfortaa);
 				font-weight: 700;
 				@media screen and (max-width: $break-medium) {
 					font-size: 20px;
 				}
+
+				@media screen and (max-width: $break-small) {
+					transform: translateY(-20px);
+				}
 			}
 
 			#tagline {
+				transform: translateY(-190px);
 				font-family: "Varela", sans-serif;
 				font-size: 22px;
 				color: $darkPurple;
 				margin-bottom: 0.5rem;
 				@media screen and (max-width: $break-medium) {
 					font-size: 18px;
 				}
+
+				@media screen and (max-width: $break-small) {
+					transform: translateY(-10px);
+				}
 			}
 
 			#apps {
@@ -248,20 +269,18 @@ body {
 				transform: scale(1.08);
 			}
 		} // END #hero-right
-		#planet {
-			width: 50vw;
-			height: 50vw;
-			max-height: 600px;
-			max-width: 600px;
-			background: url($planet);
-			background-size: contain;
-			background-repeat: no-repeat;
-			display: block;
-			margin: auto;
-			margin-top: 5%;
-		}
 	} // END HERO
 
+	#planet {
+		width: 75vw;
+		height: 75vw;
+		background: url($planet);
+		background-size: contain;
+		background-repeat: no-repeat;
+		margin: auto;
+		margin-top: -50%;
+	}
+
 	#about {
 		display: flex;
 		justify-content: center;