Add LocationSearchCard and add to homepage for testing.

Run `npm run format`

src/routes/+error.svelte

@@ -58,7 +58,7 @@
 		font-size: 1.1rem;
 		color: var(--color-title);
 		max-width: 300px;
-        margin-top: 5px;
+		margin-top: 5px;
 		margin-bottom: 30px;
 	}
 

src/routes/+layout.svelte

@@ -34,7 +34,7 @@
 		if (navWidth === 0) return navItems.length;
 		const available = navWidth;
 		const totalItems = navItems.length;
-		const countWithoutMore = Math.floor(available/ ITEM_WIDTH);
+		const countWithoutMore = Math.floor(available / ITEM_WIDTH);
 
 		if (countWithoutMore >= totalItems) return totalItems;
 
@@ -128,10 +128,11 @@
 </nav>
 
 <div class="viewport-guard">
-	<img src={logoPlain} alt="OwlBoard Logo" width=100 height=100>
+	<img src={logoPlain} alt="OwlBoard Logo" width="100" height="100" />
 	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
 	<p>
-		Just as trains need the right track width, our data needs a bit more room to stay on the rails. Please expand your view to at least 300px to view the app.
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
+		Please expand your view to at least 300px to view the app.
 	</p>
 </div>
 
@@ -193,7 +194,8 @@
 		box-shadow: var(--shadow-up);
 	}
 
-	.nav-item, .more-menu-wrapper {
+	.nav-item,
+	.more-menu-wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -317,8 +319,10 @@
 			margin: auto;
 			padding-top: 30px;
 		}
-	
-		header, main, nav {
+
+		header,
+		main,
+		nav {
 			display: none;
 		}
 	}

src/routes/+layout.ts

@@ -1,3 +1,3 @@
 export const prerender = true;
 export const trailingSlash = 'always';
-export const csr = true;
+export const csr = true;

src/routes/+page.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-
-	function test() {
-		console.log('Button Clicked');
-	}
+	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
 </script>
 
-<br /><br /><br />
-<Button>Default</Button>
-<Button color={'brand'} onclick={test}>Brand</Button>
-<Button color={'accent'}>Accent</Button>
-<Textbox placeholder={"Textbox am I"} uppercase={true} error={""} />
+<div class="card-container">
+	<LocationBoardCard />
+</div>
 
-<BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
-
-<LocationSearchBox />
-
-<h2>OwlBoard</h2>
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+</style>

src/routes/about/+page.svelte

@@ -29,7 +29,10 @@
 		daily basis.
 	</p>
 	<p class="amble">
-Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.
+		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
+		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
+		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">
 		Some components that combine to form OwlBoard are open-source, see the <a