# Handoff: JIPANDITJI Mobile App (iOS + Android)

## Overview
Complete mobile UI for **JIPANDITJI** (jipanditji.co) — an app to book verified pandits for pujas / anushthans, check Panchang & muhurats, follow festivals, offer temple chadhava, and order puja samagri with ~15-min quick-commerce delivery. Inspiration: Blinkit / Zepto (speed, ADD steppers, delivery ETA header, category rail) + Sri Mandir / PujaPurohit (devotional content, bilingual ritual names, panchang). Target: **React Native** (the web app is already React).

38 screens + a style guide, grouped in 7 flows.

## About the Design Files
The files in this bundle are **design references created in HTML/React (browser)** — prototypes showing the intended look, not production code. Recreate them in the React Native codebase using its own patterns (e.g. React Navigation, StyleSheet / NativeWind, react-native-svg for icons, Reanimated for motion). Inline-style values in the JSX map 1:1 to RN style props (px → dp).

Open `JIPANDITJI App UI.html` in a browser: a pan/zoom canvas; click any artboard to view it fullscreen, ←/→ to step.

## Fidelity
**High-fidelity.** Final colours, type, spacing, radii and copy. Artboards are 390×844 (iPhone 14/15 base); tall artboards (Home 2380, Puja detail 2100, etc.) show the full scroll content. Image areas drawn as warm dotted placeholders (`Ph` component) are labelled with the photo/artwork to source — those are the only non-final parts.

---

## Design Tokens

### Colours
| Token | Hex | Use |
|---|---|---|
| teal | `#0C7C8C` | Primary actions, active tab, selected borders |
| tealDeep | `#08606D` | Pressed / gradient end / text on teal50 |
| teal50 | `#E2F0F1` | Selected card fill, icon tiles |
| teal100 | `#C6E3E6` | — |
| saffron | `#F6912F` | Brand, highlights, "recommended", shubh dots |
| saffronDeep | `#E2741B` | Icons on saffron50, accent text |
| saffron50 | `#FFF1DC` | Warm tint tiles, date badges |
| saffron100 | `#FFE3BC` | Warm borders |
| kumkum | `#8E1B2A` | Festival heroes, Panchang header, badges, destructive |
| kumkum50 | `#FBE9EA` | Error / cancel tint |
| gold | `#C9922E` / gold50 `#FBF3E2` | Membership, accents |
| ink | `#17201F` | Primary text, "on" chips |
| ink2 | `#4A5654` | Secondary text |
| muted | `#7A8584` | Captions, inactive tabs |
| line | `#E6EAE9` | Card borders, dividers |
| line2 | `#EEF1F0` | Inner row dividers |
| cream | `#FFFCEF` | Hero / onboarding bg |
| surface | `#F5F7F6` | App background |
| green / green50 | `#1E8A4C` / `#E5F4EA` | Success, ratings, delivery ETA, savings |
| Warm text | `#9A5A16` | Devanagari accent on cream |
| Header gradient | `#FFE7C2 → #FFFCEF` (180°) | Home / profile / pandit header |
| Store header gradient | `#DDF0EA → #FFFFFF` | Samagri store |
| Panchang gradient | `#8E1B2A → #5E1220` (170°) | |

### Typography
- **Latin:** Hanken Grotesk (400/500/600/700/800/900)
- **Devanagari accents (ritual names, taglines):** Tiro Devanagari Hindi; fallback Noto Sans Devanagari
- Every ritual / festival name is shown in English **+** Devanagari underneath (12–16px, muted or `#9A5A16`).

| Role | Size / Weight / Tracking |
|---|---|
| Display (hero headlines) | 27–30 / 900 / −0.7 to −0.8 |
| Screen title (detail) | 23–27 / 900 / −0.5 |
| Top bar title | 19 / 800 / −0.3 |
| Section title | 19 / 800 / −0.3 (17 inside detail pages) |
| Card title | 15–16 / 800 |
| Body | 14–15 / 400, line-height 1.5–1.55 |
| Caption | 12–13 / 400–600, muted |
| Overline labels | 10.5–12 / 800 / +0.8–1.5 tracking, uppercase |
| Prices | 15–24 / 800–900; strike-through original at 70% size, muted |

