GreenकBadi · Phase 1 UI Mockups

Review-ready HTML/CSS (RN-ready Flexbox). Green primary · Blue secondary · White/light surfaces. Language on register + Settings. Shared Header, Message header, Footer.

How to review

Open screens below in the browser (phone frame for apps, desktop for Admin).
Customer flow: Splash → Language → Signup → Home.
Change language later: Profile → Settings → Language.
Brand logo: assets/logo.png (final Green क Badi mark).

Customer App Phase 1

SplashLogo · Create / Log in LanguageRegister first screen · EN/HI/BN Sign upAfter language LoginReturning customer HomeHeader address · Change / Add Saved addressesChange default Add addressGPS · auto ZIP/state Empty / HistoryEmpty state LoadingSkeleton Post scrapStep 1 · photos · category Pickup addressLocation / saved · auto ZIP Item detailTimeline NotificationsStatus & pay alerts MessagesChats · link to History HistoryShort Order ID pill · full UUID on detail ChatMessage header Customer paymentPaid to you · same as staff ProfileEdit · Contact · Privacy Edit profilePhoto upload · name Change passwordSecurity Delete accountConfirm DELETE Contact usSupport Privacy policyLegal SettingsLanguage option Settings · LanguageChange anytime

Staff App Collector

LoginNo public signup My JobsFlat notif header NotificationsNew job alerts Job detailOn the way Complete pickupVerify → pay → receipt Staff transactionPaid to customer · same figure MessagesThread list ChatMessage header ProfileEdit · Settings icons Edit profilePhoto + details Change passwordFrom Profile Help & FAQCollector help Contact usOps support Privacy policyLegal Terms of serviceLegal SettingsLanguage · Notif · Delete Delete accountFrom Settings Settings · LanguageChange anytime

Admin Website Desktop

LoginCompany account Pending inboxNew requests AssignActive collectors MonitorStatuses + mismatch UsersCustomers + staff list Add staffName · login · password RatesCategory rates SettingsLanguage preference

Design suggestions (for discussion)

Card-first home — scrap items as soft cards (photo, status chip); maps cleanly to RN FlatList.
Green primary / blue secondary — primary CTAs green; chat/assign secondary blue.
One collector transaction screen — Verify → Rate → Amount → Paid → Complete.
Admin sidebar — same tokens as apps for brand consistency.
Soft green wash backgrounds — light, professional, not dark/purple AI look.
Language on register + Settings only — not in Header (keeps home clean).
Landing page — Phase 2 after this review.

RN migration notes

Flexbox column/row only · 8pt spacing · 44px touch targets.
Shared classes ≈ Header / MessageHeader / Footer / Card / Btn / Field.
i18n.js → later i18next (or similar) with same keys.