Pages · Login

Operator login.

The first real product page. It reuses the Form Control foundations — text input, password-with-toggle, helper/error patterns — and the button + section tokens. Audience: the local-service business owner or office manager signing in to manage bookings.

Live page · try it (submit triggers loading → error)

app.airevenueengine.com/login

Sign in

Manage your bookings, leads, and calendar.

or
Check your email and password and try again.

New here? Create an account

By continuing you agree to our Terms & Privacy Policy.

Reuses: .input · .field / .field__error · password data-toggle-password · .form-alert · .btn--primary.btn--block · .auth section layout.

Login · required states

Every state, side by side.

The same form rendered in each state a real login needs, so reviewers can see them without interacting.

Empty (default)
Focused (email)
Validation / wrong credentials
We couldn't sign you in. Email or password is incorrect.
Enter a valid email address.
Submitting (loading + disabled)

Inputs lock and the button spins while we verify.

Social sign-in button · states

The reusable .btn--social pattern (neutral/bordered, full-width, ≥48px) in each state, with the brand-correct inline Google "G" (SVG, not Lucide). Built provider-agnostic so Apple/etc. can be added later.

Default
Loading
Disabled
Future provider (e.g. Apple) — same pattern

Hover/focus are interactive (focus shows the green ring). Loading swaps the logo for a spinner + "Connecting…". Disabled dims + blocks. Mockup only — no real OAuth wired; these are the SSO entry points. The Apple example shows the pattern extends to other providers (each only supplies its own inline brand SVG).