### Spacing & shape
- Screen gutter **16**. Spacing scale 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 28.
- Cards: radius **18**, `1px #E6EAE9` border, white, **no shadow** (except quick-book card `0 6px 20px rgba(23,32,31,.05)` and tracking card `0 10px 30px rgba(8,96,109,.15)`).
- Primary button: height **52**, radius **16**, 16/700. Small button: height **38**, radius **12**, 14/700.
- ADD stepper: height 32–36, radius 10, `1.5px teal` border, 13/800 "ADD", shadow `0 2px 0 rgba(12,124,140,.12)`; when qty>0 → solid teal with − qty +.
- Chips: height 36, radius 18; off = white + line border; on = ink (or teal) fill, white text.
- Tags: height 22, radius 6, 11.5/700, tinted bg + dark tone text (teal / saffron / green / kumkum / gray / gold).
- Icon buttons: 40×40 circle, white + line border.
- Avatars (initials): radius = size/2.6, tinted bg.
- Inputs: height 52, radius 14, `1.5px line` border; focused = teal border + `0 0 0 4px #E2F0F1` ring.
- Radio 22 (teal ring + 11 dot); Checkbox 22 radius 7, teal fill + white check.
- Min touch target 44.
- Phone corners in mock 44 (device only).

### Icons
Custom line set, **24 grid, 1.8 stroke**, round caps/joins (2.1–2.6 for small emphasis). All path data is in `app/kit.jsx` → `IP` object; port directly to `react-native-svg`. Devotional set: diya, kalash, flame (havan), lotus, om, mala, temple, sun, moon, plus standard UI icons.

### Bottom tab bar
5 tabs: Home (home), Puja (diya), Panchang (sun), Samagri (bag), Profile (user). White, top border line, padding `8 6 28` (safe area). Active: teal icon in a 52×30 teal50 pill, 3px teal indicator above, label 11.5/800. Inactive: muted, 11.5/600.
**Floating "View cart" pill** above the tab bar when cart has items (teal, radius 30, 3 overlapping thumbnails, "View cart / 3 items · ₹1,673", shadow `0 10px 24px rgba(8,96,109,.35)`).

### Sticky bottom CTA bar (`PayBar`)
White, top border, padding `12 16 30`. Left: overline label (11/700 muted) + amount 22/800 (+ optional green/teal sub-line). Right: full-width primary button with chevron.

---

## Screens

### 01 · Welcome & login
1. **Splash** — cream bg with saffron radial glow; 3 concentric rings (300 dashed / 230 / 160 filled `#FFF6E6`) around a 64px saffron diya; logo (40h), "श्रद्धा से · विधि से" 20px `#9A5A16`, tagline 15px ink2; footer "TRUSTED BY 50,000+ FAMILIES" 12/700 tracked.
2. **Onboarding** (3-page carousel, page 1 shown) — logo + EN/हि toggle; 400h photo card radius 28 with "Verified pandits only" floating chip; headline 30/800 "Every sanskaar, performed *the right way*" (accent saffronDeep); body; pager dots (active 24×6 teal); Skip (ghost 110w) + Next (primary).
3. **Login** — Blinkit-style wall: 3 rows of 104×104 radius-24 tiles (offset rows) fading to white; 72px app icon tile; "India's sacred ritual app" 27/800; country selector (flag + chevron, 70w) + phone field (focused); Continue (disabled `#B9C7C8` until 10 digits); OR; Google + WhatsApp outline buttons; T&C footer.
4. **OTP** — 4 boxes 64×68 radius 16, active has teal ring; resend timer; green "Get OTP on WhatsApp instead" row; system numeric keypad. Auto-submit on 4th digit.
5. **Tell us about you** — Full name, Gotra + Nakshatra, City (location pin), tradition 2×2 selectable cards (Pahadi / North Indian / Bengali / South Indian with native-script sublabel), pandit language multi-select chips; Skip in header; Continue.

