add mid way check in form

Author: waalbert

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 Speakers from "src/app/components/speakers/speakers";
-import { Footer } from "src/app/components";
+import { Footer, VenusButton } from "src/app/components";
 
 import vh_title from "/assets/images/titles/venushacks.svg";
 import about_title from "/assets/images/titles/vh-about.svg";
@@ -27,6 +27,10 @@ const Home = () => {
 					/>
 					<h4 id="date">{VH_DATE}</h4>
 					<p id="tagline">UC Irvine&apos;s largest women-centric hackathon</p>
+					<VenusButton
+						url="https://docs.google.com/forms/d/e/1FAIpQLSdObzMrHpTjjcc5DhdXmuX8v485aDhsCqBRxCV3R66316htcg/viewform?usp=sharing"
+						text="Mid-Way Check In"
+					/>
 				</div>
 				<div id="astronaut-animation">
 					{/* These assets are a background of a div instead of imgs to prevent

src/app/views/home/Home.scss

@@ -69,18 +69,18 @@ body {
 			width: 45%;
 			justify-content: space-between;
 			max-width: 600px;
-			transform: translateY(-550px);
+			transform: translateY(-600px);
 
 			@media screen and (max-width: $break-medium) {
 				width: 100%;
 				max-width: 325px;
-				transform: translateY(-400px);
+				transform: translateY(-475px);
 			}
 
 			@media screen and (max-width: $break-small) {
 				width: 100%;
 				max-width: 325px;
-				transform: translateY(-250px);
+				transform: translateY(-325px);
 			}
 
 			@keyframes floatBoba {
@@ -257,6 +257,7 @@ body {
 				border-radius: 50px;
 				border: none;
 				text-decoration: none;
+				transform: translateY(-190px);
 
 				@media screen and (max-width: $break-medium) {
 					font-size: 16px;
@@ -265,12 +266,17 @@ body {
 				@media screen and (max-width: $break-small) {
 					margin-right: 2px;
 					margin-left: 2px;
+					transform: translateY(-20px);
 				}
 			}
 
 			.venus-btn:hover {
 				transition: all 0.2s ease;
-				transform: scale(1.08);
+				transform: translateY(-190px) scale(1.08);
+
+				@media screen and (max-width: $break-small) {
+					transform: translateY(-20px) scale(1.08);
+				}
 			}
 		} // END #hero-right
 	} // END HERO