Sponsors. Minor tweaks to FAQ Accordion

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

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 };

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
 	};
 };

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">
+	<div class="grid grid-cols-2 w-full max-w-[80vw] gap-24">
-		<h1>FAQ</h1>
+
-		<FaqAccordion entries={data.faqs} />
+		<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">
+	</Section>
-		<h1>Sponsors</h1>
-		{'<Insert companies & brands/>'}
-	</div>
-</Section>