<div class="flex items-center justify-center min-h-screen">
    <div class="w-full max-w-sm space-y-6">
        <div class="space-y-2 text-center">
            <div class="flex justify-center mb-4">
                <LucideIcon Name="command" class="h-8 w-8" />
            </div>
            <h1 class="text-2xl font-bold tracking-tight">Welcome to Acme Inc.</h1>
            <p class="text-sm text-muted-foreground">
                Don't have an account?
                <a href="#" class="text-primary underline-offset-4 hover:underline">Sign up</a>
            </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>
            <BbButton Class="w-full">Login</BbButton>
        </div>
        <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>
        <div class="grid grid-cols-2 gap-4">
            <BbButton Variant="ButtonVariant.Outline" Class="w-full">
                <!-- Apple icon SVG -->
                Apple
            </BbButton>
            <BbButton Variant="ButtonVariant.Outline" Class="w-full">
                <!-- Google icon SVG -->
                Google
            </BbButton>
        </div>
        <p class="text-center text-xs text-muted-foreground">
            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>
</div>