<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">Login to your account</h1>
                <p class="text-sm text-muted-foreground">
                    Enter your email below to login to your account
                </p>
            </div>
            <div class="space-y-4">
                <div class="space-y-2">
                    <BbLabel For="email">Email</BbLabel>
                    <BbInput Id="email" Type="InputType.Email" Placeholder="[email protected]" />
                </div>
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <BbLabel For="password">Password</BbLabel>
                        <a href="#" class="text-sm text-muted-foreground underline-offset-4 hover:underline">
                            Forgot your password?
                        </a>
                    </div>
                    <BbInput Id="password" Type="InputType.Password" />
                </div>
                <BbButton Class="w-full">Login</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 -->
                    Login with GitHub
                </BbButton>
            </div>
            <div class="text-center text-sm text-muted-foreground">
                Don't have an account?
                <a href="#" class="text-primary underline-offset-4 hover:underline">Sign up</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>