Add goofy picture, use <Button>, and minor formatting

src/components/Button.svelte

@@ -1,3 +1,14 @@
-<button class="btn bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none hover:shadow-lg hover:shadow-ecsess-800 active:bg-ecsess-800 transition-all">
+<script lang="ts">
-    <slot />
+	let { children, onclick } = $props();
+</script>
+
+<button
+	class="bg-ecsess-600 hover:bg-ecsess-400 active:bg-ecsess-800
+            m-1 inline-block rounded-lg border-none px-4
+            py-2 text-white transition-all
+            duration-200 ease-out
+            hover:shadow-2xl"
+	{onclick}
+>
+	{@render children()}
 </button>

src/routes/council/+page.server.js

@@ -9,8 +9,13 @@ const query = `*[_type == "members"]{
   yearProgram
 }`;
 
+const councilGoofyPicQuery = `*[_type == "homepage"]{
+  "url": councilGoofyPic.asset->url+"?h=1000&fm=webp" 
+}[0]`;
+
 export const load = async () => {
 	return {
-		members: await getFromCMS(query)
+		members: await getFromCMS(query),
+    councilGoofyPic: await getFromCMS(councilGoofyPicQuery),
 	};
 };

src/routes/council/+page.svelte

@@ -3,30 +3,31 @@
 	import Section from 'components/Section.svelte';
 	import CardCouncilBase from 'components/CouncilCardBase.svelte';
 	import CouncilCardBase from 'components/CouncilCardBase.svelte';
-	import type CouncilMember from 'utils/schemas'
+	import type CouncilMember from 'utils/schemas';
 
 	let { data } = $props();
-	let years = ["U4", "U3", "U2", "U1", "U0"]
+	let years = ['U4', 'U3', 'U2', 'U1', 'U0'];
-	let vps : CouncilMember[] = []
+	let vps: CouncilMember[] = [];
-	let ureps : CouncilMember[] = []
+	let ureps: CouncilMember[] = [];
 	// svelte-ignore non_reactive_update
 	let president: CouncilMember | null = null;
 	data.members.forEach((member: CouncilMember) => {
-		if (member.position.includes("VP") || member.position.includes("Equity and Mental Health Officer")){
+		if (
+			member.position.includes('VP') ||
+			member.position.includes('Equity and Mental Health Officer')
+		) {
 			vps.push(member);
-		}
+		} else if (member.position.includes('Representative')) {
-		else if (member.position.includes("Representative")){
+			ureps.push(member);
-			ureps.push(member)
 			ureps.sort((a, b) => {
-				const aYear = years.findIndex(y => a.position.includes(y))
+				const aYear = years.findIndex((y) => a.position.includes(y));
-				const bYear = years.findIndex(y => b.position.includes(y))
+				const bYear = years.findIndex((y) => b.position.includes(y));
-				return aYear - bYear
+				return aYear - bYear;
-			})
+			});
+		} else if (member.position.includes('President')) {
+			president = member;
 		}
-		else if (member.position.includes("President")){
+	});
-			president = member
-		}
-	})
 
 	let selectedMember = $state<CouncilMember | null>(null);
 
@@ -35,15 +36,18 @@
 	}
 
 	// svelte-ignore state_referenced_locally
-		console.log(selectedMember)
+	// console.log(selectedMember);
 </script>
 
 <title> ECSESS council </title>
 <Section>
 	<p class="page-title">Meet the council!</p>
-	<p>Group picture!</p>
+	<div>
+		<h1>Our Student Council</h1>
+		<img src={data.councilGoofyPic.url} alt="ECSESS Council, but we are goofy" />
+	</div>
 </Section>
-<Section >
+<Section>
 	<div class="president">
 		{#if president}
 			<CouncilCardBase
@@ -55,7 +59,7 @@
 		{/if}
 	</div>
 	<div class="flex justify-center">
-		<div class="flex flex-row flex-wrap justify-center align-middle gap-10 p-4">
+		<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
 			{#each vps as councilMember}
 				<CardCouncilBase
 					name={councilMember.name}
@@ -76,7 +80,8 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		{#if selectedMember}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div class="fixed inset-0 bg-black/60 flex justify-center items-center z-50"
+			<div
+				class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
 				onclick={() => (selectedMember = null)}
 			>
 				<CouncilCard