feat: des24 rules section (#68)

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

@@ -7,7 +7,6 @@ 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";
@@ -50,7 +49,6 @@ const Designathon24 = () => (
 		<WinnerShowcase winners={WINNERS_2024} />
 
 		<About />
-
 		<div className={cn.people} id="s-people">
 			<Section>
 				<div className={cn.section}>
@@ -74,7 +72,7 @@ const Designathon24 = () => (
 			</Section>
 		</div>
 
-		<Rules rules={RULES_2024} />
+		<Rules />
 
 		<div className={cn.prizes} id="s-prizes">
 			<Prizes list={PRIZES_2024} />

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

@@ -1,9 +1,106 @@
 .container {
-	background-color: var(--silver);
+	position: relative;
+	background-color: var(--des24-black);
 
-	& h2 {
-		padding-bottom: 20px;
-		font-size: 3em;
-		font-weight: bold;
+	padding: 5rem 2rem;
+	font-size: 1em;
+
+	.heading {
+		color: var(--des24-hot-pink);
+		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;
+		}
+	}
+
+	.rules {
+		height: 100%;
+		min-height: 100%;
+
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+		gap: 1.5rem;
+
+		@media screen and (min-width: 768px) {
+			grid-template-columns: repeat(2, 1fr);
+			gap: 3rem;
+		}
+
+		@media screen and (min-width: 1280px) {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 5rem;
+		}
+
+		.rule {
+			width: 100%;
+			max-width: 400px;
+			aspect-ratio: 1;
+
+			position: relative;
+			display: flex;
+			justify-content: center;
+			margin: auto;
+
+			.text {
+				color: var(--des24-black);
+				width: 75%;
+				margin: auto 10%;
+
+				font-size: 0.75rem;
+
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
+
+				font-size: 1rem;
+
+				@media screen and (min-width: 1280px) {
+					font-size: 1.5rem;
+				}
+
+				.number {
+					font-size: 1.5rem;
+					text-align: center;
+
+					@media screen and (min-width: 1024px) {
+						font-size: 2rem;
+					}
+				}
+			}
+
+			.bg {
+				position: absolute;
+				z-index: -1;
+
+				height: 100%;
+
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+
+	@media screen and (min-width: 768px) {
+		padding: 6rem 5rem;
+	}
+}
+
+.hearts {
+	position: absolute;
+	width: 25%;
+
+	top: 2.5%;
+	right: 2.5%;
+
+	@media screen and (min-width: 768px) {
+		width: 15%;
 	}
 }

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

@@ -1,28 +1,52 @@
-import { Text } from "app/components";
-import { Section } from "app/Symbols";
 import cn from "./Rules.module.scss";
+import clsx from "clsx";
 
-const Rules = ({ rules }) => {
+import RULES from "../../assets/data/rules.json";
+
+import cream_hot_pink from "../../assets/graphics/rules/cream_hot_pink.svg";
+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";
+
+const BACKGROUND_MAP = {
+	0: cream_hot_pink,
+	1: peach_cream,
+	2: pink,
+	3: pink,
+	4: cream,
+	5: peach_cream,
+	6: peach_cream,
+};
+
+const Rules = () => {
 	return (
-		<Section id="s-rules" className={cn.container}>
-			<h2>Rules</h2>
-			{rules.map((rule, i) => (
-				<div key={rule} className="flex row left top spaceChildrenSmall">
-					<Text
-						size="L"
-						style={{
-							minWidth: "48px",
-							display: "block",
-							color: "var(--deepBlue)",
-							fontWeight: "bold",
-						}}
-					>
-						{i + 1}
-					</Text>
-					<Text>{rule}</Text>
-				</div>
-			))}
-		</Section>
+		<div className={cn.container} id="s-rules">
+			<h2 className={cn.heading}>Rules</h2>
+
+			<div className={cn.rules}>
+				{RULES.map((rule, index) => (
+					<div className={cn.rule} key={rule}>
+						<div className={cn.text}>
+							<span className={cn.number}>{index + 1}.</span>
+							<span>{rule}</span>
+						</div>
+
+						<img
+							src={BACKGROUND_MAP[index]}
+							alt=""
+							className={cn.bg}
+						/>
+					</div>
+				))}
+			</div>
+
+			<img
+				src={hearts}
+				alt=""
+				className={clsx(cn.hearts, "wait flopR")}
+			/>
+		</div>
 	);
 };