diff --git a/public/assets/img/logos/sponsors/activeCampaign.png b/public/assets/img/logos/sponsors/activeCampaign.png
new file mode 100644
index 00000000..1e5b3746
Binary files /dev/null and b/public/assets/img/logos/sponsors/activeCampaign.png differ
diff --git a/public/assets/img/logos/sponsors/citadel.png b/public/assets/img/logos/sponsors/citadel.png
new file mode 100644
index 00000000..98951086
Binary files /dev/null and b/public/assets/img/logos/sponsors/citadel.png differ
diff --git a/public/assets/img/logos/sponsors/CMEGroup.jpg b/public/assets/img/logos/sponsors/cmegroup.jpg
similarity index 100%
rename from public/assets/img/logos/sponsors/CMEGroup.jpg
rename to public/assets/img/logos/sponsors/cmegroup.jpg
diff --git a/public/assets/img/logos/sponsors/drw.png b/public/assets/img/logos/sponsors/drw.png
new file mode 100644
index 00000000..4cb7b42a
Binary files /dev/null and b/public/assets/img/logos/sponsors/drw.png differ
diff --git a/public/assets/img/logos/sponsors/hrt.png b/public/assets/img/logos/sponsors/hrt.png
new file mode 100644
index 00000000..ab988884
Binary files /dev/null and b/public/assets/img/logos/sponsors/hrt.png differ
diff --git a/public/assets/img/logos/sponsors/omc.png b/public/assets/img/logos/sponsors/omc.png
new file mode 100644
index 00000000..5d613bd1
Binary files /dev/null and b/public/assets/img/logos/sponsors/omc.png differ
diff --git a/public/assets/img/logos/sponsors/twoSigma.png b/public/assets/img/logos/sponsors/twoSigma.png
new file mode 100644
index 00000000..0111cac4
Binary files /dev/null and b/public/assets/img/logos/sponsors/twoSigma.png differ
diff --git a/src/components/Sponsor.js b/src/components/Sponsor.js
new file mode 100644
index 00000000..3173f290
--- /dev/null
+++ b/src/components/Sponsor.js
@@ -0,0 +1,17 @@
+import styles from "@/styles/Sponsor.module.css";
+
+const Sponsor = ({ sponsor, url, tier }) => {
+ const link = url
+ ? () => {
+ window.open(url, "_blank").focus();
+ }
+ : null;
+
+ return (
+
+
+
+ )
+}
+
+export default Sponsor;
\ No newline at end of file
diff --git a/src/components/SponsorsSection.js b/src/components/SponsorsSection.js
new file mode 100644
index 00000000..bafca302
--- /dev/null
+++ b/src/components/SponsorsSection.js
@@ -0,0 +1,83 @@
+import Sponsor from "./Sponsor";
+import TabletComponent from "./TabletComponent";
+import styles from "@/styles/Home.module.css";
+
+const SponsorsSection = () => {
+ return (
+
+
Our Sponsors
+
+ If you are interested in sponsoring us, please email{" "}
+
+ contact@illinoiswcs.org
+
+ !
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SponsorsSection;
diff --git a/src/components/TabletComponent.js b/src/components/TabletComponent.js
new file mode 100644
index 00000000..6ad6d525
--- /dev/null
+++ b/src/components/TabletComponent.js
@@ -0,0 +1,17 @@
+import styles from "@/styles/TabletComponent.module.css";
+
+const TabletComponent = ({children}) => {
+ return (
+
+ );
+};
+
+export default TabletComponent;
+
diff --git a/src/pages/index.js b/src/pages/index.js
index eaf14f66..1a726383 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,13 +2,14 @@ import Head from "next/head";
import React from "react";
import ComputerWindow from "@/components/ComputerWindow";
import styles from "@/styles/Home.module.css";
-import { Inter } from "next/font/google";
+import {Inter} from "next/font/google";
import StayInTouchSection from "@/components/StayInTouchSection";
import UpcomingEventsSection from "@/components/UpcomingEventsSection";
import AboutUsSection from "@/components/AboutUsSection";
+import SponsorsSection from "@/components/SponsorsSection";
import OpenOffice from "./openoffice";
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({subsets: ["latin"]});
export default function Home() {
return (
@@ -21,7 +22,7 @@ export default function Home() {
- Illinois Women in Computer Science
+ Illinois Women in Computer Science
@@ -35,6 +36,7 @@ export default function Home() {
+
>
);
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index d34bcb41..7d21bd4b 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -12,6 +12,10 @@
}
}
+.title {
+ text-align: center;
+}
+
.description {
display: inherit;
justify-content: inherit;
@@ -118,6 +122,8 @@
.sectionContainer {
width: 80svw;
margin-top: 4rem;
+ display: flex;
+ flex-direction: column;
}
.header {
@@ -246,6 +252,40 @@
grid-column: 5 / 7;
}
+.sponsorsSection {
+ margin-top: 30px;
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem 3rem;
+ position: relative;
+ width: fit-content;
+ background-image: url("/assets/design-vectors/grid.svg");
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.sponsorCall {
+ margin-top: 30px;
+ align-self: center;
+ text-align: center;
+}
+
+.sponsorEmail {
+ text-decoration: underline;
+ text-underline-offset: 5px;
+}
+
+.sponsors {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 0.5rem;
+}
+
.modalSection {
display: flex;
flex-direction: column;
@@ -401,6 +441,10 @@
display: flex;
flex-direction: column;
}
+
+ .sponsorsSection {
+ padding: 0.5rem 0.5rem;
+ }
}
/* Tablet and Smaller Desktop */
diff --git a/src/styles/Sponsor.module.css b/src/styles/Sponsor.module.css
new file mode 100644
index 00000000..3fc0ea54
--- /dev/null
+++ b/src/styles/Sponsor.module.css
@@ -0,0 +1,43 @@
+.container {
+ display: flex;
+ padding: 0.5rem;
+ width: 9rem;
+ height: 8rem;
+ border-radius: 1rem;
+ background-color: #ffffff;
+ position: relative;
+ margin: 1rem;
+ cursor: pointer;
+}
+
+.container::after {
+ content: "";
+ position: absolute;
+ right: -1rem;
+ top: -1rem;
+ border-radius: 100%;
+ width: 3rem;
+ height: 3rem;
+}
+
+.image {
+ max-width: 8rem;
+ max-height: 7rem;
+ object-fit: contain;
+}
+
+.platinum::after {
+ background-color: #337ab7;
+}
+
+.gold::after {
+ background-color: #f0ad4e;
+}
+
+.silver::after {
+ background-color: #808080;
+}
+
+.bronze::after {
+ background-color: #d9534f;
+}
diff --git a/src/styles/TabletComponent.module.css b/src/styles/TabletComponent.module.css
new file mode 100644
index 00000000..6e673bd6
--- /dev/null
+++ b/src/styles/TabletComponent.module.css
@@ -0,0 +1,64 @@
+.container {
+ background-color: white;
+ width: 1000px;
+ height: fit-content;
+ border-radius: 25px;
+ border: 10px solid #ff7cc0;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ overflow: hidden;
+ position: relative;
+}
+
+.container img {
+ height: 475px;
+}
+
+.notch {
+ width: 30px;
+ height: 125px;
+ border-radius: 63px;
+ background-color: #ff7cc0;
+ position: absolute;
+}
+
+.border {
+ width: inherit;
+ background-color:#ffcee7;
+ padding: 1.5rem;
+}
+
+.body {
+ width: 100%;
+ height: 100%;
+ background-color: #ffe3f2;
+}
+
+.child {
+ width: 100%;
+}
+
+@media (max-width: 1120px) {
+ .container {
+ flex-direction: column;
+ }
+
+ .notch {
+ width: 125px;
+ height: 30px;
+ }
+}
+
+@media (max-width: 700px) {
+ .container {
+ width: 300px;
+ }
+}
+
+@media (min-width: 701px) and (max-width: 1120px) {
+ .container {
+ width: 600px;
+ }
+}