diff --git a/src/app/pages/Designathons/Designathon24/assets/FOF.png b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/FOF.png
similarity index 100%
rename from src/app/pages/Designathons/Designathon24/assets/FOF.png
rename to src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/FOF.png
diff --git a/src/app/pages/Designathons/Designathon24/assets/balsamiq.png b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/balsamiq.png
similarity index 100%
rename from src/app/pages/Designathons/Designathon24/assets/balsamiq.png
rename to src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/balsamiq.png
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ctc.png b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ctc.png
new file mode 100644
index 00000000..b03ac230
Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ctc.png differ
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/double_heart.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/double_heart.svg
new file mode 100644
index 00000000..6081cdbf
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/double_heart.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/heart.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/heart.svg
new file mode 100644
index 00000000..1cf3d0fe
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/heart.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ml_squiggle.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ml_squiggle.svg
new file mode 100644
index 00000000..4a0d8891
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/ml_squiggle.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/mr_squiggle.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/mr_squiggle.svg
new file mode 100644
index 00000000..ffd8ab43
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/mr_squiggle.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/notion.png b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/notion.png
similarity index 100%
rename from src/app/pages/Designathons/Designathon24/assets/notion.png
rename to src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/notion.png
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/odit.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/odit.svg
new file mode 100644
index 00000000..da9bcc98
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/odit.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tape.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tape.svg
new file mode 100644
index 00000000..da6196a1
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tape.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_down.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_down.svg
new file mode 100644
index 00000000..2d8234f9
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_down.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_up.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_up.svg
new file mode 100644
index 00000000..2705fe47
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tilt_up.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tr_squiggle.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tr_squiggle.svg
new file mode 100644
index 00000000..2cae9802
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/tr_squiggle.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/vgdc.png b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/vgdc.png
new file mode 100644
index 00000000..985a8683
Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/graphics/sponsors/vgdc.png differ
diff --git a/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss b/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss
index 3c9e3cde..89e9af3d 100644
--- a/src/app/pages/Designathons/Designathon24/components/Sponsors/Sponsors.module.scss
+++ b/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%;
+}
diff --git a/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx b/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx
index 9234c716..995b45ed 100644
--- a/src/app/pages/Designathons/Designathon24/components/Sponsors/index.jsx
+++ b/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 (
+ 
+