epic-act System Requirements Document

Introduction

The epic-act project aims to develop a modern, high-end AI astrology consultation platform. This document outlines the system requirements for the frontend of the epic-act project, focusing on the homepage features and design aesthetics.

System Overview

The epic-act platform will provide users with an engaging and interactive astrology consultation experience. The focus is on delivering a visually appealing and user-friendly interface that incorporates AI-driven horoscope generation and booking functionalities.

Functional Requirements as Story Points

• As a User, I should be able to see a catchy, mystical headline on the homepage to capture my interest.
• As a User, I should be able to interact with an animated natal chart background on the homepage.
• As a User, I should be able to access "Try Free AI Chat" and "Book Consultation" CTA buttons prominently displayed in gold and teal.
• As a User, I should be able to preview an interactive AI Astro Assistant chat interface that shows real-time AI horoscope generation.
• As a User, I should be able to toggle between voice and text in the AI Astro Assistant.
• As a User, I should be able to view daily "Action Cards" generated by the AI.
• As a User, I should be able to see a calendar with "Auspicious Time (Muhurat)" indicators for booking consultations.
• As a User, I should be able to select consultation slots of 15, 30, or 60 minutes.
• As a User, I should be able to filter astrologers by tags such as Vedic, Western, Tarot, and Numerology.
• As a User, I should be able to view feature highlights like AI Meeting Summaries, Birth Chart/Kundli Analysis, and Relationship Synastry matching.
• As a User, I should be able to see an interactive wallet and payment bar showing my balance and quick top-up options.
• As a User, I should be able to read testimonials and social proof displayed on glassmorphism cards with subtle gold star reviews.

User Personas

• User: Individuals seeking astrology consultations and horoscope insights. They are interested in exploring their cosmic blueprint and booking sessions with astrologers.

Core User Flows

1. User visits the homepage -> Interacts with the animated natal chart -> Clicks on "Try Free AI Chat" -> Engages with the AI Astro Assistant.
2. User visits the homepage -> Views the calendar -> Selects a consultation slot -> Filters astrologers -> Books a session.
3. User visits the homepage -> Views feature highlights -> Downloads AI Meeting Summaries -> Engages with Birth Chart/Kundli Analysis.
4. User visits the homepage -> Checks wallet balance -> Uses quick top-up options -> Proceeds with payment.

Visuals Colors and Theme

• primary: #008080 (Teal)
• primary_light: #66CCCC (Light Teal)
• secondary: #D4AF37 (Golden)
• accent: #A3C1AD (Light Green)
• highlight: #F5F5DC (Beige)
• bg: #FFFFFF (White)
• surface: #F0F0F0 (Light Grey)
• text: #808080 (Grey)
• text_muted: #B0B0B0 (Muted Grey)
• border: #E0E0E0 (Subtle Grey)

Signature Design Concept

The homepage will feature an interactive celestial theme with a dynamic, animated natal chart as the centerpiece. Users can hover over different constellations to reveal insights and predictions. The chart will be surrounded by floating, glowing orbs representing different zodiac signs, which users can click to explore more about each sign. The design will incorporate smooth transitions and micro-animations to enhance the mystical experience. Libraries used will include motion/react for animations and transitions.

Landing Hero Motion Brief

The landing hero will feature a continuously moving 2D composition where a user's birth details are inputted into a celestial map. The map dynamically transforms, highlighting constellations and zodiac signs, culminating in a personalized horoscope prediction. The animation will loop every 10 seconds, with interactive elements allowing users to pause and explore specific sections. The design will maintain a balance between visual appeal and readability, ensuring that CTAs remain unobstructed.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The homepage will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished user experience.

Non-Functional Requirements

• The frontend must be responsive and accessible across all devices and screen sizes.
• The design should maintain high performance, ensuring fast load times and smooth interactions.

Tech Stack

• Frontend: React/Next.js
• Styling: Tailwind CSS

Assumptions and Constraints

• The project will focus solely on the frontend development, with no backend integration at this stage.
• The design will adhere to the specified color palette and visual guidelines.

Glossary

• AI Astro Assistant: An interactive chat interface providing AI-generated horoscope insights.
• Natal Chart: A chart representing the positions of celestial bodies at the time of a person's birth.
• Muhurat: Auspicious times for performing important activities.

This document outlines the requirements for the epic-act project's frontend, focusing on delivering a visually engaging and interactive astrology consultation platform.