2024 Sponsors and Partners (#263)

* Add sponsors

* Update pnpm-lock.yaml

* Add Partners

* Move Sponsors and Partners into separate component

* Move SPFB to top and temporarily make Partners logo more visible

* Remove sponsorship contact email

src/app/components/partners/Partner.jsx

@@ -0,0 +1,9 @@
+const Partner = ({ imgId, imgSrc, url }) => {
+	return (
+		<a href={url} target="_blank" rel="noopener noreferrer">
+			<img id={imgId} className="logo" src={imgSrc} alt={"Sponsor: " + imgId} />
+		</a>
+	);
+};
+
+export default Partner;

src/app/components/partners/Partners.jsx

@@ -0,0 +1,40 @@
+import Partner from "./Partner";
+
+import partners_title from "/assets/images/titles/vh-partners.svg";
+
+import acm from "/assets/images/2024-partners/acm.png";
+import cyber from "/assets/images/2024-partners/cyber.png";
+import design from "/assets/images/2024-partners/design.png";
+import hack from "/assets/images/2024-partners/hack.png";
+import icssc from "/assets/images/2024-partners/icssc.jpg";
+import wics from "/assets/images/2024-partners/wics.png";
+
+import "./Partners.scss";
+
+const Partners = () => {
+	return (
+		<section id="partners">
+			<img className="section-title" src={partners_title} alt="Partners" />
+			<div id="partners-container">
+				<div className="logo-wrapper medium">
+					<Partner
+						imgId="design"
+						imgSrc={design}
+						url="https://designatuci.com/"
+					/>
+					<Partner imgId="acm" imgSrc={acm} url="https://www.acm-uci.org/" />
+					<Partner imgId="cyber" imgSrc={cyber} url="https://cyberuci.com/" />
+					<Partner
+						imgId="icssc"
+						imgSrc={icssc}
+						url="https://studentcouncil.ics.uci.edu/"
+					/>
+					<Partner imgId="wics" imgSrc={wics} url="https://wics.ics.uci.edu/" />
+					<Partner imgId="hack" imgSrc={hack} url="https://hack.ics.uci.edu/" />
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Partners;

src/app/components/partners/Partners.scss

@@ -0,0 +1,57 @@
+@import "src/globals/vh-styles.scss";
+
+#partners {
+	margin-top: 50px;
+
+	.section-title {
+		height: 250px;
+		@media screen and (max-width: $break-medium) {
+			height: 35vw;
+			max-height: 200px;
+			margin: 20px auto;
+		}
+	}
+
+	#partners-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+		background-color: #a8acf977;
+		margin: 20px 60px;
+		padding: 15px 20px;
+		border-radius: 20px;
+		color: #4767b1;
+
+		@media screen and (max-width: $break-small) {
+			margin: 10px 30px;
+			padding: 5px 20px 15px;
+		}
+
+		.logo-wrapper .logo {
+			margin: 30px;
+			transition: all 0.2s ease;
+		}
+
+		.logo-wrapper .logo:hover {
+			cursor: pointer;
+			transform: scale(1.08);
+			height: auto;
+		}
+
+		.medium .logo {
+			max-width: 250px;
+			max-height: 100px;
+		}
+
+		.medium .logo,
+		.large .logo,
+		.largest .logo {
+			@media screen and (max-width: $break-medium) {
+				max-width: 90%;
+				max-height: 75px;
+				margin: 10px;
+			}
+		}
+	}
+}

src/app/components/sponsors/Sponsor.jsx

@@ -0,0 +1,9 @@
+const Sponsor = ({ imgId, imgSrc, url }) => {
+	return (
+		<a href={url} target="_blank" rel="noopener noreferrer">
+			<img id={imgId} className="logo" src={imgSrc} alt={"Sponsor: " + imgId} />
+		</a>
+	);
+};
+
+export default Sponsor;

src/app/components/sponsors/Sponsors.jsx

@@ -0,0 +1,59 @@
+import Sponsor from "./Sponsor";
+
+import sponsors_title from "/assets/images/titles/vh-sponsors.svg";
+
+import odit from "/assets/images/2024-sponsors/odit.png";
+import melissa from "/assets/images/2024-sponsors/melissa.png";
+import antrepreneur from "/assets/images/2024-sponsors/antrepreneur-center.png";
+import oai from "/assets/images/2024-sponsors/office-access-inclusion.png";
+import spfb from "/assets/images/2024-sponsors/spfb.png";
+
+import "./Sponsors.scss";
+
+const CORPORATE_EMAIL = "[email protected]";
+
+const Sponsors = () => {
+	return (
+		<section id="sponsors">
+			<img className="section-title" src={sponsors_title} alt="Sponsor" />
+			<div id="sponsors-container">
+				<div className="logo-wrapper medium">
+					<Sponsor
+						imgId="spfb"
+						imgSrc={spfb}
+						url="https://asuci.uci.edu/president/spfb/"
+					/>
+				</div>
+				<div className="logo-wrapper largest">
+					<Sponsor imgId="odit" imgSrc={odit} url="https://odit.uci.edu/" />
+				</div>
+				<div className="logo-wrapper large">
+					<Sponsor
+						imgId="melissa"
+						imgSrc={melissa}
+						url="https://www.melissa.com/"
+					/>
+				</div>
+				<div className="logo-wrapper medium">
+					<Sponsor
+						imgId="antrepreneur"
+						imgSrc={antrepreneur}
+						url="https://antrepreneur.uci.edu/"
+					/>
+				</div>
+				<div className="logo-wrapper medium">
+					<Sponsor imgId="oai" imgSrc={oai} url="https://oai.tech.uci.edu/" />
+				</div>
+			</div>
+			{/* <p className="sponsor-contact-us">
+				Join our movement, contact us at&nbsp;
+				<a href={`mailto:${CORPORATE_EMAIL}`} target="_top">
+					{CORPORATE_EMAIL}
+				</a>
+				.
+			</p> */}
+		</section>
+	);
+};
+
+export default Sponsors;

src/app/components/sponsors/Sponsors.scss

@@ -0,0 +1,67 @@
+@import "src/globals/vh-styles.scss";
+
+#sponsors {
+	margin-top: 50px;
+	color: $darkPurple;
+	font-family: "Varela", sans-serif;
+
+	.section-title {
+		height: 250px;
+		@media screen and (max-width: $break-medium) {
+			height: 35vw;
+			max-height: 200px;
+			margin: 20px auto;
+		}
+	}
+
+	#sponsors-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+		background-color: #a8acf977;
+		margin: 20px 60px;
+		padding: 15px 20px;
+		border-radius: 20px;
+		color: #4767b1;
+
+		@media screen and (max-width: $break-small) {
+			margin: 10px 30px;
+			padding: 5px 20px 20px;
+		}
+
+		.logo-wrapper .logo {
+			margin: 30px;
+			transition: all 0.2s ease;
+		}
+
+		.logo-wrapper .logo:hover {
+			cursor: pointer;
+			transform: scale(1.08);
+			height: auto;
+		}
+
+		.largest .logo {
+			max-width: 400px;
+		}
+
+		.large .logo {
+			max-width: 300px;
+		}
+
+		.medium .logo {
+			max-width: 250px;
+			max-height: 100px;
+		}
+
+		.medium .logo,
+		.large .logo,
+		.largest .logo {
+			@media screen and (max-width: $break-medium) {
+				max-width: 90%;
+				max-height: 75px;
+				margin: 10px;
+			}
+		}
+	}
+} // END SPONSORS

