Skip to content
Overview

Presets

Custom

Inspect components

Platform

The screens before the app frame: sign in, password reset, account verification and the business onboarding wizard, plus a first-login tour.

Built from views/auth/login.blade.php views/business/onboarding.blade.php views/business/onboarding/step1-details.blade.php step2-business.blade.php step3-verify.blade.php step4-website.blade.php step5-description.blade.php views/emails/otp-code.blade.php views/business/dashboard.blade.php

Full page

Each screen at its real size, built from kit components. The chips above a screen switch it between its states; below 760px the brand pane folds into a short band above the form.

Show

Sign in to BCS

Use your work email and password to continue.

Sign in as
Forgot password?

New to BCS? Create an account

The role switch is the source's required role select (Agent, Business, Admin) drawn as the kit's subtle segmented control (.bcs-seg.is-subtle, radios inside); it posts the same field. The source has no single sign-on, so there are no Google or Microsoft buttons. "Keep me signed in" and the reset link are new: they map to Laravel's remember flag on Auth::attempt() and the password.request route.

Show

Reset your password

Enter the email you sign in with and we'll send you a link to choose a new password.

Check your email

We sent a password reset link to amina@savannadental.co.ke. The link expires in 60 minutes.

Didn't get it? Check your spam folder, or .

Back to sign in

There is no reset view in resources/views yet. This follows Laravel's password.request / password.email flow, whose link lasts 60 minutes by default.

Show

Step 3 of 5

Verify your account

Enter the 6-digit code we sent to amina@savannadental.co.ke

Your contact details are verified.

Didn't get the code? Resend code in 00:45

Continue

One story across these screens: Create an account starts the five-step business set-up (the onboarding wizard below), and Verify is its step 3. This screen is that step on its own, with the email beside it, for people who arrive from the code email or sign in before verifying; Continue picks the wizard up at step 4. Type or paste 482913, the code in the email preview and in the One-time code email, to verify; any other six digits show the error. The cells are the OTP code input from the component showcase.

Jump to

Step 2 of 5

Your details

Who's setting up this account?

Account email

amina@savannadental.co.ke

The email you signed up with. You can change it later in Settings.

Business details

Tell us about the business itself.

Logo (optional)

PNG, JPG or WebP. A square image works best.

Contact and verification

Add your business phone, then verify with a one-time code.

Your contact details are verified.
Where should we send your code?

We sent a 6-digit code to amina@savannadental.co.ke. It expires in 10 minutes.

Resend code in

Website and business type

Your website helps the AI receptionist describe you accurately.

Describe your business

This powers your AI receptionist and helps agents represent you. Write it yourself, or let us draft it from your website.

At least 20 characters. 0/2000

Step 3 sends a code by email or SMS; enter 482913 to verify. The Verify your account screen above is this step on its own, for people who arrive from the code email. The Continue spinner runs for under a second. "Draft from website" is the source's Generate from website button: renamed to say what it does, with a globe instead of the magic-wand icon.

Parts

Pieces that only exist on these screens. Reusable components stay in the component showcase.

Show

Savanna Dental Care

Dashboard

Agents online

3

Live

Active calls

2

In progress now

In queue

5

Awaiting an agent

Calls today

48

Since midnight

Queue management

Live
Calls

In queue

2

Active

2

Chats

In queue

1

Active

3

Emails

Unread

6

Open

11

Tickets

New

4

Open

9

Proposed: nothing in resources/views runs a tour yet. The outlined target sits above the dim layer (relative z-20 plus a primary ring with a page-coloured offset); the popover is positioned against the target, so it follows the layout at any width. Focus: when a step opens, its popover (tabindex="-1") takes focus and Tab cycles inside it; when the tour closes, focus goes back to whatever opened it, or to the dashboard. The Esc listener sits on the document but only acts while a step is showing. The tiles are the kit's Stat card: main-colour chips, with the call colour on the two call counts.

Built from resources/ on 30 September 2026. Components render with the Tailwind v4 browser build, Alpine 3.14 and Font Awesome 6.4, the same stack the app uses. The one-line catalogue is in ui-components.md.