home page improvements: link to create new client

src/lib/components/app/auth-form/auth-form.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
 	import { LucideLoaderCircle } from 'lucide-svelte';
-	import { Button } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils.js";
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils.js';
 
-	let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
+	let { class: className, ...rest }: { class?: string; rest?: { [p: string]: unknown } } = $props();
 
 	let isLoading = $state(false);
 </script>
 
-<div class={cn("grid gap-6", className)} {...rest}>
+<div class={cn('flex gap-6', className)} {...rest}>
 	<form method="get" action="/auth/authentik">
-		<Button type="submit" onclick={() => {isLoading=true}}>
+		<Button
+			type="submit"
+			onclick={() => {
+				isLoading = true;
+			}}
+		>
 			{#if isLoading}
 				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 			{:else}
-				<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" />
+				<img
+					class="mr-2 h-4 w-4"
+					alt="Authentik Logo"
+					src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg"
+				/>
 			{/if}
 			Sign in with Authentik
 		</Button>

src/routes/+layout.svelte

@@ -1,35 +1,39 @@
 <script lang="ts">
 	import '../app.css';
-	import { page } from '$app/stores';
 	import { cn } from '$lib/utils';
+	import { page } from '$app/state';
 
 	const { data, children } = $props();
 	const { user } = data;
 
 	function getNavClass(path: RegExp) {
-		return cn('hover:text-foreground/80 transition-colors',
-			path.test($page.url.pathname) ? 'text-foreground' : 'text-foreground/60');
+		return cn(
+			'hover:text-foreground/80 transition-colors',
+			path.test(page.url.pathname) ? 'text-foreground' : 'text-foreground/60',
+		);
 	}
 </script>
 
 <header class="p-4 sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
-	<nav class="flex items-center gap-6 text-sm">
-		<a href="/" class={getNavClass(/^\/$/)}>Home</a>
-		{#if user}
-			<a href="/user" class={getNavClass(/^\/user$/)}>Profile</a>
-			<a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a>
-			<a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a>
-		{/if}
+	<nav>
+		<ul class="flex items-center gap-6 text-sm">
+			<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
+			{#if user}
+				<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
+				<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
+				<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
+			{/if}
+		</ul>
 	</nav>
 </header>
-<main class="flex flex-col flex-grow p-4">
+<main class="flex flex-grow flex-col p-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="p-4 relative text-center inset-x-0 bottom-0">
+<footer class="relative inset-x-0 bottom-0 p-4 text-center">
 	<p>&copy; 2024</p>
 </footer>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { AuthForm } from '$lib/components/app/auth-form';
+	import { Button } from '$lib/components/ui/button';
 
 	const { data } = $props();
 	const { user } = data;
@@ -9,10 +10,27 @@
 	<title>VPGen</title>
 </svelte:head>
 
-<h1>Welcome to VPGen</h1>
+<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
+	Welcome to VPGen
+</h1>
 
-{#if user }
-	<p>Hi {user.name}</p>
+{#if user}
+	<p>
+		Hi {user.name}!
+	</p>
+	<section id="get-started" class="border-l-2 pl-6">
+		<p>
+			To get started,
+			<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
+		</p>
+	</section>
 {:else}
 	<AuthForm class="p-4" />
+	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
 {/if}
+
+<style>
+	p {
+		@apply my-2;
+	}
+</style>