feat: add background graphics (#77)

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

@@ -8,10 +8,20 @@
 	padding: 3rem 1rem 5rem;
 	font-size: 0.75em;
 
-	& .aboutHeading {
+	.heading {
+		position: relative;
 		color: var(--des24-hot-pink);
-		font-size: 50px;
+		font-size: 3rem;
 		font-weight: 700;
+		margin-bottom: 4rem;
+
+		@media screen and (min-width: 640px) {
+			font-size: 5rem;
+		}
+
+		@media screen and (min-width: 1280px) {
+			font-size: 6rem;
+		}
 	}
 
 	.airplane {
@@ -73,13 +83,9 @@
 
 	.tr {
 		position: absolute;
-		max-width: 200px;
+		max-width: 50%;
 		top: 0px;
 		right: 0px;
-
-		@media screen and (min-width: 640px) {
-			max-width: 500px;
-		}
 	}
 
 	.gradient {

src/app/pages/Designathons/Designathon24/components/About/index.jsx

@@ -1,16 +1,21 @@
 import cn from "./About.module.scss";
 import clsx from "clsx";
 
+import Notecard from "../Notecard/Notecard";
+
 import airplane from "../../assets/graphics/about/airplane.svg";
 import paperclip from "../../assets/graphics/about/paperclip.svg";
 import tr_gradient from "../../assets/graphics/about/tr_gradient.svg";
 import bl_blob_stars from "../../assets/graphics/about/bl_blob_stars.svg";
 import tr_stars from "../../assets/graphics/about/tr_stars.svg";
-import Notecard from "../Notecard/Notecard";
+
+import GridBackground from "../Backgrounds/GridBackground";
 
 const About = () => {
 	return (
 		<div className={cn.container} id="s-about">
+			<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />
+
 			<img
 				src={tr_gradient}
 				alt="tr_gradient"
@@ -19,7 +24,8 @@ const About = () => {
 			<img src={bl_blob_stars} alt="" className={cn.bl} />
 			<img src={tr_stars} alt="" className={cn.tr} />
 
-			<h2 className={cn.aboutHeading}>About</h2>
+			<h2 className={cn.heading}>About</h2>
+
 			<Notecard lineAdjustment={1}>
 				<div style={{ maxWidth: "95%" }}>
 					<p>
@@ -48,12 +54,13 @@ const About = () => {
 					</p>
 				</div>
 			</Notecard>
-			<img src={paperclip} alt="" className={cn.paperclip} />
+
 			<img
 				src={airplane}
 				alt=""
 				className={clsx(cn.airplane, "wait flopR")}
 			/>
+			<img src={paperclip} alt="" className={cn.paperclip} />
 		</div>
 	);
 };

src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import cn from "./GridBackground.module.scss";
+import clsx from "clsx";
+
+import light_graph from "../../assets/graphics/background/light_graph.svg";
+import dark_graph from "../../assets/graphics/background/dark_graph.svg";
+
+/**
+ * @typedef {Object} Positions
+ * @property {number} [top]
+ * @property {number} [left]
+ * @property {number} [right]
+ * @property {number} [bottom]
+ */
+
+/**
+ * @param {Positions[]} positions
+ * @param {boolean} isLight
+ * @returns {JSX.Element}
+ */
+const GridBackground = ({ positions, isLight }) => {
+	return (
+		<div>
+			{positions.map((position) => {
+				const { top, left, right, bottom } = position;
+
+				return (
+					<img
+						src={isLight ? light_graph : dark_graph}
+						alt=""
+						className={clsx(cn.graph, isLight ? cn.light : cn.dark)}
+						style={{
+							top: `${top ?? "unset"}`,
+							left: `${left ?? "unset"}`,
+							right: `${right ?? "unset"}`,
+							bottom: `${bottom ?? "unset"}`,
+						}}
+						key={"" + top + left + right + bottom}
+					/>
+				);
+			})}
+		</div>
+	);
+};
+
+export default GridBackground;

src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.module.scss

@@ -0,0 +1,16 @@
+.graph {
+	position: absolute;
+	object-fit: cover;
+	pointer-events: none;
+
+	height: 80%;
+	max-height: calc(100vh - 88px); // 88px is the navbar
+}
+
+.light {
+	width: 60%;
+}
+
+.dark {
+	width: 40%;
+}

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

@@ -10,6 +10,7 @@
 	}
 
 	.heading {
+		position: relative;
 		color: var(--des24-hot-pink);
 		font-size: 3rem;
 		font-weight: 700;

src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx

@@ -3,11 +3,17 @@ import cn from "./FAQ.module.scss";
 import { useCallback, useState } from "react";
 
 import down_carat from "../../assets/graphics/faq/down_carat.svg";
+import GridBackground from "../Backgrounds/GridBackground";
 
 const FAQ = () => {
 	return (
 		<div id="s-faq">
 			<div className={cn.container}>
+				<GridBackground
+					positions={[{ top: 0, left: 0 }]}
+					isLight={true}
+				/>
+
 				<h2 className={cn.heading}>FAQ</h2>
 				{/* <div className="spaceChildren">
 					<Text style={{ lineHeight: "1.4em" }}>
@@ -23,7 +29,6 @@ const FAQ = () => {
 						for more help!
 					</Text>
 				</div> */}
-
 				<div className={cn.qa_container}>
 					{[
 						{

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

@@ -5,6 +5,7 @@
 		transition: 0.1s ease-in;
 	}
 
+	position: relative;
 	height: fit-content;
 }
 
@@ -39,6 +40,8 @@
 		.polaroidName {
 			font-size: 1rem;
 			font-weight: 600;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
 			padding-bottom: 8px;
 

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

@@ -8,6 +8,7 @@ import cream from "../../assets/graphics/rules/cream.svg";
 import peach_cream from "../../assets/graphics/rules/peach_cream.svg";
 import pink from "../../assets/graphics/rules/pink.svg";
 import hearts from "../../assets/graphics/rules/hearts.svg";
+import GridBackground from "../Backgrounds/GridBackground";
 
 const BACKGROUND_MAP = {
 	0: cream_hot_pink,
@@ -21,6 +22,8 @@ const BACKGROUND_MAP = {
 
 export const Rules = () => (
 	<div className={cn.container} id="s-rules">
+		<GridBackground positions={[{ top: 0, right: 0 }]} isLight={false} />
+
 		<div className={cn.content}>
 			<img
 				src={hearts}

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

@@ -1,9 +1,11 @@
 .container {
 	position: relative;
 	background-color: var(--des24-black);
+	background-image: url("../../assets/graphics/background/dark_splash.svg");
+	background-repeat: repeat-y;
+	background-size: 100% auto;
 
 	padding: 5rem 2rem;
-	font-size: 1em;
 
 	.content {
 		margin: 0 auto;
@@ -26,6 +28,7 @@
 	}
 
 	.rules {
+		position: relative;
 		height: 100%;
 		min-height: 100%;
 
@@ -51,9 +54,11 @@
 			background-position: center;
 			background-size: contain;
 			background-repeat: no-repeat;
+			max-width: 350px;
+			margin: auto;
 
 			.text {
-				margin:0 auto;
+				margin: 0 auto;
 				max-width: calc(80% - 20px);
 				color: black;
 				text-align: center;

src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx

@@ -24,7 +24,7 @@ const SectionNavigation = () => {
 			<div className={cn.navButtons}>
 				{[
 					{ label: "About", id: "s-about" },
-					{ label: "Judges & Speakers", id: "s-people" },
+					{ label: "Judges & Speakers", id: "s-speakers" },
 					{ label: "Rules", id: "s-rules" },
 					{ label: "Prizes", id: "s-prizes" },
 					{ label: "Schedule", id: "s-schedule" },

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

@@ -13,10 +13,25 @@ import br_star_stripe_gradient from "../../assets/graphics/speakers/br_star_stri
 
 import JUDGES from "../../assets/data/judges.json";
 import WORKSHOP_HOSTS from "../../assets/data/workshop-hosts.json";
+import GridBackground from "../Backgrounds/GridBackground";
 
 const Speakers = () => {
 	return (
 		<div className={cn.container} id="s-speakers">
+			<GridBackground
+				positions={[
+					{
+						top: 0,
+						left: 0,
+					},
+					{
+						bottom: 0,
+						right: 0,
+					},
+				]}
+				isLight={true}
+			/>
+
 			<img
 				src={tl_gradient}
 				alt=""

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

@@ -5,8 +5,7 @@
 	background-color: var(--des24-cream);
 	color: var(--des24-black);
 
-	padding: 5rem 1rem;
-	font-size: 1rem;
+	padding: 5rem 2rem;
 
 	.heading {
 		position: relative;