### 02 · Home & discovery
6. **Home** (scroll) — 
   - Header gradient with faint saffron mandala top-right. "SAMAGRI IN / **14 minutes**" (26/900) + address row with chevron (opens address sheet); bell (badge) + avatar.
   - Search bar 50h with rotating placeholder `Search "Satyanarayan katha"` + mic.
   - Panchang strip (tithi, sunrise/sunset, Rahu kaal in kumkum) → Panchang.
   - Festival hero carousel 196h radius 22, kumkum gradient, deity art right, "IN 3 DAYS" tag, CTA white pill.
   - Category grid 4×2: tiles 70×70 radius 22 (saffron50 for commerce/puja, teal50 for tools); Samagri has "15 MIN" green badge.
   - "Book a pandit in 30 seconds" card: Puja + Date fields, Find Pandit Ji, free-consultation link.
   - Upcoming booking teal card (date block, pandit, status dot) → booking tracking.
   - Popular pujas (filter chips + 2-col tiles: 118h image, name, Devanagari, from ₹, rating).
   - "Samagri in 15 mins" horizontal products with ADD overlapping image bottom-right.
   - Live darshan cards 150×190 with red LIVE tag + viewer count.
   - Top Pandit Ji cards (verified tick on avatar, Consult free / Book now).
   - Trust block (cream): stats + testimonial; footer sign-off "श्रद्धा से, विधि से।" in `#C9C2AE`.
   - Tab bar + View cart pill.
7. **Search** — focused input with clear; type chips; grouped results (Pujas & Anushthan with match highlight on saffron50, Samagri with ADD, Trending chips).
8. **Puja services** — category chips, count + Filter + Sort; list cards: 96×110 image (optional tag), name, Devanagari, duration/pandits meta, from price + strike, BOOK stepper.

