Start UI for web

web/src/components/ExampleComponent.svelte

@@ -6,15 +6,11 @@
 <svelte:options immutable />
 
 <style>
-	h1 {
-		@apply text-red-200;
-	}
-
 	p {
 		color: #4A5568;
 		margin-top: 1rem;
 	}
 </style>
 
-<h1>{title}</h1>
+<h1 class="text-red-200">{title}</h1>
 <p>{paragraph}</p>

web/src/routes/_layout.svelte

@@ -15,6 +15,10 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+* {
+	@apply font-sans;
+}
 </style>
 
 <svelte:head>

web/src/routes/index.svelte

@@ -2,45 +2,11 @@
 	import ExampleComponent from "../components/ExampleComponent.svelte";
 </script>
 
-<style>
-	.centerer {
-		flex: 1 1 0%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.button {
-		margin-top: 2.5rem;
-		padding: 0.75rem;
-		border-radius: 0.5rem;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		transition-property: background-color, color, box-shadow;
-		transition-duration: 200ms;
-		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		text-decoration: none;
-	}
-
-	.button:focus {
-		outline: 0;
-		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-	}
-
-	.button-pink {
-		color: #97266D;
-		background-color: #FED7E2;
-	}
-
-	.button-pink:hover, .button-pink:focus {
-		background-color: #FBB6CE;
-	}
-</style>
-
-<div class="centerer">
-	<ExampleComponent
-		title="🌐 Sapper with TypeScript and GraphQL project base"
-		paragraph="This is an example route and component to make sure everything's working." />
-	
-	<a class="button button-pink" href="/graphql">Check out the GraphQL playground!</a>
-</div>
+<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 with Discord</a>
+		</p>
+	</div>
+</div>