kw/scaffold 2024 designathon (#52)

* feat: copy over files

* chore: setup routes

* chore: update imports to 2024

* chore: prettier json data files

* chore: update hero text

* style: add root colors

* feat: update navbar

* style: update about coloring

* chore: copy WinnerShowcase to 2024

* refactor: class to className

* style: about page and responsiveness

* style: decrease WinnerShowcase font size on smaller screens

* style: winnerInfo responsive min width

* chore: absolute import

* style: remove redundant selector

* chore: correct heading heirarchy

* fix: remove redundant parent selectors

* feat: extract schedule to json, refactor, styling WIP

* feat: add arrow and endTime

src/app/pages/Designathons/Designathon24/Designathon24.js

@@ -0,0 +1,145 @@
+import { Icon, Section } from "app/Symbols";
+import { Text } from "app/components";
+import EVENTS_2024 from "assets/data/designathon/2024/events.json";
+import WINNERS_2024 from "assets/data/designathon/2024/winners.json";
+import TIMER_2024 from "assets/data/designathon/2024/timer.json";
+import JUDGES_2024 from "assets/data/designathon/2024/judges.json";
+import KEYNOTE_2024 from "assets/data/designathon/2024/keynote.json";
+import PRIZES_2024 from "assets/data/designathon/2024/prizes.json";
+import WORKSHOP_HOSTS_2024 from "assets/data/designathon/2024/workshop-hosts.json";
+import RULES_2024 from "assets/data/designathon/2024/rules.json";
+import cn from "./Designathon24.module.scss";
+import FOF from "./assets/FOF.png";
+import notion from "./assets/notion.png";
+import balsamiq from "./assets/balsamiq.png";
+import {
+	Profile,
+	Prizes,
+	SectionNavigation,
+	FAQ,
+	Rules,
+	Timer,
+	WinnerShowcase,
+} from "./components";
+import Schedule from "./components/Schedule";
+import { Splash } from "./components/Splash";
+
+const Designathon24 = () => (
+	<main className={cn.container}>
+		<div className={cn.hero}>
+			<div style={{ height: "100%", width: "100%" }}>
+				<Splash />
+			</div>
+			<div className={cn.title}>
+				<Icon className={cn.icon} src="designathon-white.svg" w="96" h="96" />
+				<Text size="XXXL" className="bold">
+					True to You
+				</Text>
+				<div className={cn.timer}>
+					<Timer breakpoints={TIMER_2024} />
+				</div>
+			</div>
+		</div>
+
+		<SectionNavigation />
+		<WinnerShowcase winners={WINNERS_2024} />
+
+		<div className={cn.about} id="s-about">
+			<Section>
+				<h2 className={cn.aboutHeading}>About</h2>
+				<p>
+					Design-a-thon is a 3 day long hybrid event where you or a team design
+					a product focused on the theme: community and inclusivity. It takes
+					place on February 24, starting at 5:30 pm and ends February 26, 8:00
+					pm PST.
+				</p>
+				<p>
+					Design at UCI is the premier student-run organization at UCI for
+					anything graphic design, UI/UX design, product design, and more.
+					Started in 2016, we foster a special community for all digital
+					designers to connect, learn, and innovate.
+				</p>
+				<p>
+					Design at UCI’s designathon is the largest collegiate designathon in
+					Orange County. Each year, we bring together hundreds of student
+					designers nationwide to define, develop, and pitch a product built
+					from scratch. We hope that this experience can help you acquire and
+					grow both your soft and hard skills in empathizing with your users,
+					defining a set of goals and needs, developing your product, and
+					improving your confidence and creativity as a human-centric designer.
+				</p>
+			</Section>
+		</div>
+
+		<div className={cn.people} id="s-people">
+			<Section>
+				<div className={cn.section}>
+					<h2>Keynote Speaker</h2>
+					{KEYNOTE_2024.map((speaker) => (
+						<Profile key={speaker.photo} {...speaker} />
+					))}
+				</div>
+				<div className={cn.section}>
+					<h2>Judges</h2>
+					{JUDGES_2024.map((judge) => (
+						<Profile key={judge.photo} {...judge} />
+					))}
+				</div>
+				<div className={cn.section}>
+					<h2>Workshop Hosts</h2>
+					{WORKSHOP_HOSTS_2024.map((host) => (
+						<Profile key={host.photo} {...host} />
+					))}
+				</div>
+			</Section>
+		</div>
+
+		<Rules rules={RULES_2024} />
+
+		<div className={cn.prizes} id="s-prizes">
+			<Prizes list={PRIZES_2024} />
+		</div>
+
+		<Schedule schedule={EVENTS_2024} />
+
+		<FAQ />
+
+		<div className={cn.sponsors} id="s-sponsors">
+			<Section>
+				<h2>Sponsors</h2>
+				<div className={cn.logos}>
+					<div>
+						<a
+							href="https://friends.figma.com/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<img src={FOF} alt="Friends of Figma" />
+						</a>
+					</div>
+					<div>
+						<a
+							href="https://www.notion.so/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{" "}
+							<img src={notion} alt="Notion" />
+						</a>
+					</div>
+					<div>
+						<a
+							href="https://balsamiq.com/"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<img src={balsamiq} alt="balsamiq" />
+						</a>
+					</div>
+				</div>
+			</Section>
+		</div>
+	</main>
+);
+
+export default Designathon24;

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

@@ -0,0 +1,174 @@
+:root {
+	--pink: #ff75a4;
+	--hot-pink: #f84e72;
+	--peach: #ff6969;
+	--cream: #fff5e0;
+	--black: #242424;
+}
+
+.container {
+	& > .hero {
+		height: 100vh;
+		width: 100%;
+		background-color: black;
+		display: grid;
+		overflow: hidden;
+		place-content: center;
+
+		& > img {
+			width: 100%;
+			max-width: 100%;
+			max-height: 100%;
+			transform: rotate(0deg) scale(0);
+			object-fit: contain;
+			animation: rotate linear 10s infinite forwards;
+			will-change: transform;
+		}
+
+		& > .title {
+			position: absolute;
+			height: 100%;
+			width: 100%;
+			top: 0;
+			left: 0;
+			display: grid;
+			place-content: center;
+			color: var(--yellow);
+			z-index: 100;
+			text-align: center;
+			padding-top: 140px;
+
+			& .icon {
+				margin: 0 auto;
+			}
+		}
+	}
+
+	& > .about {
+		padding: 10px;
+		background-color: var(--cream);
+		color: var(--black);
+		font-size: 1em;
+
+		& h2 {
+			font-size: 2em;
+			font-weight: bold;
+		}
+
+		& p {
+			font-size: 1.2em;
+			line-height: 1.5em;
+		}
+
+		& .aboutHeading {
+			color: var(--hot-pink);
+		}
+
+		@media screen and (min-width: 1100px) {
+			padding-bottom: 80px;
+
+			& h2 {
+				font-size: 3em;
+			}
+
+			& p {
+				font-size: 1.3em;
+				line-height: 1.4em;
+			}
+		}
+	}
+
+	& > .prizes {
+		background-color: white;
+	}
+
+	& > .people {
+		color: white;
+		background-color: black;
+		padding: 0px;
+
+		& h1 {
+			font-size: 2em;
+			font-weight: bold;
+		}
+
+		@media screen and (min-width: 700px) {
+			padding: 20px;
+
+			& h1 {
+				font-size: 3em;
+			}
+		}
+
+		@media screen and (min-width: 900px) {
+			padding: 40px;
+
+			& h1 {
+				font-size: 3em;
+			}
+		}
+
+		& .section {
+			display: grid;
+			column-gap: 20px;
+			row-gap: 20px;
+			grid-template-columns: repeat(2, 1fr);
+			padding: 20px 0;
+
+			& > h2 {
+				color: var(--yellow);
+				grid-column: 1 / -1;
+				font-size: 2em;
+				font-weight: bold;
+
+				@media screen and (min-width: 1000px) {
+					font-size: 3em;
+				}
+			}
+
+			@media screen and (min-width: 1000px) {
+				grid-template-columns: repeat(3, 1fr);
+				gap: 20px;
+			}
+
+			@media screen and (min-width: 1200px) {
+				grid-template-columns: repeat(4, 1fr);
+				gap: 40px;
+			}
+		}
+	}
+
+	& .sponsors {
+		background-color: var(--silver);
+
+		& h2 {
+			font-size: 2em;
+		}
+
+		& .logos {
+			padding-top: 60px;
+			display: grid;
+			column-gap: 80px;
+			row-gap: 80px;
+			width: 100%;
+			grid-template-columns: repeat(1, 1fr);
+			place-content: center;
+
+			@media screen and (min-width: 800px) {
+				max-height: none;
+				grid-template-columns: repeat(3, 1fr);
+			}
+
+			& > div {
+				display: grid;
+				place-content: center;
+			}
+
+			& img {
+				max-height: 200px;
+				width: 100%;
+				object-fit: contain;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,33 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 40px;
+
+    @media screen and (min-width: 900px) {
+        grid-template-columns: 240px 1fr;
+    }
+
+    @media screen and (min-width: 1000px) {
+        grid-template-columns: 300px 1fr;
+    }
+
+
+    & .question {
+        display: grid;
+        cursor: pointer;
+        grid-template-columns: auto 1fr;
+        margin: 8px;
+        padding: 24px;
+        border-radius: 12px;
+        background-color: white;
+        transition: background-color 250ms;
+
+        &.opened {
+            border: 2px solid var(--silver);
+        }
+
+        &:hover {
+            background-color: var(--silver);
+        }
+    }
+}