afina los types

src/routes/+page.svelte

@@ -10,12 +10,12 @@
 	/>
 </svelte:head>
 <main>
-	<p>Elige la plantilla que quieras usar para tu diseño</p>
+	<p>Elige plantilla</p>
 	<div class="main">
 		<ul>
 			{#each templates as template}
 				<li>
-					<a href="/{template.name}"
+					<a href="/{template.name}" data-sveltekit-prefetch
 						><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
 						<div class="caption">{template.name}</div></a
 					>
@@ -39,6 +39,7 @@
 	}
 	p {
 		font-size: 1.5rem;
+		color: #333;
 	}
 	ul {
 		list-style: none;
@@ -46,9 +47,11 @@
 	li {
 		line-height: 2rem;
 		display: inline-block;
-		padding: 0.5rem;
+		padding: 0.25rem;
-		background-color: rgb(80, 80, 80);
+		background-color: rebeccapurple;
+		box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
 		margin: 0 0.5rem;
+		border-radius: 0.5rem;
 	}
 	a {
 		text-transform: capitalize;
@@ -56,10 +59,11 @@
 		color: white;
 		text-decoration: none;
 		text-align: center;
-		font-weight: 700;
+		font-weight: 400;
-		font-size: 1.2rem;
+		font-size: 1.4rem;
 	}
 	img {
 		max-height: 200px;
+		border-radius: 0.25rem 0.25rem 0 0;
 	}
 </style>

src/routes/[slug]/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { templates } from '$lib/templates/templates';
 	/**
+	 * Un objeto con los datos que llegan de la funcion load de +page.js
 	 * @typedef {{
 	 * slug: string;
 	 * templateIndex: number;
@@ -10,10 +10,10 @@
 	 */
 
 	/** @type LoadFunctionData */ export let data;
+
 	import Form from '$lib/form/Form.svelte';
 	import Preview from '$lib/preview/Preview.svelte';
 
-	const slug = data.slug;
 	const templateIndex = data.templateIndex;
 	const templateImage = data.templateImage;
 </script>