Create Clubs file and update sponsors styling

HackAtUCI · Nov 1, 2024 · 926b194 · 926b194
1 parent 23446a7
commit 926b194
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 9 deletions.
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 { getClubs } from "./getClubs";
+import styles from "./Clubs.module.scss";
+import { client } from "@/lib/sanity/client";
+import imageUrlBuilder from "@sanity/image-url";
+import Container from "react-bootstrap/Container";
+
+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).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
@@ -5,8 +5,8 @@
 	text-align: center;
 	color: theme.$white;
 	font-size: 2rem;
-	font-weight: bold;
-	margin-bottom: 3rem;
+	font-weight: 600;
+	margin-bottom: 48px;
 
 	@include utils.media-breakpoint-up(md) {
 		font-size: 3rem;
@@ -29,25 +29,33 @@
 	align-items: center;
 	justify-content: center;
 	transition: transform 0.3s ease;
-	aspect-ratio: 16 / 9;
+	aspect-ratio: 1 / 1;
 	width: 100%;
 
 	&:hover {
 		transform: scale(1.05);
 	}
 
-	// Default size (bronze tier)
-	max-width: 500px;
+	max-width: 250px;
 
-	// Gold tier sizing
 	&.gold {
-		max-width: 700px;
+		max-width: 450px;
+	}
+
+	// Larger sizes for desktop
+	@include utils.media-breakpoint-up(md) {
+		max-width: 350px;
+
+		&.gold {
+			max-width: 550px;
+		}
 	}
 
 	img {
-		max-width: 95%;
-		max-height: 95%;
+		width: 100%;
+		height: 100%;
 		object-fit: contain;
+		padding: 2rem;
 	}
 }
 

diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx
@@ -4,6 +4,7 @@ import styles from "./Sponsors.module.scss";
 import { client } from "@/lib/sanity/client";
 import imageUrlBuilder from "@sanity/image-url";
 import Container from "react-bootstrap/Container";
+import Clubs from "../Clubs/Clubs";
 
 const builder = imageUrlBuilder(client);
 
@@ -29,6 +30,7 @@ const Sponsors = async () => {
 					</a>
 				))}
 			</div>
+			<Clubs />
 		</Container>
 	);
 };