A login page with form and image

templ Login04Preview() {
	@PreviewLayout("Login 04 Preview") {
		<div class="flex min-h-svh bg-background">
			<div class="hidden lg:flex lg:w-1/2 items-center justify-center bg-muted/50 p-8">
				<div class="max-w-md space-y-4">
					<div class="flex items-center gap-3">
						<span class="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground text-lg font-semibold">T</span>
						<span class="text-2xl font-semibold">templcn/ui</span>
					</div>
					<h2 class="text-3xl font-bold">Beautiful components built with Radix UI and Tailwind CSS.</h2>
					<p class="text-muted-foreground">A set of accessible, customizable, and themeable components that you can copy and paste into your apps.</p>
				</div>
			</div>
			<div class="flex w-full lg:w-1/2 items-center justify-center p-8">
				<div class="w-full max-w-sm">
					<div class="mb-8 lg:hidden">
						<div class="flex items-center gap-2">
							<span class="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-semibold">T</span>
							<span class="text-xl font-semibold">templcn/ui</span>
						</div>
					</div>
					@ui.Card(ui.DOMProps{}) {
						@ui.CardHeader(ui.DOMProps{Class: "space-y-1"}) {
							@ui.CardTitle(ui.DOMProps{}) { <span>Sign in</span> }
							@ui.CardDescription(ui.DOMProps{}) { <span>Enter your email and password to sign in</span> }
						}
						@ui.CardContent(ui.DOMProps{Class: "space-y-4"}) {
							<div class="space-y-2">
								@ui.Label(ui.LabelProps{For: "email-04"}) { <span>Email</span> }
								@ui.Input(ui.InputProps{
									DOMProps: ui.DOMProps{ID: "email-04"},
									Type: "email",
									Placeholder: "name@example.com",
								})
							</div>
							<div class="space-y-2">
								@ui.Label(ui.LabelProps{For: "password-04"}) { <span>Password</span> }
								@ui.Input(ui.InputProps{
									DOMProps: ui.DOMProps{ID: "password-04"},
									Type: "password",
									Placeholder: "••••••••",
								})
							</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>
		</div>
	}
}