Updated Sponsor Styling (#154)

* Updated Sponsor Styling * Updated Sponsors.tsx to use Bootstrap's Container component, Aligned implementation with project's mobile-first design approach * changed import for more compatibility with Next and removed redundant code * Merge main into feature/sponsors branch * Create Clubs file and update sponsors styling * Minor Fix * constrain sponsors and clubs assets to width 500px and clean up code Co-authored-by: Albert Wang <[email protected]>
HackAtUCI · Nov 2, 2024 · b32461f · b32461f
1 parent bb105b5
commit b32461f
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 66 deletions.
diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
@@ -4,6 +4,7 @@ import Landing from "./sections/Landing";
 import GetInvolved from "./sections/GetInvolved";
 import Sponsors from "./sections/Sponsors";
 import FAQ from "./sections/FAQ";
+import Clubs from "./sections/Clubs/Clubs";
 
 import styles from "./page.module.scss";
 
@@ -12,7 +13,8 @@ const Home = () => {
 		<div className={styles.home}>
 			<Landing />
 			<GetInvolved />
-			{/* <Sponsors /> */}
+			<Sponsors />
+			<Clubs />
 			<FAQ />
 		</div>
 	);

diff --git a/apps/site/src/app/(home)/sections/Clubs/Clubs.module.scss b/apps/site/src/app/(home)/sections/Clubs/Clubs.module.scss
@@ -0,0 +1,50 @@
+@use "zothacks-theme" as theme;
+@use "bootstrap-utils" as utils;
+
+.title {
+	text-align: center;
+	color: theme.$white;
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 48px;
+
+	@include utils.media-breakpoint-up(md) {
+		font-size: 3rem;
+	}
+}
+
+.logos {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: 2rem;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 1rem;
+}
+
+.logo {
+	background-color: rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: transform 0.3s ease;
+	aspect-ratio: 16 / 9;
+	width: 300px;
+	height: 200px;
+
+	&:hover {
+		transform: scale(1.05);
+		background-color: rgba(255, 255, 255, 0.15);
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		padding: 1rem;
+	}
+}
diff --git a/apps/site/src/app/(home)/sections/Clubs/Clubs.tsx b/apps/site/src/app/(home)/sections/Clubs/Clubs.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-img-element */
+import Container from "react-bootstrap/Container";
+import imageUrlBuilder from "@sanity/image-url";
+import { client } from "@/lib/sanity/client";
+import { getClubs } from "./getClubs";
+import styles from "./Clubs.module.scss";
+
+const builder = imageUrlBuilder(client);
+
+const Clubs = async () => {
+	const clubs = await getClubs();
+
+	return (
+		<Container as="section">
+			<h2 className={styles.title}>PARTNER CLUBS</h2>
+			<div className={styles.logos}>
+				{clubs.clubs.map(({ _key, name, url, logo }) => (
+					<a
+						key={_key}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className={styles.logo}
+					>
+						<img
+							src={builder.image(logo).width(500).format("webp").url()}
+							alt={name + " logo"}
+						/>
+					</a>
+				))}
+			</div>
+		</Container>
+	);
+};
+
+export default Clubs;
diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss
@@ -1,68 +1,72 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
 
-.container {
-	padding-top: 6rem;
-	padding-bottom: 6rem;
-}
-
 .title {
 	text-align: center;
+	color: theme.$white;
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 48px;
+
+	@include utils.media-breakpoint-up(md) {
+		font-size: 3rem;
+	}
 }
 
-.clipboard {
-	position: relative;
-	padding: 64px 32px 48px 32px;
-	min-height: 512px;
-	width: 80%;
-	margin: 0 auto;
-	border: 20px solid #aa703c;
-	border-radius: 100px;
-	background: #ffffff;
+.logos {
 	display: flex;
 	flex-direction: column;
-	align-items: stretch;
-
-	@include utils.media-breakpoint-up(sm) {
-		padding: 32px 32px 48px 32px;
-	}
+	align-items: center;
+	gap: 1.5rem;
+	max-width: 1200px;
+	margin: 0 auto;
 }
 
-.clip {
-	height: 192px;
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%) rotate(90deg);
-	top: -105px;
+.logo {
+	background-color: theme.$white;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: transform 0.3s ease;
+	aspect-ratio: 1 / 1;
+	width: 100%;
 
-	@include utils.media-breakpoint-up(sm) {
-		height: 256px;
-		top: 50%;
-		transform: translateY(-50%);
-		left: -85px;
+	&:hover {
+		transform: scale(1.05);
 	}
-}
 
-.logos {
-	flex-grow: 1;
-	display: grid;
-	align-items: center;
-	align-content: center;
-	justify-content: center;
-	grid-template-columns: repeat(auto-fill, 192px);
-	gap: 32px;
+	max-width: 250px;
 
-	@include utils.media-breakpoint-up(sm) {
-		padding-left: 24px;
-		grid-template-columns: repeat(auto-fill, 256px);
+	&.gold {
+		max-width: 450px;
 	}
 
 	@include utils.media-breakpoint-up(md) {
-		grid-template-columns: repeat(auto-fill, 384px);
-		padding-left: 48px;
+		max-width: 350px;
+
+		&.gold {
+			max-width: 550px;
+		}
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		padding: 2rem;
 	}
 }
 
-.logo {
-	width: 100%;
+.placeholderLogo {
+	font-weight: bold;
+	color: theme.$black;
+	text-align: center;
+	padding: 0.5rem;
+	font-size: 0.8rem;
+
+	@include utils.media-breakpoint-up(md) {
+		font-size: 1rem;
+		padding: 1rem;
+	}
 }
diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx
@@ -1,33 +1,35 @@
 /* eslint-disable @next/next/no-img-element */
+import Container from "react-bootstrap/Container";
+import imageUrlBuilder from "@sanity/image-url";
+import { client } from "@/lib/sanity/client";
 import { getSponsors } from "./getSponsors";
 import styles from "./Sponsors.module.scss";
-import { client } from "@/lib/sanity/client";
-import imageUrlBuilder from "@sanity/image-url";
-import clip from "./clip.svg";
 
 const builder = imageUrlBuilder(client);
 
 const Sponsors = async () => {
 	const sponsors = await getSponsors();
 
 	return (
-		<section className={styles.container}>
-			<div className={styles.clipboard}>
-				<img className={styles.clip} src={clip.src} alt="" />
-				<h2 className={styles.title}>Sponsors</h2>
-				<div className={styles.logos}>
-					{sponsors.sponsors.map(({ _key, name, url, logo }) => (
-						<a key={_key} href={url} target="_blank" rel="noopener noreferrer">
-							<img
-								className={styles.logo}
-								src={builder.image(logo).format("webp").url()}
-								alt={name + " logo"}
-							/>
-						</a>
-					))}
-				</div>
+		<Container as="section">
+			<h2 className={styles.title}>SPONSORS</h2>
+			<div className={styles.logos}>
+				{sponsors.sponsors.map(({ _key, name, url, logo, tier }) => (
+					<a
+						key={_key}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className={`${styles.logo} ${styles[tier]}`}
+					>
+						<img
+							src={builder.image(logo).width(500).format("webp").url()}
+							alt={name + " logo"}
+						/>
+					</a>
+				))}
 			</div>
-		</section>
+		</Container>
 	);
 };