<script lang="ts">
	import { goto } from '$app/navigation';
	import Seo from '$lib/components/SEO.svelte';
	import { Step, Stepper } from '@skeletonlabs/skeleton';

	function onCompleteHandler(e: any): void {
		goto('/');
	}
</script>

<Seo
	title="About"
	description="What's this page about"
	keywords="read about sveltekit svelte"
	type="WebPage"
/>

<div class="container h-full mx-auto flex justify-center items-center">
	<div class="space-y-5">
		<h1 class="h1">
			<span
				class="bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone"
				>What is this about?</span
			>
		</h1>
		<p>Radim Horčička - 7.5.2023</p>
		<div class="flex flex-col">
			<Stepper on:complete={onCompleteHandler}>
				<Step>
					<svelte:fragment slot="header">Introduction</svelte:fragment>
					<h4>
						The aim of the project is to demonstrate the simplicity, benefits, and practices of
						working with the SvelteKit framework.
					</h4>
					<p>
						The documentation for the framework is available at <a
							href="https://kit.svelte.dev/docs/introduction">svelte.kit.dev</a
						> for those who want to learn more.
					</p>
				</Step>
				<Step>
					<svelte:fragment slot="header">libraries/frameworks</svelte:fragment>
					<h4>
						The project utilizes <a href="https://lucia-auth.com/?sveltekit">Lucia Auth</a>,
						<a href="https://www.prisma.io/">Prisma</a> model schema,
						<a href="https://zod.dev/">Zod validation</a>
						and <a href="https://www.skeleton.dev/">Skeleton UI</a>.
					</h4>
					<p>
						As an user you can login or register, create post, delete post or simply delete your
						profile
					</p>
				</Step>
				<Step>
					<svelte:fragment slot="header">Sadly,</svelte:fragment>
					<h4>this page will not function correctly without JavaScript enabled in the browser.</h4>
				</Step>
			</Stepper>
		</div>
	</div>
</div>
