A login page with a muted background color

templ Login03Preview() {
	@PreviewLayout("Login 03 Preview") {
		<div class="flex min-h-svh items-center justify-center bg-muted/50 p-4">
			<div class="w-full max-w-sm">
				<div class="mb-8 text-center">
					<span class="inline-flex size-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-semibold">S</span>
					<h1 class="mt-4 text-2xl font-semibold">Welcome back</h1>
					<p class="mt-2 text-sm text-muted-foreground">Sign in to continue to your account</p>
				</div>
				@ui.Card(ui.DOMProps{}) {
					@ui.CardContent(ui.DOMProps{Class: "space-y-4"}) {
						<div class="space-y-2">
							@ui.Label(ui.LabelProps{For: "email-03"}) { <span>Email</span> }
							@ui.Input(ui.InputProps{
								DOMProps: ui.DOMProps{ID: "email-03"},
								Type: "email",
								Placeholder: "name@example.com",
							})
						</div>
						<div class="space-y-2">
							@ui.Label(ui.LabelProps{For: "password-03"}) { <span>Password</span> }
							@ui.Input(ui.InputProps{
								DOMProps: ui.DOMProps{ID: "password-03"},
								Type: "password",
								Placeholder: "••••••••",
							})
						</div>
						<div class="flex items-center justify-between text-sm">
							<label class="flex items-center gap-2">
								@ui.Checkbox(ui.CheckboxProps{DOMProps: ui.DOMProps{ID: "remember-03"}})
								<span>Remember me</span>
							</label>
							<a href="#" class="text-primary hover:underline">Forgot password?</a>
						</div>
						@ui.Button(ui.ButtonProps{
							Label:   "Sign in",
							Variant: ui.ButtonVariantDefault,
							Size:    ui.ButtonSizeDefault,
							DOMProps: ui.DOMProps{
								Class: "w-full",
								Attrs: t.Attributes{"type": "button"},
							},
						})
					}
				}
			</div>
		</div>
	}
}