update homepage

apps/nextjs/components/DualUpcomingEvent/DualUpcomingEvent.module.scss

@@ -0,0 +1,86 @@
+@import "../../styles/responsive.scss";
+@import "../../styles/colors.scss";
+
+.dualUpcoming {
+	display: flex;
+  flex-direction: column;
+
+  @include breakpoint($md) {
+    flex-direction: row;
+  }
+}
+
+.heroblock {
+  flex-grow: 1;
+	// background: url("../../styles/img/hero-image.png") no-repeat;
+	background-size: cover;
+	background-position: center;
+	color: $dark-text;
+
+	.content {
+		display: flex;
+		flex-flow: column;
+		padding: 50px 0;
+
+		@include breakpoint($md) {
+			flex-flow: row;
+			max-width: 1200px;
+
+			& > :first-child {
+				display: inline-block;
+				max-width: 33%;
+			}
+
+			& > :last-child:not(:only-child) {
+				margin-left: 10px;
+				max-width: 66%;
+				padding: 0 7%;
+			}
+		}
+
+		a {
+			color: $color-white;
+
+			&:visited {
+				color: $color-white;
+			}
+		}
+
+		.ctaBlock {
+			text-align: left;
+			padding: 25px;
+
+			p {
+				max-width: 400px;
+			}
+
+			.countdown {
+				// font-size: 1.75rem;
+				// line-height: 3;
+				min-height: 32px;
+			}
+
+			a {
+				margin-bottom: 16px;
+			}
+		}
+
+		.logoBlock {
+			// width: inherit;
+			// max-width: 400px;
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			align-items: center;
+			justify-content: center;
+			gap: 3rem;
+
+			max-width: 80%;
+			margin: auto;
+
+			@include breakpoint($lg) {
+				max-width: 600px;
+			}
+		}
+	}
+}

