Dynamically fetch list of icons and services and pass both to the ServiceCard

src/routes/services/+page.svelte

@@ -1,11 +1,35 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import pages from '$lib/components/pages.json';
-	import Card from '$lib/components/Card.svelte';
+	import ServiceCard from '$lib/components/ServiceCard.svelte';
 	import type { Service } from '$lib/types/data-types';
 
-	const services: Array<Service> = $state(pages.services);
+	let services: readonly Service[] = $state.frozen([]);
+
+	let icons: readonly string[] = $state.frozen([]);
+
+	async function get(url: string): Promise<any> {
+		let res = await fetch(url)
+		if (res.ok) {
+			let data = await res.json()
+			return data
+		}
+		else {
+			return Promise.reject()
+		}
+	}
+
+	$effect(() => {
+		get("/data/services").then((data: Service[]) => {
+			services = data
+		})
+	})
+
+	$effect(() => {
+		get("/assets/icons").then((data: string[]) => {
+			icons = data
+		})
+	})
 </script>
 
 <svelte:head>