### 03 · Book a puja
9. **Puja detail** — 360h hero image with back/heart/share circles & carousel dots; sheet overlaps −22 with radius 24 top. Tags, title 27/900, Devanagari, description; 4-stat strip (rating / duration / pandits / booked this month). **Packages**: 3 columns Samanya ₹5,100 / Uttam ₹7,100 (selected, "RECOMMENDED" saffron flag) / Vishesh ₹11,000 + included checklist. **Puja vidhi** numbered timeline (saffron line). Samagri-included card with item thumbnails "+27". Reviews carousel. PayBar "UTTAM · 2 PANDITS ₹7,100 · Book this puja".
10. **Step 1 · Date & muhurat** — 3-segment progress; month calendar (selected teal 38×38 radius 12, today outlined, saffron dot = shubh day, past greyed); slot grid 2-col (best slot selected with star, Rahu kaal disabled & struck); city note.
11. **Step 2 · Sankalp & address** — family member checklist (+ Add member), special-intention textarea, address card (Change), samagri radio (Pandit brings +₹1,138 / I'll arrange ₹0). Total ₹8,238.
12. **Step 3 · Review** — summary card (date, address, sankalp, pandit assignment rule), dashed saffron coupon card, bill details (travel FREE struck, coupon −₹500), green refund policy note. PayBar "Saved ₹650".
13. **Payment** — teal gradient amount card; UPI list (GPay/PhonePe/Paytm/UPI ID, radio); more ways (card, wallet, **pay ₹1,000 now rest after puja**). CTA "Pay ₹7,738 with Google Pay".
14. **Booked** — cream with marigold dots; 76px green check in white disc with saffron halo rings; "शुभमस्तु"; summary card + Add to calendar / Share invite; Track booking / Back to home.
15. **Pandit on the way** — teal header "Pandit Ji arriving in 18 min"; card with map (route dashed teal, pandit saffron pin, home teal pin) + pandit row (chat / call); dark **start-code** bar "4821"; status timeline (green done, saffron current, grey future); Reschedule / Cancel.

### 04 · Pandit Ji
16. **Pandit list** — search, filter chips; cards with avatar + verified tick, green rating pill, specialities tags, next available (green if Today), Consult free / Book.
17. **Pandit profile** — warm header w/ mandala, 104 avatar ring, Devanagari name, verified tags; stats card; About; language tags; teal50 verification checklist; pujas performed list with prices; reviews. Bottom: chat icon + Book Pandit Ji.
18. **Free consultation** — chosen pandit (Available now), topic chips, connect mode 3 cards (Voice / Video / Chat), When radio (Call me now / Schedule), phone field. CTA "Request free call".

### 05 · Panchang, festivals & temples
19. **Panchang** — kumkum gradient header with sun-ray motif; date switcher; big tithi (34/900) + Devanagari + end time; overlapping card sunrise/sunset/moonrise/moonset; 2×2 Vaara/Nakshatra/Yoga/Karana; Shubh samay (green dots) & Avoid (kumkum) lists; upcoming festival nudge.
20. **Festivals & vrat** — List / Month segmented control, filter chips, month groups; rows with date block (highlighted festival filled saffron, others tinted), bell reminder toggle.
21. **Festival detail** — 300h banner with kumkum fade; Ghatasthapana muhurat teal card; "Nine forms of Devi" day selector; recommended pujas + samagri kit with ADD; Remind me / Book Navratri puja.
22. **Anushthan** — deity circle with halo; tag; title; 4-stat tiles; mode radio (live video ₹51,000 / at home ₹71,000 / tirth ₹61,000); deliverables list.
23. **Temples & yatra** — search; 3 mode tiles (Chadhava & puja / Live darshan / Yatra); Char Dham feature card; temple list with from-price & tags.

### 06 · Samagri store
24. **Store** — mint header "SAMAGRI DELIVERY IN 14 minutes" + bolt; search; kumkum promo banner; **left category rail 80w** (46 circle icons, active white bg + 4px teal right indicator) + 2-col product grid (112h image, blue % OFF ribbon, ADD overlapping, ETA, name 2 lines, size, price/strike). Tab bar + cart pill.
25. **Product** — cream image area, ETA + verified tags, title + Devanagari, rating pill, price + % OFF, kit size selector, "What's inside" list, 3 assurance tiles. Bottom: qty stepper + "Add to cart · ₹1,138".
26. **Cart** — delivery ETA shipment card with line items & steppers; "Pandit Ji also recommends" carousel; coupon row; bill details + green savings banner. Bottom: Pay-using selector + teal block "₹2,013 TOTAL · Place order".
27. **Order tracking** — map top 380h with rider pin; bottom sheet (handle) "Arriving in **6 mins**" green 40/900; 4-step progress; rider card with call; order summary.

### 07 · Account & states
28. **My bookings** — tabs Upcoming/Completed/Cancelled (teal underline 2.5); booking cards with status tag and footer info row; completed with Rate.
29. **Profile** — warm header, avatar 64, edit; **Bhakt+ Gold** dark membership card; 3 stat cards; two grouped menus; Log out (kumkum).
30. **Family members** — saffron tip; member list with tags (Mundan due / Add birth details); Add family member CTA.
31. **Empty cart** — 120 saffron50 circle + bag; copy; Browse samagri; text link.
32. **Payment failed** — kumkum50 circle + X; reassurance copy; slot-held countdown chip; Retry / Use another method.

(Plus Style guide artboard.)

---

## Interactions & Behavior
- **Navigation:** Tab stack (5 tabs) + native stack per tab. Booking flow is a modal stack (Detail → Muhurat → Sankalp → Review → Payment → Success) with the 3-segment progress bar on steps 1–3.
- **Transitions:** native push (iOS slide / Android fade-through). Bottom sheets (address picker, filter, sort) — spring, 300ms.
- **Press states:** buttons scale 0.97 + 10% darker; cards opacity 0.9. Chips/radios switch instantly.
- **ADD stepper:** tap ADD → becomes `− 1 +` (150ms width/colour animate); qty 0 → back to ADD; updates floating cart pill (slide up from tab bar 250ms).
- **Home search placeholder** rotates through puja names every 2.5s (vertical slide).
- **Carousels:** festival hero auto-advances 4s; pager dot expands to 18–24w when active.
- **Muhurat:** past dates & Rahu-kaal slots disabled; default selects first "Shubh/Best" slot.
- **Login:** Continue enabled only at 10 digits (bg → teal). OTP auto-advance per box, auto-verify on 4th, 30s resend timer, WhatsApp fallback.
- **Tracking:** live ETA, pin animation; start code shown when pandit is ≤10 min away.
- **Payment failure:** hold muhurat slot 10 min, countdown visible.
- **Loading:** skeleton blocks using `#EEF1F0` with shimmer; "Lighting the diya…" small caption.
- **Errors:** offline full-screen state; toasts (ink bg, white text, saffron Retry).
- **Language:** EN / हि toggle (onboarding & settings) — all copy must be i18n-ready; Devanagari secondary labels always shown.

## State Management
- `auth` (phone, otp state, token), `user` (name, gotra, nakshatra, city, tradition, languages), `family[]`.
- `location/address` (selected address, serviceable, delivery ETA).
- `bookingDraft` {pujaId, packageId, date, slot, sankalpMemberIds[], intention, addressId, samagriMode, coupon} → priced quote from API.
- `cart` {items[{sku, qty}], totals} — global, drives cart pill & badges.
- `bookings[]`, `orders[]` with realtime status (websocket / polling) for tracking screens.
- `panchang(date, city)`, `muhurats(pujaId, month, city)`, `festivals(month)`, `reminders`.
- Data: pujas & packages, pandits (+availability), products/categories, temples, payment methods, wallet.

## Assets
- `assets/logo.png` — JIPANDITJI wordmark extracted from the developer PDF (low-res; **replace with the vector logo**).
- `assets/family.jpg` — family Grih Pravesh photo from the developer PDF (onboarding, Grih Pravesh tile/hero).
- All other imagery is placeholder (`Ph` component, labelled e.g. "Maa Durga artwork", "Kedarnath aarti", "Product photo"). Needs real deity artwork, temple photos, and product photography (on cream/white backgrounds, square).
- Fonts: Google Fonts — Hanken Grotesk, Tiro Devanagari Hindi, Noto Sans Devanagari.
- Icons: inline SVG paths in `app/kit.jsx`.

## Files
- `JIPANDITJI App UI.html` — entry; canvas layout + Style guide.
- `app/kit.jsx` — tokens (`JP`), icon paths (`IP` / `Ic`), primitives: Screen, Status, TopBar, IconBtn, Btn, Add, Chip, Tag, Ph, Avatar, Sec, Card, Rupee, BottomBar, PayBar, TabBar, Field, Radio, Check, Steps, Logo, Hi.
- `app/screens-onboard.jsx` — Splash, Onboarding, Login, OTP, Profile setup, Home, Search.
- `app/screens-booking.jsx` — Puja list, Puja detail, Muhurat, Sankalp, Review, Payment, Success, Booking tracking.
- `app/screens-spiritual.jsx` — Pandit list, Pandit profile, Panchang, Festivals, Festival detail, Anushthan, Temples, Consult.
- `app/screens-store.jsx` — Store, Product, Cart, Order tracking, My bookings, Profile, Family, Empty cart, Payment failed.
- `design_canvas.jsx` — presentation canvas only (not part of the app).