Preview vertical

Product UI · W2

The product, rendered in HTML.

Not screenshots. Every status, document number and belt colour below is the real one, copied from the server's own constants — the sources are listed at the top ofsrc/lib/product.ts. That buys three things a screenshot cannot: it re-themes, it re-tints per vertical, and it cannot go stale when the app's UI moves.

Each sequence plays once when scrolled into view. Underprefers-reduced-motion they render their finished state immediately — the information, none of the movement.

01

Quotation → Booking

The catering workflow's load-bearing moment: marking a quotation Woncreates the booking automatically, and payments track against it from there. Lands on/catering.

A quotation marked Won automatically creates a booking, which then tracks payments against it.
QUO-2026-0042

Sharma family · Wedding reception

SentWon
Event date
18 Nov 2026
Guests
250
Venue
Kothapet
Total
₹1,48,500
BK-2026-00018

Booking confirmed

Confirmed
₹40,000UPI · RCP-2026-00113
Advance received
Paid ₹40,000Due ₹1,08,500Partially paid
02

QR attendance

The academy vertical's flagship. Shows the success path and a duplicate scan being rejected — the app handles every case (not-found, inactive, wrong-batch, auto-absent), and a demo that only ever shows the happy path quietly implies the rest were skipped. Lands on the/martial-arts-academy hero.

A student's QR card is scanned and marked present; a second scan of the same card is rejected as already marked.
SessionEvening Juniors
Present1617/ 18

Point the camera at the student's ID card

Aarav ReddySTU000148Orange Belt

Marked present · 6:04 PM

Already marked at 6:04 PM

03

Grading → promotion → certificate

The ladder is the real default belt ladder every new academy tenant is seeded with, colours included — so an owner recognises their own setup rather than a stock illustration.

A student passes a grading exam, is promoted from Yellow Belt to Orange Belt, and a promotion certificate is generated.
Grading exam12 Nov 2026 · Evening Juniors
Passed
  1. White
  2. Yellow
  3. Orange
  4. Green
  5. Blue
  6. Purple
  7. Brown
  8. Black

Promoted to Orange Belt · examiner Sensei Rao

Certificate of promotionAarav ReddyYellow → Orange · CERT-2026-00087
PDF
04

Tenant isolation

The most valuable asset on the site. Competitors at this price point put every customer in shared tables behind a tenant_id column; EventzNest gives each business its own Postgres schema and pinssearch_path per request. Tenant names are illustrative — a decorative diagram is not the place to spend a customer's consent.

A request for one tenant resolves to that tenant's own database schema. An attempt to read another tenant's data is blocked at the schema boundary.
GET/api/customersHost: bluefig.eventznest.com
tenant_bluefigBlue Fig Caterers
  • customers
  • quotations
  • bookings
  • payments
tenant_shorinShorin Academy
  • customers
  • quotations
  • bookings
  • payments
tenant_verdeVerde Events
  • customers
  • quotations
  • bookings
  • payments

Proven by an isolation suite that runs on every change — not asserted.

05

Status pills

Every status the app can show, in its real wording. Semantic tone is kept separate from the brand accent on purpose — Paid must not change meaning because the visitor happens to be on the catering page. Switch vertical above and these stay put.

Quotation
DraftSentPendingFollow upWonLost
Booking
ConfirmedIn preparationCompletedCancelled
Payment
UnpaidPartially paidPaidOverpaid
Attendance
PresentAbsentLate