noctbot/web/src/routes/index.svelte

<script lang="typescript">
	import Icon from "svelte-awesome/components/Icon.svelte";
	import { faDiscord } from "@fortawesome/free-brands-svg-icons";
	import ExampleComponent from "../components/ExampleComponent.svelte";

	const discordIcon = faDiscord as unknown as undefined;
</script>

<div class="flex items-center justify-center bg-gray-900 h-screen w-screen">
	<div class="bg-gray-800 rounded-sm text-center px-20 py-5 shadow-lg">
		<h1 class="text-white text-4xl font-light">Login</h1>
		<p class="px-10 py-5">
			<a class="text-sm bg-blue-700 hover:bg-blue-800 p-2 text-white hover:text-gray-100 rounded-sm" href="/login">
				<Icon data={discordIcon} /> Login with Discord
			</a>
		</p>
	</div>
</div>