client page: add tutorial, layout ui improvements

src/routes/clients/[id]/+page.svelte

@@ -2,6 +2,7 @@
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
 
 	const { data }: { data: PageData } = $props();
 
@@ -19,15 +20,20 @@
 </script>
 
 <svelte:head>
-	<title></title>
+	<title>{data.client.name}</title>
 </svelte:head>
 
-<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
+<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
 
-<div class="flex flex-wrap gap-4">
+<section id="client-configuration" class="flex flex-wrap gap-4">
 	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
 
 	<div class="overflow-hidden rounded-lg">
 		{@html qrCode.svg()}
 	</div>
-</div>
+</section>
+<section id="usage" class="flex flex-col gap-2">
+	<h2 class="text-xl font-semibold">Usage</h2>
+	<p>To use VPGen, you need to install the WireGuard app on your device.</p>
+	<WireguardGuide />
+</section>