ASTROBIZZ is a new, premium, mobile-first Vedic Astrology application interface built specifically for smartphones. It is not a desktop website compressed into a phone viewport; every surface is designed for a 360px–430px mobile screen with large touch targets, smooth motion, and a luxurious midnight-navy, royal-blue, and champagne-gold visual language.
The product lets a person enter their birth details through a guided multi-step Kundali form — using a premium scrolling wheel date selector, a scrollable time selector with AM/PM and a "Birth Time Unknown" option, and a searchable birthplace selector that returns accurate latitude and longitude — then generate a real Vedic birth chart through actual astronomical calculation APIs. The result is presented on a premium mobile dashboard covering Birth Details, Ascendant, Moon Sign, Nakshatra and Pada, D1 Rashi Chart, D9 Navamsa Chart, Planetary Positions, House Details, Vimshottari Mahadasha, Antardasha, and Important Yogas, organized with cards, tabs, expandable sections, and readable tables.
The audience is premium mobile users seeking a calm, expensive, instrument-grade astrology experience. The app also provides an Astrology Services section, an AI Astrologer section for asking astrology questions, and a Profile section, all reachable through an elegant app-like mobile navigation with ASTROBIZZ branding.
The final requirement is to actually build and implement the complete mobile interface — not a mockup, screenshot, or design suggestion.
ASTROBIZZ is delivered as a React mobile-first frontend backed by a shared FastAPI backend, with MariaDB for application-owned persistent data and a LiteLLM gateway (backed by PostgreSQL) for the backend's model-provider calls. The frontend renders the ASTROBIZZ-branded mobile shell, the multi-step Kundali Generator with wheel-style date and time selectors and searchable birthplace selection, the Kundali Result dashboard, Astrology Services, AI Astrologer, and Profile. The backend exposes the application APIs, performs the astronomical calculation calls, converts AM/PM to 24-hour time before the calculation request, and brokers AI Astrologer model calls through LiteLLM.
Active human actors are the Kundali Seeker, the AI Astrologer User, and the Astrology Service Client. Application-owned identity is used: anonymous visitors reach Landing, Login, and Sign Up; protected work (Kundali Generator, Kundali Result, Astrology Services, AI Astrologer, Profile) requires a verified account so that a person's birth details, generated Kundali, service requests, and AI conversation history remain bound to them and can be resumed.
Current scope is the mobile interface and its supporting backend behavior described in this document. Out of scope: desktop-first layouts, fabricated astrological results, random birthplace coordinates, and mockup-only delivery.
Removed from scope
ASTROBIZZ is a first-party mobile application interface. The React frontend owns all human interaction: the branded mobile shell and navigation, the multi-step Kundali form with its wheel date selector, time selector, and birthplace search, the generation progress experience, the result dashboard, Astrology Services, AI Astrologer, and Profile. The shared FastAPI backend owns the application APIs, the astronomical calculation integration, the AM/PM-to-24-hour conversion before the calculation request, persistence of birth details and generated Kundali results in MariaDB, and brokering AI Astrologer model calls through the LiteLLM gateway (which uses its own PostgreSQL store, separate from application-owned data).
Access is application-owned. Landing, Login, and Sign Up are anonymously reachable. Kundali Generator, Kundali Result, Astrology Services, AI Astrologer, and Profile require a verified account so that durable, actor-specific state — birth details, generated charts, service requests, and AI conversation history — is privately owned and resumable. A protected destination never establishes access to itself; identity is established on the anonymous Login or Sign Up surfaces.
Astronomical results are produced only by actual astronomical calculation APIs; the app never displays fabricated results. Birthplace coordinates come only from a confirmed location suggestion; the app never uses random coordinates. All current behavior is delivered now; no future-horizon features are committed in this document.
Not applicable — no reference directive with content_source was supplied.
FR-1 — Premium mobile-first ASTROBIZZ interface (explicit) As a Kundali Seeker, I should use a completely new, premium, mobile-first Vedic Astrology interface branded ASTROBIZZ, so that the experience feels like a high-end astrology app built for smartphones.
FR-2 — Luxury theme and motion (explicit) As a Kundali Seeker, I should see deep midnight navy blue, royal blue gradients, premium champagne gold, elegant celestial illustrations, beautiful planetary animations, subtle golden glowing effects, premium typography, and smooth transitions and micro-interactions, so that the app feels luxurious and visually impressive.
FR-3 — Mobile navigation with ASTROBIZZ branding (explicit) As a Kundali Seeker, I should use a beautiful mobile navigation with ASTROBIZZ branding, an elegant menu, and entries for Kundali Generator, Astrology Services, AI Astrologer, and Profile, so that I can move through the app in a clean, app-like layout.
FR-4 — Multi-step Kundali form (explicit) As a Kundali Seeker, I should enter Full Name, optional Gender, Date of Birth, Time of Birth, and Place of Birth in a multi-step Kundali generation form with beautiful, easy-to-use controls, so that I can supply accurate birth details.
FR-5 — Wheel-style Date of Birth selector (explicit) As a Kundali Seeker, I should select Date of Birth with separate scrollable Day, Month, and Year columns, smooth vertical scrolling, clearly highlighted selected values, an elegant gold selection indicator, easy year navigation, and proper leap-year and month-length validation, so that date entry feels like a premium native mobile selector.
FR-6 — Time of Birth selector with AM/PM and unknown option (explicit) As a Kundali Seeker, I should select Time of Birth with scrollable hour and minute columns, separate AM/PM selection, a clearly highlighted selected time, smooth touch scrolling, and a "Birth Time Unknown" option, so that I can record my birth time accurately or mark it unknown.
FR-7 — AM/PM to 24-hour conversion before calculation (explicit) As a Kundali Seeker, I should have my selected AM/PM time correctly converted to 24-hour time before the calculation request is sent, so that the astronomical calculation uses the correct time.
FR-8 — Searchable birthplace selector with accurate coordinates (explicit) As a Kundali Seeker, I should search a city by name, see autocomplete suggestions showing city, state, and country, obtain accurate latitude and longitude, and confirm my birthplace, so that my chart is calculated for the correct location.
FR-9 — Gold-accented Generate My Kundali action (explicit) As a Kundali Seeker, I should tap an impressive gold-accented "Generate My Kundali" button to start the calculation, so that my Kundali is generated from my confirmed details.
FR-10 — Astronomical loading animation and calculation progress (explicit) As a Kundali Seeker, I should see elegant astronomical loading animations and calculation progress while my Kundali is generated, so that I understand the calculation is underway.
FR-11 — Real astronomical calculation (explicit) As a Kundali Seeker, I should have planetary positions, Ascendant, Moon Sign, and the birth chart calculated through actual astronomical calculation APIs, so that I never see fabricated results.
FR-12 — Kundali Result dashboard content (explicit) As a Kundali Seeker, I should view a beautiful mobile dashboard showing Birth Details, Ascendant, Moon Sign, Nakshatra and Pada, D1 Rashi Chart, D9 Navamsa Chart, Planetary Positions, House Details, Vimshottari Mahadasha, Antardasha, and Important Yogas, so that I can read my complete Kundali.
FR-13 — Premium cards, tabs, expandable sections, readable tables (explicit) As a Kundali Seeker, I should read the dashboard through premium cards, tabs, expandable sections, and readable tables, so that dense astrological data stays legible on a phone.
FR-14 — Mobile experience constraints (explicit) As a Kundali Seeker, I should use the app on 360px–430px screens with no horizontal scrolling, no overlapping elements, no clipped text, large touch-friendly controls, smooth animations, proper spacing, and fast, intuitive navigation, so that the experience feels native and effortless.
FR-15 — Astrology Services (explicit) As an Astrology Service Client, I should open Astrology Services to find and use astrology services, so that I can complete a service request in the app.
FR-16 — AI Astrologer (explicit) As an AI Astrologer User, I should open AI Astrologer to ask astrology questions and receive guidance in the app, so that I get answers within ASTROBIZZ.
FR-17 — Profile section (explicit) As a Kundali Seeker, I should open the Profile section from the mobile navigation, so that I can see my profile and my owned records.
FR-18 — Account enrollment and verification (required_inference) As a Kundali Seeker, I should enroll or verify an account before protected app work, so that my birth details, Kundali results, service requests, and AI conversations remain privately mine and resumable.
FR-19 — Confirm city suggestion before calculation (required_inference) As a Kundali Seeker, I should confirm a city suggestion before the app sends the calculation request, so that the coordinates used are the ones I chose.
FR-20 — 24-hour conversion enforced before request (required_inference) As a Kundali Seeker, I should have the app enforce 24-hour conversion before the calculation request, so that the request is never sent with an ambiguous time.
Muse: MARQ by Garmin — a luxury instrument for the night sky. The app must feel like a precision instrument: calm, expensive, and dial-like.
Headline: "A luxury instrument for the night sky."
Mode: Dark mode only.
Color tokens (exact hex by role):
#0A1024 (deep midnight navy — takes ~70% of the surface).#121A33 (dark card ground).#F3EEE2 (warm off-white).#1E3A8A (royal blue — chart bands and primary button edge).#D6B36A (champagne gold — selection, gauges, key numbers).#8E97AD (secondary labels).#2A3555 (1px card border).#D6B36A at under 12% opacity.Typography:
Shape language: Circular gauges, thin gold bezel rings, and ruled data rows. Cards use 14px radii with a 1px #2A3555 hairline.
Layout: One mobile column from 360px to 430px. Fixed bottom tab bar with four gold-icon tabs. Each result block is a dark card with a ruled header row.
Imagery: Macro celestial renders — a gold dial ring, a faint topographic star grid, and one glowing planet sphere. No stock people.
Avoid: White or near-white backgrounds; blue gradient blobs behind the hero; identical hover-lift card grids; playful rounded toy shapes; light-mode charts with thin grey text.
The public entry is a full-bleed midnight navy sky. A large gold-ringed astrolabe dial sits low and bleeds off the right edge, rendered in dimensional CSS with a slow planetary orbit and a faint topographic star grid behind it. The ASTROBIZZ wordmark and one 32px Saira Condensed headline stack at the top left over the dial, with the primary "Begin" control and a secondary "Sign In" control beneath. The dial's gold bezel ring catches a subtle glow under 12% opacity; the planet sphere drifts on a slow orbit. Readable text and controls remain whole at 375px, 768px, and 1280px, wrapping or scaling with clamp(); only the dial imagery bleeds off the edge. With prefers-reduced-motion, the dial and planet render static at their composed positions.
Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css
Landing Hero Motion Brief
Signature moves carried through the app: the date wheel's fixed gold hairline band across three scroll columns with champagne scaled-up selected values; the Ascendant gauge's circular dial with tick marks and a gold needle that sweeps in on load; planetary table rows with tabular numerals and a thin gold rule between sign and degree columns; the bottom tab bar as a dark titanium rail with a gold glow under the active tab icon.
prefers-reduced-motion, provide a usable static arrangement; moving content wraps or scrolls so each item can be brought fully into view.
No comments yet. Be the first!