feat: create updated sponsors section (#91)

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

@@ -9,7 +9,7 @@
 		color: var(--des24-hot-pink);
 		font-size: 3rem;
 		font-weight: 700;
-		margin-bottom: 4rem;
+		margin-bottom: 2rem;
 
 		@media screen and (min-width: 640px) {
 			font-size: 5rem;
@@ -22,31 +22,94 @@
 
 	.content {
 		max-width: 1280px;
+		margin-bottom: 4rem;
 	}
 
 	& .logos {
 		padding-top: 60px;
 		display: grid;
-		column-gap: 80px;
-		row-gap: 80px;
+		column-gap: 40px;
+		row-gap: 40px;
 		width: 100%;
-		grid-template-columns: repeat(1, 1fr);
 		place-content: center;
 
-		@media screen and (min-width: 800px) {
-			max-height: none;
+		@media screen and (min-width: 768px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@media screen and (min-width: 1280px) {
 			grid-template-columns: repeat(3, 1fr);
 		}
 
 		& > div {
+			position: relative;
 			display: grid;
 			place-content: center;
+			aspect-ratio: 1;
+			background-position: center;
+			background-size: contain;
+			background-repeat: no-repeat;
+			max-width: max(50vw, 350px);
+		}
+
+		.tape {
+			position: absolute;
+			top: -5%;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		.mirrorTape {
+			transform: scaleX(-1) translateX(50%);
 		}
 
 		& img {
 			max-height: 200px;
-			width: 100%;
+			width: 80%;
 			object-fit: contain;
+			margin: auto;
 		}
 	}
 }
+
+.decoration {
+	position: absolute;
+
+	max-width: 50%;
+}
+
+.tr {
+	top: 0;
+	right: 0;
+}
+
+.ml {
+	top: 50%;
+	left: 0;
+}
+
+.mr {
+	top: 50%;
+	right: 0;
+}
+
+.headingContainer {
+	position: relative;
+	width: fit-content;
+}
+
+.heart {
+	max-width: 30%;
+	top: -150%;
+
+	@media screen and (min-width: 768px) {
+		top: unset;
+		right: -30%;
+	}
+}
+
+.double_heart {
+	max-width: 40%;
+
+	right: -45%;
+}

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

@@ -1,45 +1,172 @@
 import cn from "./Sponsors.module.scss";
+import clsx from "clsx";
+
 import { Section } from "app/Symbols";
 
-import FOF from "../../assets/FOF.png";
-import notion from "../../assets/notion.png";
-import balsamiq from "../../assets/balsamiq.png";
+import notion from "../../assets/graphics/sponsors/notion.png";
+import FOF from "../../assets/graphics/sponsors/FOF.png";
+import odit from "../../assets/graphics/sponsors/odit.svg";
+import balsamiq from "../../assets/graphics/sponsors/balsamiq.png";
+import vgdc from "../../assets/graphics/sponsors/vgdc.png";
+import ctc from "../../assets/graphics/sponsors/ctc.png";
+
+import tilt_up from "../../assets/graphics/sponsors/tilt_up.svg";
+import tilt_down from "../../assets/graphics/sponsors/tilt_down.svg";
+import tape from "../../assets/graphics/sponsors/tape.svg";
+import tr_squiggle from "../../assets/graphics/sponsors/tr_squiggle.svg";
+import ml_squiggle from "../../assets/graphics/sponsors/ml_squiggle.svg";
+import mr_squiggle from "../../assets/graphics/sponsors/mr_squiggle.svg";
+import heart from "../../assets/graphics/sponsors/heart.svg";
+import double_heart from "../../assets/graphics/sponsors/double_heart.svg";
+
+const SPONSOR_DETAILS = [
+	{
+		id: 1,
+		backgroundImage: tilt_up,
+		link: "https://www.notion.so/",
+		img: notion,
+		alt: "Notion",
+		tape: true,
+	},
+	{
+		id: 2,
+		backgroundImage: tilt_down,
+		link: "https://friends.figma.com/",
+		img: FOF,
+		alt: "Friends of Figma",
+	},
+	{
+		id: 3,
+		backgroundImage: tilt_up,
+		link: "https://odit.uci.edu/",
+		img: odit,
+		alt: "UCI Office of Data and Information Technology",
+		tape: true,
+		mirrorTape: true,
+	},
+];
+
+const PARTNER_DETAILS = [
+	{
+		id: 1,
+		backgroundImage: tilt_down,
+		link: "https://balsamiq.com/",
+		img: balsamiq,
+		alt: "balsamiq",
+	},
+	{
+		id: 2,
+		backgroundImage: tilt_up,
+		link: "https://sites.google.com/uci.edu/vgdcuci",
+		img: vgdc,
+		alt: "Video Game Development Club",
+	},
+	{
+		id: 3,
+		backgroundImage: tilt_up,
+		link: "https://ctc-uci.com/",
+		img: ctc,
+		alt: "Commit the Change",
+		tape: true,
+		mirrorTape: true,
+	},
+];
 
 const Sponsors = () => {
 	return (
 		<div className={cn.sponsors} id="s-sponsors">
+			<img
+				src={tr_squiggle}
+				alt=""
+				className={clsx(cn.tr, cn.decoration)}
+			/>
+			<img
+				src={ml_squiggle}
+				alt=""
+				className={clsx(cn.ml, cn.decoration)}
+			/>
+			<img
+				src={mr_squiggle}
+				alt=""
+				className={clsx(cn.mr, cn.decoration)}
+			/>
+
 			<Section>
 				<div className={cn.content}>
-					<h2 className={cn.heading}>Sponsors</h2>
+					<div className={cn.headingContainer}>
+						<img
+							src={heart}
+							alt=""
+							className={clsx(cn.heart, cn.decoration)}
+						/>
+						<h2 className={cn.heading}>Sponsors</h2>
+					</div>
 					<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"
+						{SPONSOR_DETAILS.map((item) => (
+							<div
+								style={{
+									backgroundImage: `url(${item.backgroundImage})`,
+								}}
+								key={item.alt + item.id}
 							>
-								{" "}
-								<img src={notion} alt="Notion" />
-							</a>
-						</div>
-						<div>
-							<a
-								href="https://balsamiq.com/"
-								target="_blank"
-								rel="noopener noreferrer"
+								{item.tape ? (
+									<img
+										src={tape}
+										alt=""
+										className={clsx(
+											cn.tape,
+											item.mirrorTape && cn.mirrorTape,
+										)}
+									/>
+								) : null}
+								<a
+									href={item.link}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<img src={item.img} alt={item.alt} />
+								</a>
+							</div>
+						))}
+					</div>
+				</div>
+
+				<div className={cn.content}>
+					<div className={cn.headingContainer}>
+						<img
+							src={double_heart}
+							alt=""
+							className={clsx(cn.decoration, cn.double_heart)}
+						/>
+						<h2 className={cn.heading}>Partners</h2>
+					</div>
+					<div className={cn.logos}>
+						{PARTNER_DETAILS.map((item) => (
+							<div
+								style={{
+									backgroundImage: `url(${item.backgroundImage})`,
+								}}
+								key={item.alt + item.id}
 							>
-								<img src={balsamiq} alt="balsamiq" />
-							</a>
-						</div>
+								{item.tape ? (
+									<img
+										src={tape}
+										alt=""
+										className={clsx(
+											cn.tape,
+											item.mirrorTape && cn.mirrorTape,
+										)}
+									/>
+								) : null}
+								<a
+									href={item.link}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<img src={item.img} alt={item.alt} />
+								</a>
+							</div>
+						))}
 					</div>
 				</div>
 			</Section>