Consumer
Consumer kit
Consumer kit — driver.faar.app. Touch-friendly, generous spacing, a deliberately small set.
Excluded on purpose: tables, toolbars, dropdown menus, multi-column forms. A driver-facing screen is a single column of large, obvious controls — anything that assumes a pointer, a wide viewport, or a dense grid belongs on the operator side instead.
Auth card
Static replica of the driver.faar.app login card — email + one-time code, then Google/Apple. Inert: no form submission, no network calls.
Log in or create an account
Enter your email — we’ll send a one-time code.
Account
Matches the driver home: a car count, then the fleets a driver drives for, each with a status badge.
- Fleet Golf 3ZG 1234 AB
- Fleet TransporterZG 5678 CD
- Adria Logisticsactive
- Kvarner Transportpending
Primary / secondary actions
Button at size="lg" — the only size a consumer surface uses. default for the one primary action per screen, outline/ghost for everything else.
Status badges
The small status set B2C needs — nothing else.
Empty state
The one empty-state pattern used across the driver app — plain text, no illustration, no call-to-action button.
Open the invite link from your email to join a fleet.
Delete-account dialog
Destructive, gated by typing the account email — the same guard as the real driver account page. Inert demo — confirming closes the dialog and deletes nothing.
Toasts
Sonner — success and error only, the two states a driver-facing action needs. Click to fire (top-right, rich colors).
404
No bespoke consumer 404 — driver.faar.app falls through to the one global not-found page every host shares.
See app/not-found.tsx— a centered 404 with a “Go to homepage” link that resolves root-relative, so on driver.faar.app it lands back on the driver home.