Signupsignup-01
A signup page with a cover image

A registration layout with a strong media panel.
templcn add signup-01
templ Signup01Preview() {
	@PreviewLayout("Signup 01 Preview") {
		<div class="grid min-h-screen lg:grid-cols-2">
			<div class="hidden bg-muted/40 lg:flex lg:flex-col lg:justify-between p-10">
				<div class="space-y-4">
					@ui.Badge(ui.BadgeProps{Label: "New", Variant: ui.BadgeVariantSecondary})
					<h1 class="text-4xl font-semibold tracking-tight">Build your account faster.</h1>
					<p class="max-w-md text-sm leading-6 text-muted-foreground">A cover-image signup layout with a larger marketing panel and a focused form surface.</p>
				</div>
				<div class="rounded-2xl border border-border/70 bg-background p-4 shadow-sm">
					<p class="text-sm font-medium">Trusted by teams shipping Go docs.</p>
					<p class="mt-1 text-sm text-muted-foreground">Teams move from docs to production faster with copyable source and reusable layouts.</p>
				</div>
			</div>
			<div class="flex items-center justify-center p-6">
				@ui.Card(ui.DOMProps{Class: "w-full max-w-md"}) {
					@ui.CardHeader(ui.DOMProps{Class: "space-y-2"}) {
						@ui.CardTitle(ui.DOMProps{}) { <span>Create your account</span> }
						@ui.CardDescription(ui.DOMProps{}) { <span>Sign up with email and password.</span> }
					}
					@ui.CardContent(ui.DOMProps{}) {
						<div class="grid gap-4">
							<div class="grid gap-2">
								@ui.Label(ui.LabelProps{For: "signup-name"}) { <span>Full name</span> }
								@ui.Input(ui.InputProps{Type: "text", Placeholder: "Jane Doe", DOMProps: ui.DOMProps{Attrs: t.Attributes{"id": "signup-name"}}})
							</div>
							<div class="grid gap-2">
								@ui.Label(ui.LabelProps{For: "signup-email"}) { <span>Email</span> }
								@ui.Input(ui.InputProps{Type: "email", Placeholder: "jane@example.com", DOMProps: ui.DOMProps{Attrs: t.Attributes{"id": "signup-email"}}})
							</div>
							<div class="grid gap-2">
								@ui.Label(ui.LabelProps{For: "signup-password"}) { <span>Password</span> }
								@ui.Input(ui.InputProps{Type: "password", Placeholder: "Create a password", DOMProps: ui.DOMProps{Attrs: t.Attributes{"id": "signup-password"}}})
							</div>
							<div class="flex items-center gap-2">
								@ui.Checkbox(ui.CheckboxProps{Checked: true, DOMProps: ui.DOMProps{Attrs: t.Attributes{"id": "signup-terms"}}})
								<label for="signup-terms" class="text-sm text-muted-foreground">I agree to the terms.</label>
							</div>
							@ui.Button(ui.ButtonProps{Label: "Create account"})
						</div>
					}
				}
			</div>
		</div>
	}
}