Updated Sponsor Styling

HackAtUCI · Sep 30, 2024 · d1be77e · d1be77e
1 parent 1dec1b6
commit d1be77e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 54 deletions.
diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
@@ -12,9 +12,9 @@ const Home = () => {
 	return (
 		<div className={styles.home}>
 			<Landing />
+			<Sponsors />
 			{/* <Intro />
 			<Mentor />
-			<Sponsors />
 			<FAQ /> */}
 		</div>
 	);

diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.module.scss
@@ -8,61 +8,68 @@
 
 .title {
 	text-align: center;
-}
-
-.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;
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
+	color: theme.$white;
+	font-size: 3rem;
+	font-weight: bold;
+	margin-bottom: 3rem;
 
-	@include utils.media-breakpoint-up(sm) {
-		padding: 32px 32px 48px 32px;
+	@include utils.media-breakpoint-down(sm) {
+		font-size: 2rem;
 	}
 }
 
-.clip {
-	height: 192px;
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%) rotate(90deg);
-	top: -105px;
-
-	@include utils.media-breakpoint-up(sm) {
-		height: 256px;
-		top: 50%;
-		transform: translateY(-50%);
-		left: -85px;
-	}
+.logos {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 1.5rem;
+	max-width: 1200px;
+	margin: 0 auto;
 }
 
-.logos {
-	flex-grow: 1;
-	display: grid;
+.logo {
+	width: calc(25% - 1.5rem);
+	aspect-ratio: 16 / 9;
+	background-color: theme.$white;
+	border-radius: 8px;
+	display: flex;
 	align-items: center;
-	align-content: center;
 	justify-content: center;
-	grid-template-columns: repeat(auto-fill, 192px);
-	gap: 32px;
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: scale(1.05);
+	}
 
-	@include utils.media-breakpoint-up(sm) {
-		padding-left: 24px;
-		grid-template-columns: repeat(auto-fill, 256px);
+	@include utils.media-breakpoint-down(md) {
+		width: calc(33.333% - 1.5rem);
 	}
 
-	@include utils.media-breakpoint-up(md) {
-		grid-template-columns: repeat(auto-fill, 384px);
-		padding-left: 48px;
+	@include utils.media-breakpoint-down(sm) {
+		width: calc(50% - 1.5rem);
+	}
+
+	img {
+		max-width: 80%;
+		max-height: 80%;
+		object-fit: contain;
 	}
 }
 
-.logo {
+.placeholderLogo {
 	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	color: theme.$black;
+	text-align: center;
+	padding: 1rem;
+	font-size: 1rem; // Default font size
+
+	@include utils.media-breakpoint-down(sm) {
+		font-size: 0.8rem; // Smaller font size for mobile
+		padding: 0.5rem; // Reduced padding for mobile to accommodate smaller text
+	}
 }
diff --git a/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx b/apps/site/src/app/(home)/sections/Sponsors/Sponsors.tsx
@@ -3,29 +3,55 @@ 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();
 
+	// placeholder sponsors (replace this section)
+	const fakeSponsorNames = [
+		"Ryan Yang",
+		"Ryan Yang",
+		"Ryan Yang",
+		"Ryan Yang",
+		"Ryan Yang",
+	];
+	const fakeSponsorLogos = fakeSponsorNames.map((name, index) => ({
+		_key: `fake-sponsor-${index}`,
+		name,
+		url: "#",
+		logo: {
+			asset: {
+				_ref: "image-placeholder",
+			},
+		},
+	}));
+
+	const allSponsors = [...sponsors.sponsors, ...fakeSponsorLogos];
+
 	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">
+			<h2 className={styles.title}>SPONSORS</h2>
+			<div className={styles.logos}>
+				{allSponsors.map(({ _key, name, url, logo }) => (
+					<a
+						key={_key}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className={styles.logo}
+					>
+						{logo.asset._ref === "image-placeholder" ? (
+							<div className={styles.placeholderLogo}>{name}</div>
+						) : (
 							<img
-								className={styles.logo}
 								src={builder.image(logo).format("webp").url()}
 								alt={name + " logo"}
 							/>
-						</a>
-					))}
-				</div>
+						)}
+					</a>
+				))}
 			</div>
 		</section>
 	);