src/app/views/home/Home.jsx

@@ -1,5 +1,6 @@
 import FAQs from "src/app/components/faqs/FAQs";
-import { VenusButton } from "src/app/components";
+import Sponsors from "src/app/components/sponsors/Sponsors";
+import Partners from "src/app/components/partners/Partners";
 
 import vhTitle from "/assets/images/titles/vh-title-launch.svg";
 import about_title from "/assets/images/titles/vh-about.svg";
@@ -9,7 +10,6 @@ import "./Home.scss";
 
 const VH_DATE = "May 24 - 26, 2024";
 const CONTACT_EMAIL = "[email protected]";
-// const CORPORATE_EMAIL = '[email protected]';
 
 const Home = () => {
 	return (
@@ -35,6 +35,8 @@ const Home = () => {
 					<p id="tagline">UC Irvine&apos;s largest women-centric hackathon</p>
 				</div>
 			</section>
+
+			{/* ABOUT **********************/}
 			<section id="about">
 				<img className="section-title" src={about_title} alt="About" />
 				<div id="about-text-container">
@@ -73,9 +75,13 @@ const Home = () => {
 					</p>
 				</div>
 			</section>
+
+			{/* FAQ ************************/}
 			<section id="faq">
 				<img className="section-title" src={faq_title} alt="FAQ" />
-				<FAQs />
+				<div id="faq-container">
+					<FAQs />
+				</div>
 				<p id="faq-contact-us">
 					Additional logistic questions? Contact us at&nbsp;
 					<a href={`mailto:${CONTACT_EMAIL}`} target="_top">
@@ -84,6 +90,8 @@ const Home = () => {
 					.
 				</p>
 			</section>
+			<Sponsors />
+			<Partners />
 		</div>
 	);
 };