Update home page view

frontend/src/lib/components/Path.svelte

@@ -1,21 +1,37 @@
 <script lang="ts">
+	import {PUBLIC_BACKEND_URL} from '$env/static/public'
+
 	export let name: string;
-	export let id: string;
+	export let id: number;
 	export let color: string;
 	export const path = `/paths/${id}`;
 	export let src: string;
+
+	console.log(id)
+	let image = '/archi.png'
+	switch (id) {
+		case 1:
+			image = '/archi.png';
+			break;
+		case 2:
+			image = '/montagne.png';
+			break;
+		case 3:
+			image = '/bibbito.png';
+			break;
+	}
 </script>
 
 <a href={path} class="route-card">
 	<div class="route-card-left" style="background-color: {color}">
-		<img {src} alt="logo" />
+		<img src={image} alt="logo" />
 	</div>
 	<div class="route-card-center">
 		<div class="name">
 			<div class="bold">{name}</div>
 		</div>
 	</div>
-	<div class="route-card-right" />
+	<div class="route-card-right" style:background-image='url({PUBLIC_BACKEND_URL}{src}' />
 </a>
 
 <style>
@@ -34,7 +50,6 @@
 	.route-card-right {
 		border-top-right-radius: 45px;
 		border-bottom-right-radius: 45px;
-		background-image: url('/images/test-1.jpg');
 		background-position: center;
 		background-size: cover;
 	}
@@ -48,6 +63,7 @@
 
 	.route-card-left img {
 		width: 100%;
+		max-width: 120px;
 	}
 
 	.route-card-center {

frontend/src/routes/+page.svelte

@@ -14,7 +14,7 @@
 	<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
 	<div id="route-cards">
 		{#each categories as category}
-			<Path src={category.cover} color={category.color} name="{category.name_it}" id={String(category.id)} />
+			<Path src={category.cover} color={category.color} name="{category.name_it}" id={category.id} />
 		{/each}
 	</div>
 </main>