magma-bot System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "magma-bot" project, which aims to build a premium, high-end restaurant website for 'The Kutch Kitchen,' a vegetarian fine-dining destination located at the Smritivan Earthquake Memorial, Bhuj. The website will feature immersive and modern design elements with a focus on 3D-inspired aesthetics.

System Overview

The Kutch Kitchen website will serve as a digital gateway for customers to explore the restaurant's offerings, make reservations, and place online orders. The site will be designed to provide an immersive experience with 3D elements, parallax scrolling, and a sophisticated color palette. It will include core functionalities such as a 3D hero section, interactive menu, online ordering system, and reservation module. The website will be mobile-responsive, SEO-optimized, and integrated with local payment gateways.

Functional Requirements

• As a Visitor, I should be able to view a full-screen immersive landing page featuring a slow-motion cinematic video or 3D animation of the Bhujio Dungar hill and the restaurant entrance.
• As a Customer, I should be able to browse an interactive, filterable digital menu categorized by (Kutchi, North Indian, South Indian, Desi Chinese).
• As a Customer, I should be able to use a 'Quick Add' button to add items to my cart from the menu.
• As a Customer, I should be able to customize menu items (e.g., spice levels, additions) during the ordering process.
• As a Customer, I should be able to view a cart drawer that slides out from the right to review my order.
• As a Customer, I should be able to securely process payments via local payment gateways (UPI, Credit/Debit Cards).
• As a Visitor, I should be able to make table reservations using a calendar-based booking system.
• As a Visitor, I should see a 'Book a Table' call-to-action button pinned to the header for easy access.
• As a Customer, I should be able to access AI-powered customer service for assistance.
• As a Visitor, I should be able to navigate to the restaurant using integrated Google Maps.

User Personas

• Visitor: Individuals exploring the restaurant's offerings and ambiance.
• Customer: Individuals placing orders or making reservations.
• Administrator: Restaurant staff managing the menu, reservations, and customer interactions.

Core User Flows

• Visitor lands on the homepage -> experiences 3D hero section -> explores the menu -> makes a reservation.
• Customer browses the menu -> uses 'Quick Add' to select items -> customizes items -> reviews cart -> proceeds to checkout -> completes payment.
• Visitor uses the 'Book a Table' button -> selects date and time -> confirms reservation.

Visuals Colors and Theme

• primary: #A0522D (sienna)
• primary_light: #CD853F (peru)
• secondary: #556B2F (dark olive green)
• accent: #FFD700 (gold)
• highlight: #FF8C00 (dark orange)
• bg: #F5F5DC (beige)
• surface: rgba(255, 248, 220, 0.8) (cornsilk)
• text: #2F4F4F (dark slate gray)
• text_muted: #696969 (dim gray)
• border: rgba(105, 105, 105, 0.2) (dim gray)

Signature Design Concept

The homepage will feature an interactive 3D model of the Bhujio Dungar hill and the restaurant entrance. Users can hover over different sections to reveal subtle animations and depth-of-field effects. The 3D elements will include signature dishes like Dabeli or Dal Bati, which will rotate and display detailed textures when clicked. The use of @react-three/fiber and @react-three/drei will enable these interactive 3D experiences. The parallax scrolling will create a sense of depth as users navigate through the site, with elements moving at different speeds to enhance the immersive experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth effects achieved through scroll-triggered animations. Each section will have a distinctive core mechanic, such as 3D scenes or kinetic typography, to maintain user engagement. Internal pages will adopt a "static" model for clarity and ease of navigation.

Non-Functional Requirements

• The website must be 100% mobile-responsive.
• The website must be SEO-optimized for the keyword 'Best restaurant in Bhuj.'
• The website must ensure secure payment processing.
• The website must integrate with Google Maps for navigation.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India, considering local payment gateways and cultural preferences.
• The design will adhere to the specified color palette and typography for brand consistency.
• The website will support both desktop and mobile browsers.

Glossary

• 3D Hero Section: A visually engaging section of the website featuring 3D animations.
• Parallax Scrolling: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
• AI Customer Service: An automated system providing customer support using artificial intelligence.
• UPI: Unified Payments Interface, a real-time payment system in India.