From 6eff0e5e83bc5a90b68e461660ee478ae2f7c48f Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Mon, 26 Jan 2026 23:46:43 -0500
Subject: [PATCH] General fix the homepage and the sponsor block overflow on
 mobile

---
 src/components/Link.svelte                 |  3 +-
 src/components/homepage/Sponsors.svelte    | 45 ++++++++++++++--------
 src/components/layout/PageThumbnail.svelte |  8 ++--
 src/components/officehour/OHBlock.svelte   |  2 +-
 src/lib/schemas.ts                         |  9 -----
 src/routes/+layout.server.ts               |  7 +++-
 src/routes/+page.server.ts                 |  8 ++--
 7 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index d3b0e12..2094483 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	let { href, external = false, children } = $props();
+	let { href, external = false, children, class: className = '' } = $props();
 </script>
 
 <a
 	{href}
 	target={external ? '_blank' : undefined}
 	rel={external ? 'noopener noreferrer' : undefined}
+	class={className}
 >
 	{@render children()}
 </a>
diff --git a/src/components/homepage/Sponsors.svelte b/src/components/homepage/Sponsors.svelte
index e9913ed..ed1e773 100644
--- a/src/components/homepage/Sponsors.svelte
+++ b/src/components/homepage/Sponsors.svelte
@@ -12,9 +12,14 @@
 		<h2 id="sponsors-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
 			Our Sponsors
 		</h2>
-		<p class="text-ecsess-200 mx-auto max-w-2xl text-base">
-			We're grateful to our sponsors for their continued support of ECSESS and our community.
+		<p class="text-ecsess-200/90 mx-auto max-w-2xl text-base leading-relaxed md:text-lg">
+			We're grateful to our sponsors for their continued support of ECSESS, our events, activities,
+			and our community.
 		</p>
+		<div
+			class="via-ecsess-150/40 mx-auto mt-6 h-px w-32 bg-linear-to-r from-transparent to-transparent"
+			aria-hidden="true"
+		></div>
 		<div class="mt-6">
 			<Link href="/sponsor">
 				<Button>Become a Sponsor</Button>
@@ -22,26 +27,32 @@
 		</div>
 	</div>
 
-	<!-- Sponsors Flex -->
+	<!-- Sponsors -->
 	{#if sponsors && sponsors.length > 0}
-		<div class="flex flex-wrap justify-center gap-6 lg:gap-8">
-			{#each sponsors as sponsor}
-				<Link href={sponsor.url} external>
-					<div
-						class="bg-ecsess-950 border-ecsess-800 hover:border-ecsess-700 group flex h-32 w-sm items-center justify-center rounded-lg border p-4 transition-all hover:shadow-lg"
+		<div class="mx-auto max-w-6xl">
+			<div class="flex flex-wrap justify-center gap-4 sm:gap-6" aria-labelledby="sponsors-title">
+				{#each sponsors as sponsor}
+					<Link
+						href={sponsor.url}
+						external
+						class="group flex w-full max-w-[342px] justify-center rounded-xl focus-visible:outline-none"
 					>
-						<img
-							src={sponsor.logo}
-							alt="{sponsor.name} Logo"
-							class="max-h-20 w-40 object-contain opacity-90 transition-opacity group-hover:opacity-100"
-						/>
-					</div>
-				</Link>
-			{/each}
+						<div
+							class="border-ecsess-150/15 bg-ecsess-950 group-hover:border-ecsess-150/30 group-hover:bg-ecsess-900 flex h-28 w-full items-center justify-center overflow-hidden rounded-xl border p-6 shadow-md transition-colors duration-150"
+						>
+							<img
+								src={sponsor.logo}
+								alt={sponsor.name}
+								class="max-h-16 w-full object-contain opacity-90 transition-opacity duration-150 group-hover:opacity-100"
+							/>
+						</div>
+					</Link>
+				{/each}
+			</div>
 		</div>
 	{:else}
 		<div class="text-ecsess-300 py-12 text-center">
-			<p>No sponsors at this time.</p>
+			<p>You can be our next sponsor!</p>
 		</div>
 	{/if}
 </div>
diff --git a/src/components/layout/PageThumbnail.svelte b/src/components/layout/PageThumbnail.svelte
index 37507ba..e194505 100644
--- a/src/components/layout/PageThumbnail.svelte
+++ b/src/components/layout/PageThumbnail.svelte
@@ -1,8 +1,10 @@
 <script>
-	let { thumbnail = '' } = $props();
+	let { thumbnail } = $props();
 </script>
 
 <svelte:head>
-	<meta property="og:image" content={thumbnail} />
-	<meta property="twitter:image" content={thumbnail} />
+	{#if thumbnail}
+		<meta property="og:image" content={thumbnail} />
+		<meta property="twitter:image" content={thumbnail} />
+	{/if}
 </svelte:head>
diff --git a/src/components/officehour/OHBlock.svelte b/src/components/officehour/OHBlock.svelte
index e9da008..5676bec 100644
--- a/src/components/officehour/OHBlock.svelte
+++ b/src/components/officehour/OHBlock.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md border-transparent text-center shadow-md transition-all hover:shadow-lg"
+	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md text-center shadow-md transition-all hover:shadow-lg"
 >
 	<p class="text-base leading-tight font-semibold">
 		{officeHour.member.name.split(' ')[0]}
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index eb9eba2..d3522ee 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -36,15 +36,6 @@ export type FAQ = {
 	answer: string;
 };
 
-export type HomepageCMSResponse = {
-	description: InputValue;
-	councilPhoto: string;
-	faqs: {
-		question: string;
-		answer: string;
-	}[];
-};
-
 export type OfficeHour = {
 	day: string;
 	startTime: string;
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 061305f..4a972c6 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -5,5 +5,10 @@ const thumbnailQuery = `*[_type == "homepage"]{
 }[0]`;
 
 export const load = async () => {
-	return { thumbnail: (await getFromCMS(thumbnailQuery)).thumbnail };
+	try {
+		return { thumbnail: (await getFromCMS(thumbnailQuery)).thumbnail };
+	} catch (err) {
+		console.error('Failed to fetch homepage thumbnail from CMS:', err);
+		return { thumbnail: null };
+	}
 };
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 5c665e8..2106645 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,5 +1,5 @@
 import { getFromCMS } from '$lib/utils.js';
-import type { HomepageCMSResponse, OfficeHour, Sponsors } from '$lib/schemas';
+import type { OfficeHour, Sponsors } from '$lib/schemas';
 
 const homepageQuery = `{
   "homepage": *[_type == "homepage"]{
@@ -28,14 +28,12 @@ export const load = async ({ url }) => {
 	 * Note that `description` is a rich/portable text type
 	 */
 	let homePageResp = await getFromCMS(homepageQuery);
-	let homepageResp: HomepageCMSResponse = homePageResp.homepage;
+	let councilPhotoUrl: string = homePageResp.homepage.councilPhoto;
 	let officeHourResp: OfficeHour[] = homePageResp.officeHours;
 	let sponsorsResp: Sponsors[] = homePageResp.sponsors;
 
 	return {
-		description: homepageResp.description,
-		councilPhoto: homepageResp.councilPhoto,
-		faqs: homepageResp.faqs,
+		councilPhoto: councilPhotoUrl,
 		allOHs: officeHourResp,
 		sponsors: sponsorsResp,
 		canonical: url.href