feat: update sponsors (#88)

Co-authored-by: Ryan Yang <[email protected]>

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

@@ -1,17 +1,20 @@
+
+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,
 	SectionNavigation,
 	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>
 );
 

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;
-			}
-		}
-	}
 }

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;
+		}
+	}
+}

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 };

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";