UI UI Example

---
type: ui
id: login-screen
title: Login Screen UI
status: draft
context:
  - feature/login
---

{% surface id="login-form" title="User Login Form" feature="feature/login" %}
```pug
section(title="Authentication")
  card(elevated size="sm")
    stack(gap="lg")
      heading(level="1") "Welcome Back"
      stack(gap="md")
        input(type="email" label="Email Address" placeholder="you@example.com" required)
        input(type="password" label="Password" required)
      row(justify="between" align="center")
        checkbox Remember me
        link(label="Forgot password?")
      button(variant="primary" width="full") "Sign In"
      divider
      row(justify="center")
        text Don't have an account?
        link(label="Sign up")
```
{% /surface %}