Add train service boxes... not yet expanding!

src/routes/pis/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import HeadcodeSearchCard from '$lib/components/ui/cards/HeadcodeSearchCard.svelte';
 	import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
 	import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -60,6 +61,7 @@
 
 {#if !resultsLoaded}
 	<div class="card-container">
+		<HeadcodeSearchCard />
 		<PisStartEndCard onsearch={handleStartEndSearch} />
 		<PisCode onsearch={handleCodeSearch} />
 	</div>

src/routes/trains/+page.svelte

@@ -1,12 +1,30 @@
 <script lang="ts">
-	let { data } = $props();
+    import NoResults from '$lib/components/ui/NoResults.svelte';
+	import TrainService from '$lib/components/ui/TrainService.svelte';
+    let { data } = $props();
 </script>
-<pre>{JSON.stringify(data.results, null, 1)}</pre>
+
+{#if data.results.length === 0}
+    <NoResults 
+        message={"No trains found on this date with this headcode."}
+    />
+{:else}
+<div class="result-boxes">
+    {#each data.results as service (service.r)}
+        <TrainService {service} />
+    {/each}
+    </div>
+{/if}
+
 <style>
-	pre {
-        background: #1e1e1e;
-        color: #00ff00;
-        padding: 1rem;
-        overflow: auto;
+    .result-boxes {
+        width: 95%;
+        margin: auto;
+        padding-top: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 1rem;
     }
 </style>