Login with Background

<div class="relative flex flex-col items-center justify-center min-h-screen bg-muted p-8">
    <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>
    <BbCard class="relative z-10 w-full max-w-sm">
        <BbCardHeader class="text-center">
            <div class="flex justify-center mb-2">
                <LucideIcon Name="command" class="h-6 w-6" />
            </div>
            <BbCardTitle class="text-xl">Welcome back</BbCardTitle>
            <BbCardDescription>Login with your Apple or Google account</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <div class="space-y-4">
                <BbButton Variant="ButtonVariant.Outline" Class="w-full">
                    <!-- Apple icon SVG -->
                    Login with Apple
                </BbButton>
                <BbButton Variant="ButtonVariant.Outline" Class="w-full">
                    <!-- Google icon SVG -->
                    Login with Google
                </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-card px-2 text-muted-foreground">Or continue with</span>
                    </div>
                </div>
                <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>
        </BbCardContent>
        <BbCardFooter class="flex flex-col gap-4">
            <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>
        </BbCardFooter>
    </BbCard>
    <p class="relative z-10 mt-4 text-center text-xs text-muted-foreground px-8">
        By clicking continue, you agree to our
        <a href="#" class="underline underline-offset-4 hover:text-primary">Terms of Service</a>
        and
        <a href="#" class="underline underline-offset-4 hover:text-primary">Privacy Policy</a>.
    </p>
</div>