From 8dcd9359c2c37ce1106dc40b660d741bd87c5c3e Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Sat, 6 Apr 2024 15:15:09 -0700
Subject: [PATCH] feat: update sponsors (#88)

Co-authored-by: Ryan Yang <ryanqyang@gmail.com>
---
 .../Designathon24/Designathon24.js            | 45 +++-------------
 .../Designathon24/Designathon24.module.scss   | 34 ------------
 .../components/Sponsors/Sponsors.module.scss  | 52 +++++++++++++++++++
 .../components/Sponsors/index.jsx             | 50 ++++++++++++++++++
 .../Designathon24/components/index.js         |  1 +
 5 files changed, 110 insertions(+), 72 deletions(-)
 create mode 100644 src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss
 create mode 100644 src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx

diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.js b/src/app/pages/Designathons/Designathon24/Designathon24.js
index dfd66bd2..c603c823 100644
--- a/src/app/pages/Designathons/Designathon24/Designathon24.js
+++ b/src/app/pages/Designathons/Designathon24/Designathon24.js
@@ -1,10 +1,12 @@
+
+import EVENTS_2024 from "assets/data/designathon/2024/events.json";
+
 import { Section } from "app/Symbols";
 // import EVENTS_2024 from "assets/data/designathon/2024/events.json";
+
 import PRIZES_2024 from "assets/data/designathon/2024/prizes.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 {
 	About,
 	Prizes,
@@ -12,6 +14,7 @@ import {
 	FAQ,
 	Rules,
 	Speakers,
+	Sponsors,
 } from "./components";
 import Schedule from "./components/Schedule";
 import { Splash } from "./components/Splash/Splash";
@@ -52,41 +55,7 @@ const Designathon24 = () => (
 
 		<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>
+		<Sponsors />
 	</main>
 );
 
diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.module.scss b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
index 47051652..7b17995d 100644
--- a/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
+++ b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
@@ -101,38 +101,4 @@
 			}
 		}
 	}
-
-	& .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;
-			}
-		}
-	}
 }
diff --git a/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss b/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss
new file mode 100644
index 00000000..3c9e3cde
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss
@@ -0,0 +1,52 @@
+.sponsors {
+	position: relative;
+	background-color: var(--des24-black);
+	background-image: url("../../assets/graphics/background/dark_splash.svg");
+	background-repeat: repeat-y;
+	background-size: 100% auto;
+
+	.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;
+		}
+	}
+
+	.content {
+		max-width: 1280px;
+	}
+
+	& .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;
+		}
+	}
+}
diff --git a/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx b/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx
new file mode 100644
index 00000000..9234c716
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx
@@ -0,0 +1,50 @@
+import cn from "./Sponsors.module.scss";
+import { Section } from "app/Symbols";
+
+import FOF from "../../assets/FOF.png";
+import notion from "../../assets/notion.png";
+import balsamiq from "../../assets/balsamiq.png";
+
+const Sponsors = () => {
+	return (
+		<div className={cn.sponsors} id="s-sponsors">
+			<Section>
+				<div className={cn.content}>
+					<h2 className={cn.heading}>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>
+				</div>
+			</Section>
+		</div>
+	);
+};
+
+export { Sponsors };
diff --git a/src/app/pages/Designathons/Designathon24/components/index.js b/src/app/pages/Designathons/Designathon24/components/index.js
index bf528cb0..4fb6f295 100644
--- a/src/app/pages/Designathons/Designathon24/components/index.js
+++ b/src/app/pages/Designathons/Designathon24/components/index.js
@@ -6,3 +6,4 @@ export * from "./Rules/Rules";
 export * from "./Timer";
 export * from "./WinnerShowcase";
 export * from "./Speakers/Speakers";
+export * from "./Sponsors";