<div class="grid lg:grid-cols-2 min-h-screen">
    <!-- Left column - form -->
    <div class="relative flex flex-col items-center justify-center p-8">
        <div class="absolute left-8 top-8 flex items-center gap-2 text-lg font-medium">
            <LucideIcon Name="command" class="h-6 w-6" />
            Acme Inc.
        </div>
        <div class="w-full max-w-sm space-y-6">
            <div class="space-y-2 text-center">
                <h1 class="text-2xl font-bold tracking-tight">Create your account</h1>
                <p class="text-sm text-muted-foreground">
                    Fill in the form below to create your account
                </p>
            </div>
            <div class="space-y-4">
                <div class="space-y-2">
                    <BbLabel For="name">Full Name</BbLabel>
                    <BbInput Id="name" Placeholder="John Doe" />
                </div>
                <div class="space-y-2">
                    <BbLabel For="email">Email</BbLabel>
                    <BbInput Id="email" Type="InputType.Email" Placeholder="[email protected]" />
                    <p class="text-xs text-muted-foreground">
                        We'll use this to contact you. We will not share your email with anyone else.
                    </p>
                </div>
                <div class="space-y-2">
                    <BbLabel For="password">Password</BbLabel>
                    <BbInput Id="password" Type="InputType.Password" />
                    <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
                </div>
                <div class="space-y-2">
                    <BbLabel For="confirm-password">Confirm Password</BbLabel>
                    <BbInput Id="confirm-password" Type="InputType.Password" />
                    <p class="text-xs text-muted-foreground">Please confirm your password.</p>
                </div>
                <BbButton Class="w-full">Create Account</BbButton>
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <BbSeparator />
                    </div>
                    <div class="relative flex justify-center text-xs uppercase">
                        <span class="bg-background px-2 text-muted-foreground">Or continue with</span>
                    </div>
                </div>
                <BbButton Variant="ButtonVariant.Outline" Class="w-full">
                    <!-- GitHub icon SVG -->
                    Sign up with GitHub
                </BbButton>
            </div>
            <div class="text-center text-sm text-muted-foreground">
                Already have an account?
                <a href="#" class="text-primary underline-offset-4 hover:underline">Sign in</a>
            </div>
        </div>
    </div>

    <!-- Right column - cover image -->
    <div class="relative hidden lg:block bg-muted overflow-hidden">
        <div class="absolute inset-0"
             style="background-image: radial-gradient(circle, color-mix(in oklch, var(--foreground) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px;">
        </div>
        <div class="absolute inset-0"
             style="background: radial-gradient(ellipse at center, transparent 40%, var(--muted) 100%);">
        </div>
    </div>
</div>