feat: add des24 to main website (#104)

src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx

@@ -1,62 +1,16 @@
-import { memo, useEffect, useRef } from "react";
-import { ReactComponent as SplashLogo } from "./logo.svg";
+import { memo } from "react";
 import cn from "./Splash.module.scss";
 import clsx from "clsx";
-import anime from "animejs";
 
-import tl_clouds from "../../assets/graphics/splash/clouds.svg";
-import butterfly from "../../assets/graphics/splash/butterfly.svg";
-import bl_star_stripe from "../../assets/graphics/splash/bl_star_stripe.svg";
-import mr_cloud_stars from "../../assets/graphics/splash/mr_cloud_stars.svg";
-import br_star_stripe from "../../assets/graphics/splash/br_star_stripe.svg";
-
-import GridBackground from "../Backgrounds/GridBackground";
+import SplashGraphics from "./SplashGraphics";
+import SplashLogo from "./SplashLogo";
 
 const Splash = memo(() => {
-	const logoRef = useRef(null);
-	useEffect(() => {
-		anime({
-			targets: "path.word",
-			strokeDashoffset: [anime.setDashoffset, 0],
-			easing: "easeInOutSine",
-			duration: 2000,
-			delay: function (el, i) {
-				return i * 300;
-			},
-		});
-	}, []);
-
 	return (
 		<div className={cn.container}>
-			<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />
-
-			<img
-				src={tl_clouds}
-				alt=""
-				className={clsx(cn.decoration, cn.tl_clouds, "wait flopL")}
-			/>
-			<img
-				src={butterfly}
-				alt=""
-				className={clsx(cn.decoration, cn.butterfly, "wait flopL")}
-			/>
-			<img
-				src={bl_star_stripe}
-				alt=""
-				className={clsx(cn.decoration, cn.bl_star_stripe, "wait flopL")}
-			/>
-			<img
-				src={mr_cloud_stars}
-				alt=""
-				className={clsx(cn.decoration, cn.mr_cloud_stars, "wait flopR")}
-			/>
-			<img
-				src={br_star_stripe}
-				alt=""
-				className={clsx(cn.decoration, cn.br_star_stripe, "wait flopR")}
-			/>
+			<SplashGraphics />
 
-			<SplashLogo ref={logoRef} className={cn.logo} />
+			<SplashLogo />
 
 			<div className={clsx(cn.info, "wait")}>
 				<div className={cn.time}>

src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss

@@ -124,20 +124,24 @@
 	pointer-events: none;
 
 	max-width: 30%;
+
+	@media screen and (min-width: 800px) {
+		max-width: 20%;
+	}
 }
 
 .tl_clouds {
 	top: 0;
 	left: 0;
 
-	max-width: 60%;
+	max-width: 50%;
 
 	@media screen and (min-width: 475px) {
-		max-width: 50%;
+		max-width: 40%;
 	}
 
 	@media screen and (min-width: 640px) {
-		max-width: 25%;
+		max-width: 20%;
 	}
 
 	@media screen and (min-width: 1024px) {
@@ -151,7 +155,7 @@
 
 	@media screen and (min-width: 1024px) {
 		top: 30%;
-		max-width: 25%;
+		max-width: 15%;
 	}
 }
 
@@ -162,7 +166,7 @@
 
 .mr_cloud_stars {
 	top: unset;
-	bottom: 35%;
+	bottom: 32.5%;
 
 	right: 0;
 	max-width: 33.5%;
@@ -173,7 +177,7 @@
 	}
 
 	@media screen and (min-width: 1024px) {
-		top: 20%;
+		top: 15%;
 	}
 }
 

src/app/pages/Designathons/Designathon24/components/Splash/SplashGraphics.jsx

@@ -0,0 +1,46 @@
+import cn from "./Splash.module.scss";
+import clsx from "clsx";
+
+import GridBackground from "../Backgrounds/GridBackground";
+
+import tl_clouds from "../../assets/graphics/splash/clouds.svg";
+import butterfly from "../../assets/graphics/splash/butterfly.svg";
+import bl_star_stripe from "../../assets/graphics/splash/bl_star_stripe.svg";
+import mr_cloud_stars from "../../assets/graphics/splash/mr_cloud_stars.svg";
+import br_star_stripe from "../../assets/graphics/splash/br_star_stripe.svg";
+
+const SplashGraphics = () => {
+	return (
+		<>
+			<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />
+
+			<img
+				src={tl_clouds}
+				alt=""
+				className={clsx(cn.decoration, cn.tl_clouds, "wait flopL")}
+			/>
+			<img
+				src={butterfly}
+				alt=""
+				className={clsx(cn.decoration, cn.butterfly, "wait flopL")}
+			/>
+			<img
+				src={bl_star_stripe}
+				alt=""
+				className={clsx(cn.decoration, cn.bl_star_stripe, "wait flopL")}
+			/>
+			<img
+				src={mr_cloud_stars}
+				alt=""
+				className={clsx(cn.decoration, cn.mr_cloud_stars, "wait flopR")}
+			/>
+			<img
+				src={br_star_stripe}
+				alt=""
+				className={clsx(cn.decoration, cn.br_star_stripe, "wait flopR")}
+			/>
+		</>
+	);
+};
+
+export default SplashGraphics;

src/app/pages/Designathons/Designathon24/components/Splash/SplashLogo.jsx

@@ -0,0 +1,23 @@
+import { memo, useEffect, useRef } from "react";
+import { ReactComponent } from "./logo.svg";
+import cn from "./Splash.module.scss";
+import anime from "animejs";
+
+const SplashLogo = memo(({ style }) => {
+	const logoRef = useRef(null);
+	useEffect(() => {
+		anime({
+			targets: "path.word",
+			strokeDashoffset: [anime.setDashoffset, 0],
+			easing: "easeInOutSine",
+			duration: 2000,
+			delay: function (el, i) {
+				return i * 300;
+			},
+		});
+	}, []);
+
+	return <ReactComponent ref={logoRef} className={cn.logo} style={style} />;
+});
+
+export default SplashLogo;

src/app/pages/Designathons/Home/components/EventListing/components/ProjectShowcase.jsx

@@ -1,22 +1,34 @@
 import { Text } from "app/components";
 import { Photo } from "app/Symbols";
 
-const ProjectShowcase = ({ title, image, name, creators, links }) => {
+const ProjectShowcase = ({
+	title,
+	image,
+	name,
+	creators,
+	links,
+	photoStyle,
+}) => {
 	return (
 		<>
 			<div className="card shadow flex spaceChildrenSmall">
-				<Text className="color blue" style={{ alignSelft: "flex-start" }}>
+				<Text
+					className="color blue"
+					style={{ alignSelft: "flex-start" }}
+				>
 					{title}
 				</Text>
 				<div className="card" style={{ width: "100%" }}>
 					<Photo
 						src={image}
 						className="shadow"
-						style={{ minHeight: "256px" }}
+						style={{ minHeight: "256px", ...photoStyle }}
 					/>
 				</div>
 				<Text size="L">{name}</Text>
-				<Text className="color gray">Created by {creators.join(", ")}</Text>
+				<Text className="color gray">
+					Created by {creators.join(", ")}
+				</Text>
 				{links.map((link) => (
 					<a href={link.href} target="noreferer" key={link}>
 						<Text icon="right" color="blue">

src/app/pages/Designathons/Home/components/EventListing/index.jsx

@@ -3,12 +3,20 @@ import { Photo, Section, Space } from "app/Symbols";
 import { Link } from "react-router-dom";
 import { ProjectShowcase } from "./components/ProjectShowcase";
 
-const EventListing = ({ title, theme, link, image, showcase }) => {
+const EventListing = ({
+	title,
+	theme,
+	link,
+	image,
+	showcase,
+	participants,
+}) => {
 	return (
 		<Section
 			className="short"
 			style={{
-				background: "linear-gradient(0deg,var(--white) 50%,var(--silver) 150%",
+				background:
+					"linear-gradient(0deg,var(--white) 50%,var(--silver) 150%",
 			}}
 		>
 			<div className="split2">
@@ -17,20 +25,31 @@ const EventListing = ({ title, theme, link, image, showcase }) => {
 						{title}
 					</Text>
 					<Space h="16" />
-					<Text size="S" className="color blue" style={{ marginBottom: "8px" }}>
+					<Text
+						size="S"
+						className="color blue"
+						style={{ marginBottom: "8px" }}
+					>
 						Theme
 					</Text>
 					<Text className="color gray">{theme}</Text>
-					<Text size="S" className="color blue" style={{ marginBottom: "8px" }}>
+					<Text
+						size="S"
+						className="color blue"
+						style={{ marginBottom: "8px" }}
+					>
 						Participants
 					</Text>
-					<Text className="color gray">100+</Text>
+					<Text className="color gray">{participants}</Text>
 				</div>
 				<div
 					className="card L fill white shadow"
 					style={{ minHeight: "256px", padding: "16px" }}
 				>
-					<Link className="relative fill white button shadow" to={link}>
+					<Link
+						className="relative fill white button shadow"
+						to={link}
+					>
 						<Text icon="right" color="blue">
 							Event Page
 						</Text>
@@ -41,7 +60,11 @@ const EventListing = ({ title, theme, link, image, showcase }) => {
 			<Text size="L">Awarded Entries</Text>
 			<div className="split2">
 				{showcase.map((project) => (
-					<ProjectShowcase {...project} key={project.title + project.name} />
+					<ProjectShowcase
+						{...project}
+						key={project.title + project.name}
+						photoStyle={project.photoStyle}
+					/>
 				))}
 			</div>
 		</Section>

src/app/pages/Designathons/Home/index.js

@@ -6,6 +6,8 @@ import { Section, Space, Icon } from "app/Symbols";
 
 import PAST_EVENTS from "assets/data/designathon/overall.json";
 import { EventListing } from "./components";
+import SplashGraphics from "../Designathon24/components/Splash/SplashGraphics";
+import SplashLogo from "../Designathon24/components/Splash/SplashLogo";
 
 const Designathons = () => (
 	<>
@@ -24,8 +26,8 @@ const Designathons = () => (
 			<div className="split2 textAlignLeft slim">
 				<div className="flex left slim spaceChildrenSmall">
 					<Text className="color gray">
-						A large-scale event where teams work to design a prototype product
-						within a few days.
+						A large-scale event where teams work to design a
+						prototype product within a few days.
 					</Text>
 					<Text className="color gray">
 						To get involved, <Link to="/join/">join us</Link> to get
@@ -34,37 +36,53 @@ const Designathons = () => (
 				</div>
 				<div className="flex left slim spaceChildrenSmall">
 					<Text className="color gray">
-						Our Design-a-thon is held once per year, and is open to everyone.
-						Bring your team or form one during the event, and compete to create
-						the best design centered around the prompt. Additionally, you can
-						attend workshops hosted during the event to get extra help and
+						Our Design-a-thon is held once per year, and is open to
+						everyone. Bring your team or form one during the event,
+						and compete to create the best design centered around
+						the prompt. Additionally, you can attend workshops
+						hosted during the event to get extra help and
 						inspiration from industry professionals.
 					</Text>
 				</div>
 			</div>
 		</Section>
+
 		<Section
-			className="center fill black"
+			className="center fill black relative"
 			style={{
 				height: "90vh",
 				background:
-					"url(/static/photo/designathon-2023.png) center/cover no-repeat",
-				backgroundColor: "black",
+					"url(/static/photo/2024-4.png) center/cover no-repeat",
+				backgroundColor: "#FFF4E0",
 			}}
 		>
-			<Link to="/designathon/23" className="flex spaceChildren">
-				<Space h="96" />
-				<Text className="bold">Design-a-thon 2023</Text>
-				<Text size="XXL" className="bold">
-					You Belong Here
-				</Text>
-				<Text className="bold">February 24-26, 2023</Text>
-				<Space h="32" />
-				<Text className="button" color="blue" icon="right">
-					Event Page
+			<div>
+				<SplashGraphics />
+			</div>
+
+			<SplashLogo
+				style={{
+					maxWidth: "min(700px, 50%)",
+					minWidth: "min(350px, 100%)",
+					height: "fit-content",
+					position: "absolute",
+					marginBottom: "15%",
+				}}
+			/>
+
+			<div style={{ position: "absolute", bottom: "10%" }}>
+				<Text size="XL" className="bold" color="black">
+					May 17-19, 2024
 				</Text>
-			</Link>
+				<Space h="96" />
+				<Link to="/designathon/24" className="flex spaceChildren">
+					<Text className="button" color="blue" icon="right">
+						Event Page
+					</Text>
+				</Link>
+			</div>
 		</Section>
+
 		{PAST_EVENTS.map((event) => (
 			<EventListing key={event.title} {...event} />
 		))}