apps/nextjs/components/DualUpcomingEvent/DualUpcomingEvent.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from "react";
+import styles from "./DualUpcomingEvent.module.scss";
+import Image from "next/image";
+import { faCalendar, faChevronRight, faPersonRunning, faTicket } from "@fortawesome/free-solid-svg-icons";
+import Button from "../Button/Button";
+import { AusSpeedrunsEvent } from "../../types/types";
+
+type DualUpcomingEventProps = {
+	eventA: HeroBlockProps;
+	eventB: HeroBlockProps;
+};
+
+function zeroPad(num: number): string {
+	return num.toString().padStart(2, "0");
+}
+
+function countdownRender(currentTime: number, eventDate: number) {
+	// Calculate the difference in seconds between the target date and current date
+	let diffInSeconds = (eventDate - currentTime) / 1000;
+
+	// Calculate the days, hours, minutes and seconds from the difference in seconds
+	let days = Math.floor(diffInSeconds / 86400);
+	let hours = Math.floor(diffInSeconds / 3600) % 24;
+	let minutes = Math.floor(diffInSeconds / 60) % 60;
+	let seconds = Math.floor(diffInSeconds % 60);
+
+	if (days > 0) {
+		return (
+			<span>
+				<span className="sr-only">
+					{days} days, {hours} hours, {minutes} minutes and {seconds} seconds remaining
+				</span>
+				<span aria-hidden>
+					{zeroPad(days)}:{zeroPad(hours)}:{zeroPad(minutes)}:{zeroPad(seconds)}
+				</span>
+			</span>
+		);
+	}
+
+	if (hours > 0) {
+		return (
+			<span>
+				<span className="sr-only">
+					{hours} hours, {minutes} minutes and {seconds} seconds remaining
+				</span>
+				<span aria-hidden>
+					{zeroPad(hours)}:{zeroPad(minutes)}:{zeroPad(seconds)}
+				</span>
+			</span>
+		);
+	}
+
+	return (
+		<span>
+			<span className="sr-only">
+				{minutes} minutes and {seconds} seconds remaining
+			</span>
+			<span aria-hidden>
+				{zeroPad(minutes)}:{zeroPad(seconds)}
+			</span>
+		</span>
+	);
+}
+
+const DualUpcomingEvent = (props: DualUpcomingEventProps) => {
+	return (
+		<div className={styles.dualUpcoming}>
+			<HeroBlock {...props.eventA} reverse />
+			<HeroBlock {...props.eventB} />
+		</div>
+	);
+};
+
+type HeroBlockProps = {
+	event: AusSpeedrunsEvent;
+	tagLine?: string;
+	darkText?: boolean;
+	schedule?: boolean;
+	submitRuns?: boolean;
+	ticketLink?: string;
+	dontShowEventPage?: boolean;
+	reverse?: boolean;
+};
+
+const HeroBlock = ({
+	event,
+	tagLine,
+	darkText,
+	schedule,
+	submitRuns,
+	ticketLink,
+	dontShowEventPage,
+	reverse,
+}: HeroBlockProps) => {
+	const [countdownElement, setCountdownElement] = useState(<></>);
+
+	function updateCountdown() {
+		if (!event.startDate) return;
+		if (Date.now() < new Date(event.startDate).getTime()) {
+			setCountdownElement(countdownRender(Date.now(), new Date(event.startDate).getTime()));
+		}
+	}
+
+	useEffect(() => {
+		updateCountdown();
+		const interval = setInterval(updateCountdown, 1000);
+		return () => clearInterval(interval);
+	}, []);
+
+	return (
+		<section
+			className={styles.heroblock}
+			style={{
+				backgroundImage: `url("${require(`../../styles/img/${event.heroImage}`).default.src}")`,
+				color: darkText ? "#000" : "#fff",
+			}}>
+			<div className={`${styles.content} content`} style={{ flexDirection: reverse ? "row-reverse" : undefined }}>
+				<div className={styles.ctaBlock} style={{ textAlign: reverse ? "right" : undefined }}>
+					<h1>{event.preferredName}</h1>
+					<h2>{event.dates}</h2>
+					<h3 className={[styles.countdown, styles.monospaced].join(" ")}>{countdownElement}</h3>
+					<br />
+					<p>{tagLine}</p>
+					{!dontShowEventPage && (
+						<Button
+							actionText={event.preferredName}
+							link={`/${event.shortName}`}
+							iconRight={faChevronRight}
+							colorScheme={"secondary"}
+						/>
+					)}
+
+					{schedule && (
+						<Button
+							actionText="Schedule"
+							link={`/${event.shortName}/schedule`}
+							iconRight={faCalendar}
+							colorScheme={"secondary"}
+						/>
+					)}
+					{(event.website || ticketLink) && (
+						<Button
+							actionText="Purchase Tickets"
+							link={event.website ?? ticketLink}
+							iconRight={faTicket}
+							colorScheme={"secondary"}
+						/>
+					)}
+					{submitRuns && (
+						<Button
+							actionText="Submit a run!"
+							link="/submit-game"
+							iconRight={faPersonRunning}
+							colorScheme={"secondary"}
+						/>
+					)}
+				</div>
+				<div className={styles.logoBlock}>
+					<Image
+						src={require(`../../styles/img/${event.logo}`).default}
+						alt="Event Logo"
+						style={{
+							maxWidth: "100%",
+							height: "auto",
+						}}
+					/>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default DualUpcomingEvent;

apps/nextjs/components/Navbar/Navbar.module.scss

@@ -151,6 +151,10 @@
 		height: 0;
 	}
 
+	.mainmenu {
+		justify-content: center;
+	}
+
 	.mainmenu,
 	.social,
 	.auth {

apps/nextjs/pages/index.tsx

@@ -13,7 +13,8 @@ import LastEventBlock from "../components/LastEventBlock/LastEventBlock";
 import OGImage from "../styles/img/IndexOG.png";
 import { AusSpeedrunsEvent } from "../types/types";
 import { EventLive } from "../components/EventLive/EventLive";
-import ASMMLive from '../components/ASMM/asmm-live';
+import ASMMLive from "../components/ASMM/asmm-live";
+import DualUpcomingEvent from "../components/DualUpcomingEvent/DualUpcomingEvent";
 
 // TODO: Move this stuff to keystone
 const ASM2023: AusSpeedrunsEvent = {
@@ -41,7 +42,33 @@ const ASAP2023: AusSpeedrunsEvent = {
 	},
 	logo: "events/asap23/asap23-logo.png",
 	heroImage: "events/asap23/asap23-hero.jpg",
-	total: "18,007"
+	total: "18,007",
+};
+
+const ASGX2024: AusSpeedrunsEvent = {
+	fullName: "AusSpeedruns × The Game Expo 2024",
+	preferredName: "ASGX2024",
+	shortName: "ASGX2024",
+	startDate: "23 March 2024 09:00:00 GMT+0930",
+	dates: "March 23 – 24, 2024",
+	charity: {
+		name: "Game On Cancer",
+	},
+	logo: "events/asgx24/asgx-logo-white.png",
+	heroImage: "events/asgx24/asgx24-hero.png",
+};
+
+const ASDH2024: AusSpeedrunsEvent = {
+	fullName: "DreamHack 2024",
+	preferredName: "ASDH2024",
+	shortName: "ASDH2024",
+	startDate: "26 April 2024 09:00:00 GMT+0100",
+	dates: "April 26 – 28, 2024",
+	charity: {
+		name: "Game On Cancer",
+	},
+	logo: "events/asdh24/DreamHack24Logo.png",
+	heroImage: "events/asdh24/Dreamhack24Hero.jpg",
 };
 
 export default function Home() {
@@ -82,6 +109,19 @@ export default function Home() {
 					schedule
 					tagLine="We're going to PAX! Schedule has been released!"
 				/> */}
+				<DualUpcomingEvent
+					eventA={{
+						event: ASGX2024,
+						tagLine: "AusSpeedruns returns to The Game Expo!",
+						ticketLink: "https://www.thegameexpo.com/",
+						submitRuns: true,
+					}}
+					eventB={{
+						event: ASDH2024,
+						tagLine: "AusSpeedruns will be at Dreamhack for a special event. More information soon",
+						dontShowEventPage: true,
+					}}
+				/>
 				<LastEventBlock
 					tagLine="AusSpeedruns At PAX 2023 SMASHED it out of the park over DOUBLING our previous record!"
 					event={ASAP2023}