From 69dd57e61c2d44f7c50a5c6dc9c123fc64efe7e7 Mon Sep 17 00:00:00 2001
From: Ryan Yang <ryanqyang@gmail.com>
Date: Sun, 7 Apr 2024 15:00:24 -0700
Subject: [PATCH] putting in some placeholders

---
 public/index.html                             |  2 +
 .../components/SectionNavigation/index.jsx    |  4 +-
 .../components/Splash/Splash.jsx              | 27 +++++++
 .../components/Splash/Splash.module.scss      | 72 ++++++++++++++++++-
 4 files changed, 102 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8859c382..188b9d51 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,6 +38,8 @@
 
 		<title>Design at UCI</title>
 
+		<link href="https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&display=swap" rel="stylesheet">
+
 		<link
 			rel="preload"
 			href="/static/font/bold.woff2"
diff --git a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx
index b92d380e..294354eb 100644
--- a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx
@@ -45,7 +45,7 @@ const SectionNavigation = () => {
 			</div>
 
 			<div className={cn.linkButtons}>
-				{currentTime >
+				{/* {currentTime >
 					new Date(
 						"Feb 24 2023 19:00:00 GMT-0800 (Pacific Standard Time)",
 					).getTime() && (
@@ -71,7 +71,7 @@ const SectionNavigation = () => {
 					href="https://forms.gle/hJmEGwbSc6mhqw9QA"
 				>
 					<p>Submission Form</p>
-				</a>
+				</a> */}
 			</div>
 		</div>
 	);
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
index e4c54ee9..d9cfd6a4 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
@@ -19,6 +19,33 @@ const Splash = memo(() => {
 
 	return (
 		<div className={cn.container}>
+			<div className={cn.info}>
+				<div className={cn.time}>
+					May 17th 6:30 PM - May 19th 4:30 PM
+				</div>
+				<div className={cn.wrapper}>
+					<div className={cn.border}>
+						<a
+							className={cn.app}
+							target="_blank"
+							rel="noreferrer noopener"
+							href="https://docs.google.com/forms/d/1dt6fiBAjGVi4M4PO3V2ZUkieRHR6fn6wWvC5E6RZoZM"
+						>
+							Apply as Designer
+						</a>
+					</div>
+					<div className={cn.border}>
+						<a
+							className={cn.app}
+							href="https://docs.google.com/forms/d/11YEH02IGBs800naIoY8gpi_dZ5hrH15_1OXlBKNnuAs"
+							target="_blank"
+							rel="noreferrer noopener"
+						>
+							Apply as Mentor
+						</a>
+					</div>
+				</div>
+			</div>
 			<SplashLogo ref={logoRef} className={cn.logo} />
 		</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
index 5dc61163..f0976186 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
@@ -7,8 +7,9 @@
     place-content: center;
 
     .logo {
-        max-width: 50vw;
+        max-width: max(50vw, 360px);
         margin: 0 auto;
+        padding-bottom: 30%;
 
         path {
             stroke-width: 5;
@@ -26,6 +27,75 @@
             }
         }
     }
+
+    .info {
+        font-size: 1.8em;
+        text-align: center;
+        position: absolute;
+        place-self: center;
+        bottom: 15%;
+        z-index: 110;
+
+        .time {
+            font-size: 4vw;
+            grid-column: 1/3;
+            font-family: "Gluten", cursive;
+            font-weight: 600;
+            margin-bottom: 24px;
+            
+        }
+
+        .wrapper {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            column-gap: 40px;
+            row-gap: 10px;
+            max-width: 800px;
+            margin: 0 auto;
+
+            @media screen and (max-width: 800px) {
+                grid-template-columns: 1fr;
+                .border{ 
+                    padding: 4px !important;
+                }
+                .app {
+                    border-radius: 16px !important;
+                    padding: 14px 20px !important;
+                    font-size: 18px !important;
+
+                }
+            }
+
+            .border {
+                margin: 0 auto;
+                width: max-content;
+                border-radius: 20px;
+                background: linear-gradient(93.29deg, #1F3066 8.27%, #F84E72 74.24%, #FF6969 99.26%);
+                padding: 6px;
+                transition: background 250ms;
+
+                &:hover {
+                    
+                    background: #1F3066;
+                    .app {
+                        background: #1F3066;
+                        color: white;
+                    }
+
+                }
+
+                .app { 
+                    transition: background 250ms, color 250ms;
+                    background-color: #fff5e0;
+                    width: 100%;
+                    border-radius: 14px;
+                    font-size: 0.8em;
+                    padding: 20px 40px;
+                }
+            }
+            
+        }
+    }
 }
 
 @keyframes fadeIn {