Add VH 2024 Schedule (#261)

---------
Co-authored-by: Alan Chang <[email protected]>

Author: alicetran1221

public/assets/images/schedule/countdown-bg-blank.png

@@ -54,6 +54,8 @@ const Countdown = ({ date }) => {
 
   const timerExpired = hasTimerInit && timer === "00:00:00";
   const isDesktop = winDim.width > 1000;
+  // VH 2024 colors
+  const confettiColors = ['#ee99a0', '#ffc999', '#070024', '#322660', '#a8acf9'];
   return (
     <>
       {timerExpired && (
@@ -62,20 +64,21 @@ const Countdown = ({ date }) => {
           height={isDesktop ? 400 : 300}
           numberOfPieces={50}
           tweenDuration={2}
+          colors={confettiColors}
         />
       )}
       <FlipNumbers
         play
         numbers={timer}
-        color="white"
-        width={isDesktop ? 60 : 30}
+        color="#322660"
+        width={isDesktop ? 40 : 30}
         height={isDesktop ? 50 : 30}
         nonNumberStyle={{
           fontSize: isDesktop ? "40px" : "30px"
         }}
         numberStyles={{
           textAlign: "left",
-          fontSize: isDesktop ? "20px" : "30px",
+          fontSize: "30px",
         }}
       />
     </>

public/assets/images/schedule/schedule-bg.png

@@ -5,17 +5,15 @@ import { scheduleData } from "../../data/schedule-info";
 const Event = ({ name, description, time, tooltip }) => (
 	<div className="schedule-card-time-slot">
 		<div>
-			<h5>{name}</h5>
+			<h5 className="time-slot-name">{name}</h5>
+			<h5 className="time">{time}</h5>
 			<div className="schedule-card-tooltip">
 				<p className="schedule-card-description">{description}</p>
 				{tooltip && (
 					<span className="schedule-card-tooltiptext">{tooltip}</span>
 				)}
 			</div>
 		</div>
-		<div style={{ textAlign: "right" }}>
-			<h5>{time}</h5>
-		</div>
 	</div>
 );
 

public/assets/images/schedule/schedule-block-bg.png

@@ -6,9 +6,10 @@
 	border-radius: 20px;
 	z-index: 50;
 	width: 75vw;
-	background-color: #42384473;
-	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
-	color: #f6d4d4;
+	background-image: url("../../../assets/images/schedule/schedule-block-bg.png");
+	background-size: cover;
+	//box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
+	color: $darkerPurple;
 	grid-template-columns: 49% 2% 49%;
 	grid-auto-flow: column;
 
@@ -31,7 +32,7 @@
 			height: 4px;
 			width: 15%;
 			border-radius: 5px;
-			background-color: #f6d4d4;
+			background-color: $darkerPurple;
 			margin-bottom: 40px;
 		}
 	}
@@ -43,7 +44,7 @@
 	.schedule-card-tooltip .schedule-card-tooltiptext {
 		visibility: hidden;
 		width: 400px;
-		background-color: #f6d4d4dc;
+		background-color: $peach;
 		color: black;
 		z-index: 1;
 		top: 100%;
@@ -66,7 +67,7 @@
 		margin-left: -5px;
 		border-width: 5px;
 		border-style: solid;
-		border-color: transparent transparent #f6d4d4dc transparent;
+		border-color: transparent transparent $peach transparent;
 	}
 
 	.schedule-card-tooltip:hover .schedule-card-tooltiptext {
@@ -76,18 +77,24 @@
 
 	.schedule-card-section {
 		.schedule-card-time-slot {
-			color: #cd8ad8;
+			color: $darkerPurple;
 			width: 100%;
 			// height: 60px;
 			display: flex;
 			justify-content: space-between;
+			align-items: center;
 			text-align: left;
 			margin-bottom: 20px !important;
 
 			div {
 				height: 100%;
 			}
 
+			img {
+				width: 100px;
+				height: auto;
+			}
+
 			@media screen and (max-width: 450px) {
 				h5 {
 					font-size: 16px !important;
@@ -98,13 +105,24 @@
 				}
 			}
 
-			h5 {
-				font-size: 21px;
+			.time-slot-name {
+				background: linear-gradient($darkerPurple, $darkPurple);
+				-webkit-background-clip: text;
+				color: transparent;
+				background-clip: text;
+				font-size: 24px;
 				margin-bottom: 0;
 			}
+			
+			.time {
+				font-size: 14px;
+				color: black;
+				letter-spacing: .75px;
+				padding-top: 2px;
+			}
 
 			p {
-				color: white;
+				color: $darkPurple;
 				margin-bottom: 0;
 			}
 		}

public/assets/images/schedule/schedule-header.png

@@ -16,16 +16,9 @@ let scheduleData = {
       time: "6:00PM-7:00PM",
     },
     {
-      name: "Swag Drop",
-      description: "Free swag!",
-      tooltip:
-        "Get your free hackathon swag provided by VenusHacks and its sponsors!",
-      time: "6:00PM",
-    },
-    {
-      name: "Team Formation",
+      name: "Teammate Tinder: Team Formation",
       description: "Team up hackers!",
-      tooltip: "Get to know your fellow hackers and find potential teammates!",
+      tooltip: "Stressed about team formation? Speed friendliness is here for you! If you already have a team, you are welcome to join to network with other teams and organizers!",
       time: "7:00PM-8:00PM",
     },
     {
@@ -34,20 +27,13 @@ let scheduleData = {
         "Currently on the waitlist? Come by the hackathon check in to see if spots are still open!",
       tooltip:
         "Please bring a photo ID when you check in so we can give you your badge!",
-      time: "7:00PM-9:00PM",
+      time: "7:00PM-8:00PM",
     },
     {
       name: "Opening Ceremony",
       description: "Welcome to VenusHacks!",
       tooltip:
-        "Hear about the clubs and sponsors behind VenusHacks, as well as important rules and resources for navigating the hackathon! Featuring speakers from our sponsors at Cox and UCI ODIT!",
-      time: "8:00PM-9:00PM",
-    },
-    {
-      name: "Costar Group Sponsor Boothing",
-      description: "Network with companies!",
-      tooltip:
-        "Connect with employees from Costar and hear more about their company!",
+        "Hear about the clubs and sponsors behind VenusHacks, as well as important rules and resources for navigating the hackathon! Featuring speakers from our sponsors at Melissa and industry professionals.",
       time: "8:00PM-9:00PM",
     },
     {
@@ -57,26 +43,17 @@ let scheduleData = {
       time: "9:00PM",
     },
     {
-      name: "Hackathon 101: How to Get Started (Hosted by WICS)",
-      // description: "WICS",
+      name: "Product and UI/UX Design for Hackathons (Hosted by Design@UCI)",
       description:
-        "A guide to good hacking practices and the general flow of a hackathon. Learn about team role division, how to brainstorm project ideas, user interviews, how to decide on what technology nodes to use, the general milestone timeline of a project, and how to show-off your projects on resume or verbally with a recruiter!",
+        "This workshop will provide you with beginner and programmer-friendly guides to level up your design and overall project!",
       time: "9:00PM-10:00PM",
     },
     {
-      name: "Become a Git God (Hosted by ACM)",
-      // description: "ACM",
+      name: "Intro to SQL (Hosted by Data@UCI)",
       description:
-        "Scared by merge conflicts? Losing your files in git hell? Come learn how to use git confidently using more advanced commands and best practices.",
+        "Come by for an introduction to SQL that covers the most vital database operations and an accompanying live coding demo to follow along with.",
       time: "10:00PM-11:00PM",
     },
-    {
-      name: "Musical Chairs",
-      description: "Move to the music!",
-      tooltip:
-        "Ready to get up and get moving to the music? Come join us for some rounds of the classic game musical chairs, and see who's the last one sitting!",
-      time: "11:00PM-12:00AM",
-    },
   ],
   satSchedule: [
     {
@@ -86,13 +63,6 @@ let scheduleData = {
         "Bring your badge to check in! Always keep the badge visible with you.",
       time: "8:00AM-9:00AM",
     },
-    {
-      name: "Costar Group Sponsor Boothing",
-      description: "Network with companies!",
-      tooltip:
-        "Connect with employees from Costar and hear more about their company!",
-      time: "9:00AM-2:00PM",
-    },
     {
       name: "Breakfast",
       description: "Grab breakfast on us!",
@@ -101,17 +71,15 @@ let scheduleData = {
       time: "9:00AM-10:00AM",
     },
     {
-      name: "Intro to Unity and Game Development (Hosted by VGDC)",
-      // description: "VGDC",
+      name: "Solo to Social (Hosted by ICSSC)",
       description:
-        "Learn everything you need to know to make a simple game using the Unity Engine (a game development software)! Be sure to download and install Unity (https://unity.com/download) beforehand.",
+        "Do you have friends? Do you like multiplayer applications? Learn how to build realtime multiplayer experiences for the web!",
       time: "10:00AM-11:00AM",
     },
     {
-      name: "Firebase: The Perfect All-in-One Toolchain (Hosted by Hack at UCI)",
-      // description: "Hack@UCI",
+      name: "Intro to Git Basics (Hosted by WICS@UCI)",
       description:
-        "Firebase is one of the best tools for hackers like you who want to integrate services into your application as quickly as possible! We'll be journeying through several of Firebase's features, including authentication, file storage, and databases, and tying them all together in one simple React web application. Prerequisites: Users should have a text editor or integrated development environment (IDE) and have NodeJS installed.",
+        "Join WICS for a workshop that will introduce the basics of Git and version control!",
       time: "11:00AM-12:00PM",
     },
     {
@@ -129,26 +97,32 @@ let scheduleData = {
       time: "12:00PM",
     },
     {
-      name: "Pre-Trained Models in Your Project (Hosted by CTC)",
-      // description: "CTC",
+      name: "Intro to Web Dev (Hosted by Ryan Yang)",
       description:
-        "Learn how to integrate pre-trained models effectively using Flask, a lightweight web framework, and empower your projects with advanced AI capabilities! Prerequisites: Have Flask installed.",
+        "Learn how to create a web app by going through the frontend and backend fundamentals in a live coding demo!",
       time: "1:00PM-2:00PM",
     },
     {
-      name: "Scaling to Zero: Building Serverless Discord Bots (Hosted by ICSSC)",
-      // description: "ICSSC",
+      name: "Mindful Moments: Crafting and Meditation Social",
       description:
-        'Unleash the power of serverless during our "Scaling to Zero" workshop! Learn what serverless is, its pros and cons, and unleash your creativity during our hands-on demo. Don\'t forget to bring your laptop, GitHub account, and Discord account to create your own pham bot!',
+        'Escape the Matrix! Relax outside, meditate, make cards, and journal!',
       time: "2:00PM-3:00PM",
     },
     {
-      name: "Friendship Bracelets",
-      description: "A fun and creative way to bond with your friends!",
-      tooltip:
-        "Join us for our Friendship Bracelets social and get ready to unleash your inner artist to make your own beautiful, personalized, one-of-a-kind friendship bracelet with a rainbow of colorful threads and a variety of fun patterns to choose from!",
+      name: "Intro to Sveltekit (Hosted by ACM@UCI)",
+      description: "Looking for ways to go beyond React and supercharge your website? Take a dive into SvelteKit, a web development framework that provides many of the functionalities of other frameworks but in a simpler and more intuitive format!",
       time: "3:00PM-4:00PM",
     },
+    {
+      name: "Crafting the Cosmos: DIY Planet Paper Lanterns Social",
+      description: "Craft your own celestial wonders. Join us creating beautiful paper lanterns resembling the solar system!",
+      time: "4:00PM-5:00PM",
+    },
+    {
+      name: "Intro to FastAPI (Hosted by Hack@UCI)",
+      description: "FastAPI is a powerful tool for building APIs with Python! Come learn how to integrate FastAPI into your Hackathon project and get a working backend implemented.",
+      time: "5:00PM-6:00PM",
+    },
     {
       name: "Dinner",
       description: "Grab dinner on us!",
@@ -157,25 +131,21 @@ let scheduleData = {
       time: "6:00PM-7:00PM",
     },
     {
-      name: "Origami",
-      description: "Fold paper with us!",
-      tooltip:
-        "Discover the magical world of origami and take a relaxing break of folding your very own works of paper art. We'll have a variety of colorful paper, so let your creative side run wild and fold your own unique creations!",
+      name: "Intro to Application Security: Protecting Your Projects (Hosted by Cyber@UCI)",
+      description: "Learn the fundamentals of application security which can be used to apply to your hackathon project!",
       time: "7:00PM-8:00PM",
     },
     {
-      name: "Intro to Brand Design (Hosted by Design at UCI)",
-      // description: "Design@UCI",
+      name: "Designing the Universe Social",
       description:
-        "Creating a new project from scratch and want to make it look cohesive? Join Design at UCI as we host a beginner-friendly workshop on the basics of brand design. Learn how to build a brand identity that fits your product's concept, how to simplify the process of prototyping and design through a style guide that ✨ just makes sense ✨, and how to use visual elements to make your project stand out against the competition!",
+        "Explore, Build, and Defend the Universe! Explore the city in your DIY toilet paper/streamer spacesuits. Build the new city with LEGO. Defend the universe from invaders in cup pong.",
       time: "8:00PM-9:00PM",
     },
     {
-      name: "Just Dance",
-      description: "Show off your best moves!",
-      tooltip:
-        "Join us to let loose and dance the night away during our Just Dance social, with a huge selection of hit songs and popular dance routines!",
-      time: "11:00PM-12:00AM",
+      name: "API 101 (Hosted by Postman)",
+      description:
+        "Want to level up your program? Use postman! We‘ll teach you how to easily integrate APIs without the hassle of confusing code!",
+      time: "9:00PM-10:00PM",
     },
   ],
   sunSchedule: [
@@ -188,43 +158,40 @@ let scheduleData = {
     {
       name: "Hacking Ends",
       description: "Landing!",
-      tooltip: "Hacking officially ends",
+      tooltip: "Hacking officially ends, give yourself a pat on the back!",
       time: "9:00AM",
     },
-    {
-      name: "CoStar Group Sponsor Boothing",
-      description: "Network with companies!",
-      tooltip:
-        "Connect with employees from CoStar and hear more about their company!",
-      time: "9:00AM-2:00PM",
-    },
     {
       name: "Breakfast",
       description: "Grab breakfast on us!",
       tooltip:
         "Take a break from hacking, grab a meal provided by us, and socialize with others!",
-      time: "9:00AM-10:00AM",
+      time: "9:00AM-10:30AM",
+    },
+    {
+      name: "Swag Drop",
+      description: "Free swag!",
+      tooltip:
+        "Get your free hackathon swag provided by VenusHacks and its sponsors!",
+      time: "9:00AM",
     },
     {
       name: "Project Expo",
       description: "Check out other hackers' projects!",
       tooltip:
         "Showcase your projects to other hackers and see the many projects made by other hackers!",
-      time: "10:00AM-12:00PM",
+      time: "10:30AM-12:00PM",
     },
     {
-      name: "Accessibility in Tech 2023 Panel",
-      description:
-        "Learn about the intersection of tech and disability from our panelists!",
-      tooltip:
-        "Featuring employees from Spotify and Crowdstrike and UCI alumni!",
+      name: "Speakers' Panel",
+      description: "Have fun and gain knowledge by talking to people in the industry and UCI professors!",
       time: "12:00PM-1:00PM",
     },
     {
       name: "Closing Ceremony",
       description: "See you next year!",
       tooltip:
-        "Excited for prizes? Come out to the closing ceremony where we will announce all the winners for VenusHacks 2023 and hear some final remarks from representatives from Cox and Slalom!",
+        "Excited for prizes? Come out to the closing ceremony where we will announce all the winners for VenusHacks 2024 and hear some final remarks from industry professionals and professors!",
       time: "1:00PM-2:00PM",
     },
   ],