feat: setup mentor links (#108)

designatuci · Apr 19, 2024 · 8abef22 · 8abef22
1 parent 9907fb9
commit 8abef22
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
@@ -13,9 +13,7 @@ const Splash = memo(() => {
 			<SplashLogo />
 
 			<div className={clsx(cn.info, "wait")}>
-				<div className={cn.time}>
-					May 17th 5:00 PM - May 19th 6:00 PM
-				</div>
+				<div className={cn.time}>May 17th - May 19th</div>
 				<div className={cn.wrapper}>
 					<div className={cn.border}>
 						<a
@@ -27,6 +25,26 @@ const Splash = memo(() => {
 							Apply as Designer
 						</a>
 					</div>
+					<div className={cn.border}>
+						<a
+							className={cn.app}
+							target="_blank"
+							rel="noreferrer noopener"
+							href="https://forms.gle/bPGtCSx8VfZoGXjW6"
+						>
+							Apply as Mentor
+						</a>
+					</div>
+					{/* <div className={cn.border}>
+						<a
+							className={cn.app}
+							target="_blank"
+							rel="noreferrer noopener"
+							href=""
+						>
+							Apply as Volunteer
+						</a>
+					</div> */}
 				</div>
 			</div>
 		</div>

diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
@@ -42,29 +42,39 @@
 		text-align: center;
 		position: absolute;
 		place-self: center;
-		bottom: 15%;
+		bottom: 5%;
 		z-index: 110;
 
+		@media screen and (min-width: 851px) {
+			bottom: 15%;
+		}
+
 		.time {
 			font-size: min(7vw, 40px);
 			grid-column: 1/3;
 			font-family: "Gluten", cursive;
 			font-weight: 600;
-			margin: 0 2rem 24px;
+			margin: 0 2rem 1rem;
 		}
 
 		.wrapper {
 			display: grid;
-			grid-template-columns: 1fr;
-			column-gap: 40px;
+			grid-template-columns: repeat(
+				2,
+				1fr
+			); // TODO: Turn into 3 columns when volunteer form is ready
+			column-gap: 20px;
 			row-gap: 10px;
 			max-width: 800px;
 			margin: 0 auto;
+			width: fit-content;
+
+			@media screen and (max-width: 850px) {
+				grid-template-columns: repeat(1, 1fr);
 
-			@media screen and (max-width: 800px) {
-				grid-template-columns: 1fr;
 				.border {
 					padding: 4px !important;
+					min-width: 100%;
 				}
 				.app {
 					border-radius: 16px !important;
@@ -121,7 +131,6 @@
 
 .decoration {
 	position: absolute;
-	pointer-events: none;
 
 	max-width: 30%;