<div class="flex min-h-[600px] flex-col items-center justify-center bg-muted/20 p-6 md:p-10">
    <div class="w-full max-w-sm">
        <div class="mb-6 text-center"><div class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-5 w-5" /></div><h1 class="mt-4 text-2xl font-semibold tracking-tight">Welcome back</h1><p class="mt-2 text-sm text-muted-foreground">Enter your email to sign in to your account.</p></div>
        <april:card><slot:content class="space-y-5"><div class="space-y-2"><april:label for="login-01-email">Email</april:label><april:input id="login-01-email" type="email" placeholder="you@example.com" class="w-full" /></div><div class="space-y-2"><div class="flex justify-between"><april:label for="login-01-password">Password</april:label><a href="#" class="text-xs text-primary underline-offset-4 hover:underline">Forgot password?</a></div><april:input id="login-01-password" type="password" class="w-full" /></div><april:button type="button" class="w-full">Sign in</april:button><div class="flex items-center gap-3 text-xs text-muted-foreground"><april:separator class="flex-1" /><span>or</span><april:separator class="flex-1" /></div><april:button type="button" variant="outline" class="w-full"><x-lucide-github class="mr-2 h-4 w-4" />Continue with GitHub</april:button></slot:content></april:card>
        <p class="mt-5 text-center text-xs text-muted-foreground">By continuing, you agree to the Terms of Service.</p>
    </div>
</div>

<div class="grid min-h-[600px] lg:grid-cols-2">
    <div class="flex flex-col p-6 md:p-10"><div class="flex items-center gap-2 font-semibold"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div>Acme Inc.</div><div class="flex flex-1 items-center justify-center py-12"><div class="w-full max-w-sm"><h1 class="text-2xl font-semibold tracking-tight">Login to your account</h1><p class="mt-2 text-sm text-muted-foreground">Enter your details to continue.</p><div class="mt-7 space-y-5"><div class="space-y-2"><april:label for="login-02-email">Email</april:label><april:input id="login-02-email" type="email" placeholder="m@example.com" class="w-full" /></div><div class="space-y-2"><april:label for="login-02-password">Password</april:label><april:input id="login-02-password" type="password" class="w-full" /></div><april:button type="button" class="w-full">Login</april:button></div></div></div></div>
    <div class="hidden flex-col justify-between bg-primary p-10 text-primary-foreground lg:flex"><div class="text-lg font-semibold">Build with clarity.</div><blockquote class="max-w-md text-2xl font-medium leading-9">“The best interface is the one that helps people finish their work.”<footer class="mt-5 text-sm font-normal opacity-80">Sofia Carter, Product designer</footer></blockquote></div>
</div>

<div class="flex min-h-[580px] items-center justify-center bg-muted p-6 md:p-10">
    <april:card class="w-full max-w-md"><slot:content class="space-y-6"><div class="text-center"><april:badge variant="secondary">Northstar workspace</april:badge><h1 class="mt-4 text-2xl font-semibold tracking-tight">Sign in to continue</h1><p class="mt-2 text-sm text-muted-foreground">Use your work email to access your projects.</p></div><div class="space-y-4"><div class="space-y-2"><april:label for="login-03-email">Work email</april:label><april:input id="login-03-email" type="email" placeholder="name@company.com" class="w-full" /></div><april:button type="button" class="w-full">Continue with email</april:button></div><div class="rounded-md border bg-muted/40 p-3 text-center text-xs text-muted-foreground">Your session is protected with secure sign-in.</div></slot:content></april:card>
</div>

<div class="flex min-h-[600px] items-center justify-center bg-muted/20 p-6 md:p-10">
    <div class="w-full max-w-md"><div class="text-center"><div class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-5 w-5" /></div><h1 class="mt-4 text-2xl font-semibold tracking-tight">Welcome to Northstar</h1><p class="mt-2 text-sm text-muted-foreground">Sign in to manage your projects.</p></div><april:card class="mt-7"><slot:content class="space-y-4"><div class="grid gap-3 sm:grid-cols-2"><april:button type="button" variant="outline"><x-lucide-github class="mr-2 h-4 w-4" />GitHub</april:button><april:button type="button" variant="outline">Google</april:button></div><div class="flex items-center gap-3 py-2 text-xs text-muted-foreground"><april:separator class="flex-1" /><span>or continue with email</span><april:separator class="flex-1" /></div><div class="space-y-2"><april:label for="login-04-email">Email</april:label><april:input id="login-04-email" type="email" placeholder="you@example.com" class="w-full" /></div><april:button type="button" class="w-full">Continue</april:button></slot:content></april:card><p class="mt-5 text-center text-sm text-muted-foreground">New here? <a href="#" class="text-primary underline-offset-4 hover:underline">Create an account</a></p></div>
</div>

<div class="flex min-h-[600px] items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-sm"><div class="mb-7"><p class="text-sm font-medium text-primary">Passwordless sign in</p><h1 class="mt-2 text-3xl font-semibold tracking-tight">Get your magic link.</h1><p class="mt-3 text-sm leading-6 text-muted-foreground">We will email you a secure link. No password is required.</p></div><april:card><slot:content class="space-y-5"><div class="space-y-2"><april:label for="login-05-email">Work email</april:label><april:input id="login-05-email" type="email" placeholder="name@company.com" class="w-full" /></div><april:button type="button" class="w-full">Send magic link</april:button><april:alert variant="default"><slot:title>Check your inbox</slot:title><slot:description>Links expire after 15 minutes.</slot:description></april:alert></slot:content></april:card></div>
</div>