kvr guru System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "kvr guru" project. This project aims to create a website that serves as the main hub for the kvr guru brand, which includes branches such as Guru Mahal, Guru Lodge, and Guru Complex. The website will feature a profile for the owner, Raja Guru, and provide detailed information and booking facilities for each branch.

System Overview

The kvr guru website will be an interactive platform that showcases the various branches under the kvr guru brand. It will provide users with an engaging experience, allowing them to explore each branch's offerings, view detailed images, and make bookings. The website will also include a floating WhatsApp feature for easy communication.

Functional Requirements

• As a User, I should be able to view the profile of Raja Guru, including his name and phone number.
• As a User, I should be able to see three groups of boxes representing Guru Mahal, Guru Lodge, and Guru Complex on the homepage.
• As a User, I should be able to click on each box to navigate to a separate section dedicated to that branch.
• As a User, I should be able to view advanced-level image explanations and all details for each branch.
• As a User, I should be able to access booking facilities for each branch.
• As a User, I should be able to make payments through the website.
• As a User, I should be able to view the map location of each branch.
• As a User, I should be able to use a floating WhatsApp feature for communication.

User Personas

• Visitor: A general user who visits the website to explore the branches and make bookings.
• Admin: Raja Guru or a designated person responsible for managing the website content and bookings.

Core User Flows

• Visitor lands on the homepage -> Views Raja Guru's profile -> Sees three branch boxes -> Clicks on a branch box -> Navigates to the branch section -> Views images and details -> Makes a booking -> Completes payment -> Receives confirmation.
• Admin logs into the website -> Updates branch details and images -> Manages bookings and payments -> Responds to inquiries via WhatsApp.

Visuals Colors and Theme

• primary: #2E86C1 (a deep blue for brand identity)
• primary_light: #AED6F1 (a lighter blue for hover states)
• secondary: #F39C12 (a vibrant orange for emphasis)
• accent: #E74C3C (a bright red for CTAs and active states)
• highlight: #F7DC6F (a warm yellow for notifications)
• bg: #F4F6F7 (a light gray for the page background)
• surface: rgba(255, 255, 255, 0.9) (a white card/panel background)
• text: #2C3E50 (a dark gray for primary text)
• text_muted: #95A5A6 (a muted gray for secondary text)
• border: rgba(44, 62, 80, 0.2) (a subtle border color)

Signature Design Concept

The kvr guru website will feature an interactive 3D map on the homepage, where each branch (Guru Mahal, Guru Lodge, and Guru Complex) is represented as a floating island. Users can click on an island to zoom in and explore detailed information, images, and booking options. The islands will have subtle animations, such as swaying trees and flowing water, to create a dynamic and engaging experience. The 3D map will be built using @react-three/fiber and @react-three/drei for a seamless and immersive interaction.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth effect as users scroll through the content. Decorative elements, such as atmospheric clouds and distant landscapes, will move at different speeds to enhance the storytelling experience. Internal pages, such as booking and payment sections, will adopt a "static" model for clarity and ease of use.

Non-Functional Requirements

• The website must be responsive and accessible on various devices and screen sizes.
• The website should load within 3 seconds for optimal user experience.
• The website must be secure, ensuring safe transactions and data protection.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, with alembic for migrations
• AI Tools: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India, considering local preferences and currency.
• The website will integrate with existing payment gateways for transactions.
• The design and functionality will adhere to the latest web standards and best practices.

Glossary

• Raja Guru: The owner of the kvr guru brand.
• Branch: A specific location under the kvr guru brand, such as Guru Mahal, Guru Lodge, or Guru Complex.
• Parallax: A visual effect where background images move slower than foreground images, creating a sense of depth.
• 3D Map: An interactive representation of the branches as floating islands on the homepage.