CMS fetching, Main page & members page (#12)

* CMS fetching on main page
* Getting council members
* Image loading for council member
* Placeholder avatar

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

@@ -0,0 +1,17 @@
+import { getFromCMS } from 'utils/utils.js';
+
+// needs to concat and format this text
+const query = `*[_type == "members"]{
+  name,
+  email,
+  position,
+  positionDescription,
+  "image": image.asset->url,
+  yearProgram
+}`;
+
+export const load = async () => {
+	return {
+		members: await getFromCMS(query)
+	};
+};

src/routes/council/+page.svelte

@@ -1,13 +1,26 @@
 <script>
+	import CouncilCard from 'components/CouncilCard.svelte';
 	import Section from 'components/Section.svelte';
+	let { data } = $props();
 </script>
 
 <title> ECSESS council </title>
-
 <Section>
 	<p class="page-title">Meet the council!</p>
 
 	<p>Group picture!</p>
+	<div class="flex flex-row flex-wrap items-center align-middle gap-10 p-4">
+		{#each data.members as councilMember}
+			<CouncilCard
+				name={councilMember.name}
+				position={councilMember.position}
+				email={councilMember.email}
+				positionDescription={councilMember.positionDescription}
+				yearProgram={councilMember.yearProgram}
+				image={councilMember.image}
+			></CouncilCard>
+		{/each}
+	</div>
 
 	<p>Here are the members of the ECSESS council!</p>
 	<div>