client page: add tutorial, layout ui improvements

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 	}
 </script>
 
-<header class="p-4 sm:flex">
+<header class="sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
 	<nav>
 		<ul class="flex items-center gap-6 text-sm">
@@ -27,13 +27,13 @@
 		</ul>
 	</nav>
 </header>
-<main class="flex flex-grow flex-col p-4">
+<main class="flex flex-grow flex-col gap-4">
 	{@render children()}
 </main>
 
 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
-<footer class="relative inset-x-0 bottom-0 p-4 text-center">
+<footer class="relative inset-x-0 bottom-0 text-center">
 	<p>&copy; 2024</p>
 </footer>