From 775d13fee24f2c739f4e529fce72221fdf5091d0 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Fri, 25 Jul 2025 17:28:04 -0400
Subject: [PATCH] Sponsors. Minor tweaks to FAQ Accordion

---
 src/components/FAQAccordion.svelte |  2 +-
 src/lib/schemas.ts                 | 10 ++++++++--
 src/routes/+page.server.ts         | 12 ++++++++++--
 src/routes/+page.svelte            | 31 ++++++++++++++++++++++--------
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/components/FAQAccordion.svelte b/src/components/FAQAccordion.svelte
index 73fb1bd..2dac751 100644
--- a/src/components/FAQAccordion.svelte
+++ b/src/components/FAQAccordion.svelte
@@ -39,7 +39,7 @@
 	{#each entries as entry, index}
 		<Accordion.Item
 			value={index.toString()}
-			classes="border-ecsess-200 mb-4 rounded-xl border-2 hover:bg-ecsess-black-hover"
+			classes="border-ecsess-200 mb-4 rounded-xl border-2 hover:bg-ecsess-600/48 transition-all"
 			leadClasses="text-lg font-bold"
 			controlClasses="
             flex cursor-pointer justify-between
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index fddc07f..969e492 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -14,7 +14,7 @@ export type EventPost = {
 export type FAQ = {
 	question: string;
 	answer: string;
-}
+};
 
 import type { InputValue } from '@portabletext/svelte';
 
@@ -50,6 +50,12 @@ export type Resource = {
 	title: string;
 	url: string;
 	description: string;
-}
+};
+
+export type Sponsors = {
+	name: string;
+	url: string;
+	logo: string;
+};
 
 export type Redirect = { shortname: string; url: string };
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 393a1ca..7e31d6a 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 } from '$lib/schemas';
+import type { HomepageCMSResponse, OfficeHour, Sponsors } from '$lib/schemas';
 
 const homepageQuery = `*[_type == "homepage"]{
 	"description": description[],
@@ -17,6 +17,12 @@ const ohQuery = `*[_type=="officeHours"]{
   }
 }`;
 
+const sponsorQuery = `*[_type=="sponsors"]{
+    name,
+    url,
+    "logo": logo.asset->url+"?h=100&fm=webp"
+}`;
+
 export const load = async () => {
 	/**
 	 * @description Response data type based on the `homepageQuery` above.
@@ -24,11 +30,13 @@ export const load = async () => {
 	 */
 	let homepageResp: HomepageCMSResponse = await getFromCMS(homepageQuery);
 	let officeHourResp: OfficeHour[] = await getFromCMS(ohQuery);
+	let sponsorsResp: Sponsors[] = await getFromCMS(sponsorQuery);
 
 	return {
 		description: homepageResp.description,
 		councilPhoto: homepageResp.councilPhoto,
 		faqs: homepageResp.faqs,
-		allOHs: officeHourResp
+		allOHs: officeHourResp,
+		sponsors: sponsorsResp
 	};
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b26f995..3659702 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import Section from 'components/Section.svelte';
 	import RichText from 'components/RichText.svelte';
 	import OhSchedule from 'components/OHSchedule.svelte';
+	import Link from 'components/Link.svelte';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -56,12 +57,26 @@
 </Section>
 
 <Section>
-	<div class="col-span-1">
-		<h1>FAQ</h1>
-		<FaqAccordion entries={data.faqs} />
+	<div class="grid grid-cols-2 w-full max-w-[80vw] gap-24">
+
+		<div class="col-span-1">
+			<h1>FAQs</h1>
+			<hr class="hr py-4 border-dashed w-full">
+			<FaqAccordion entries={data.faqs} />
+		</div>
+		<div id="sponsors" class="col-span-1">
+			<h1>Sponsors</h1>
+			<hr class="hr py-4 border-dashed w-full">
+			
+			<div class="flex gap-12">
+				{#each data.sponsors as sponsor}
+				<div class="max-h-20">
+					<Link href={sponsor.url}>
+						<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24"/>
+					</Link>
+				</div>
+				{/each}
+			</div>
+		</div>
 	</div>
-	<div id="sponsors">
-		<h1>Sponsors</h1>
-		{'<Insert companies & brands/>'}
-	</div>
-</Section>
+	</Section>