System Requirements Document for prism-act

Introduction

The purpose of this document is to outline the system requirements for the "prism-act" project, an AI astrology consultation platform. This document will focus on the front-end design and user interface, incorporating the latest user requests and aesthetic guidelines.

System Overview

The "prism-act" project aims to create a modern, high-end AI astrology consultation platform. The platform will offer features such as AI horoscope generation, booking modules, and interactive user interfaces. The focus of this document is on the front-end design, which will be developed using React/Next.js and Tailwind CSS.

Functional Requirements as Story Points

• As a User, I should be able to view a hero section with a catchy, mystical headline and interactive 3D/animated natal chart background.
• As a User, I should be able to interact with an AI Astro Assistant that provides real-time horoscope generation with a voice/text toggle.
• As a User, I should be able to use a smart booking module with a calendar, slot selection, and astrologer list with filter tags.
• As a User, I should be able to view feature highlights such as AI Meeting Summaries, Birth Chart Analysis, and Relationship Synastry matching.
• As a User, I should be able to interact with an interactive wallet and payment bar showing my balance and quick top-up options.
• As a User, I should be able to view testimonials and social proof through glassmorphism cards with subtle gold star reviews.

User Personas

• General User: Interested in astrology and seeking personalized horoscope consultations.
• Astrologer: Provides live human sessions and consultations.
• Guest: Browses the platform without full access to personalized features.

Core User Flows

• User visits the homepage -> views hero section -> interacts with AI Astro Assistant -> books a consultation -> completes payment.
• Astrologer logs in -> updates availability -> reviews bookings -> conducts live sessions.

Visuals Colors and Theme

• primary: Beige (#F5F5DC)
• primary_light: Light Beige (#FAF0E6)
• secondary: Teal (#008080)
• accent: Golden (#FFD700)
• highlight: Light Green (#90EE90)
• bg: Beige (#F5F5DC)
• surface: Light Beige (#FAF0E6)
• text: Golden (#FFD700)
• text_muted: Light Green (#90EE90)
• border: Teal (#008080)

Signature Design Concept

The homepage will feature an interactive celestial map that users can explore. As users hover over different constellations, they will reveal insights and features related to astrology. The map will be rendered using @react-three/fiber for a 3D effect, allowing users to click and drag to explore the stars. The constellations will be highlighted in golden text, with teal and light green accents to guide the user through the experience.

Landing Hero Motion Brief

The landing hero will feature a continuously moving 2D composition using motion/react. The animation will depict a celestial scene where stars gather around a central zodiac symbol, which transforms to reveal personalized horoscope insights. This loop will last 10 seconds, with interactive elements allowing users to pause and explore specific zodiac signs. The animation will be responsive, adapting to different screen sizes while maintaining clarity and focus.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax." This will create a layered depth effect as users scroll, with decorative celestial elements moving at different speeds. Real content will remain in the normal flow, providing a visually rich first impression.

Non-Functional Requirements

• The front-end must be responsive and accessible across all modern browsers and devices.
• The design should maintain a high level of performance, ensuring smooth animations and interactions.

Tech Stack

• Frontend: React/Next.js, Tailwind CSS
• Backend: To be determined later
• Database: To be determined later

Assumptions and Constraints

• The backend development will be addressed in a future phase.
• The platform will initially focus on the Indian market, considering local astrology practices and preferences.

Glossary

• AI Astro Assistant: A feature that provides real-time horoscope generation.
• Glassmorphism: A design style using semi-transparent elements with a frosted-glass effect.
• Parallax: A scrolling effect that creates an illusion of depth by moving background and foreground elements at different speeds.