Add Sponsor Section (IllinoisWCS#269)

* start tablet component and sponsor section

* add Sponsor component and style Tablet component

* update mobile styles

* fix mobile styles

* adjust sponsor sizes and seperate tiers into seperate rows

* add sponsor links

* Center tablet, reduce border radius

---------

Co-authored-by: neha-vard <neha.vard@gmail.com>

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 (
+    <div onClick={link} className={`${styles.container} ${styles[tier]}`}>
+      <img className={styles.image} src={`assets/img/logos/sponsors/${sponsor}`} />
+    </div>
+  )
+}
+
+export default Sponsor;

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 (
+    <div className={styles.sectionContainer}>
+      <h2 className={styles.header}>Our Sponsors</h2>
+      <h3 className={styles.sponsorCall}>
+        If you are interested in sponsoring us, please email{" "}
+        <a
+          className={styles.sponsorEmail}
+          href="mailto:contact@illinoiswcs.org"
+        >
+          contact@illinoiswcs.org
+        </a>
+        !
+      </h3>
+      <div className={styles.sponsorsSection}>
+        <TabletComponent>
+          <div>
+            <div className={styles.sponsors}>
+              <Sponsor
+                sponsor="google.png"
+                url="https://careers.google.com/"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="crowdstrike.png"
+                url="https://www.crowdstrike.com/careers/"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="cmegroup.jpg"
+                url="https://www.cmegroup.com/careers.html"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="twoSigma.png"
+                url="https://www.twosigma.com/careers/"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="drw.png"
+                url="https://drw.com/work-at-drw"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="omc.png"
+                url="https://www.oldmissioncapital.com/careers/"
+                tier="gold"
+              />
+              <Sponsor
+                sponsor="hrt.png"
+                url="https://www.hudsonrivertrading.com/careers//"
+                tier="gold"
+              />
+            </div>
+            <div className={styles.sponsors}>
+              <Sponsor
+                sponsor="bloomberg.png"
+                url="https://www.bloomberg.com/company/careers/early-career/"
+                tier="bronze"
+              />
+              <Sponsor
+                sponsor="activeCampaign.png"
+                url="https://www.activecampaign.com/about/careers"
+                tier="bronze"
+              />
+              <Sponsor
+                sponsor="citadel.png"
+                url="https://www.citadel.com/careers/"
+                tier="bronze"
+              />
+            </div>
+          </div>
+        </TabletComponent>
+      </div>
+    </div>
+  );
+};
+
+export default SponsorsSection;

src/components/TabletComponent.js

@@ -0,0 +1,17 @@
+import styles from "@/styles/TabletComponent.module.css";
+
+const TabletComponent = ({children}) => {
+  return (
+     <div className={`${styles.container}`}>
+        <div className={`${styles.notch}`}></div>
+        <div className={`${styles.border}`}>
+          <div className={styles.body}>
+            <div className={styles.child}>{children}</div>
+          </div>
+        </div>
+    </div>
+  );
+};
+
+export default TabletComponent;
+

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() {
       </Head>
 
       <main className={`${styles.main} ${inter.className}`}>
-        <h1>Illinois Women in Computer Science</h1>
+        <h1 className={styles.title}>Illinois Women in Computer Science</h1>
         <div className={`${styles.windowContainer}`}>
           <div className={`${styles.windowGrid}`}>
             <ComputerWindow>
@@ -35,6 +36,7 @@ export default function Home() {
         <AboutUsSection />
         <UpcomingEventsSection />
         <StayInTouchSection />
+        <SponsorsSection />
       </main>
     </>
   );

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 */

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

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