System Requirements Document (SRD)

Project Name: inner-cafe

1. Introduction

The inner-cafe project is a high-end, ultra-premium single-page website for "The Grey House," a rooftop cafe brand located in Bareilly, India. The website is designed to deliver a luxurious, aesthetic, and professional experience that mirrors the ambiance of a rooftop lounge. It aims to captivate users with cinematic visuals, smooth animations, and smart features, creating an unforgettable digital experience.

This document outlines the system requirements for the development of the inner-cafe website, ensuring it meets the high-end expectations set by Bobby Dewal.

2. System Overview

The inner-cafe website will serve as the digital face of "The Grey House," offering users a seamless and luxurious experience. It will feature:

• A single-page structure with smooth scrolling and anchor-based navigation.
• A cinematic hero section with high-quality video backgrounds.
• A dark mode aesthetic with a glassmorphism UI and gold accents.
• Functional systems for login/signup, table reservations, and online ordering.
• A smart AI chatbot for conversational interactions, dish recommendations, and FAQs.
• Smooth micro-animations, transitions, and a modern preloader for a polished user experience.
• Fully responsive design optimized for mobile, tablet, and desktop.

The website will be optimized for mobile responsiveness, fast loading, and SEO, ensuring a high-end experience across all devices.

3. Functional Requirements

As User:

• I should be able to view a cinematic hero section with a rooftop cafe vibe.
• I should be able to browse featured dishes, reviews, and gallery previews on the Home section.
• I should be able to explore the menu with interactive filtering and hover effects.
• I should be able to reserve a table with a booking form (Name, Date, Time, Guests).
• I should be able to order food online with a cart and checkout system.
• I should be able to log in or sign up to access my dashboard.
• I should be able to view my bookings and orders in the dashboard.
• I should be able to chat with an AI chatbot for dish recommendations, reservations, and FAQs.
• I should be able to view offers and discounts.
• I should be able to see reviews and ratings for the cafe.

As Admin:

• I should be able to manage user accounts and bookings.
• I should be able to update the menu and offers.
• I should be able to view analytics for reservations and online orders.

4. User Personas

1. Guest

• Visits the website to explore the cafe's ambiance, menu, and reviews.
• Can browse the menu and gallery but cannot make reservations or orders without signing up.

2. Registered User

• Has access to login/signup functionality.
• Can make table reservations, place online orders, and view their dashboard.

3. Admin

• Manages the website's content, user accounts, and analytics.
• Updates menu items, offers, and reviews.

5. Visuals Colors and Theme

Color Palette

• Background: #1C1C1C (Deep Charcoal)
• Surface: #2E2E2E (Slate Grey)
• Text: #FFFFFF (Pure White)
• Accent: #D4AF37 (Gold)
• Muted Tones: #A9A9A9 (Muted Grey)

Typography

• Primary Font: Playfair Display (for headings and tagline)
• Secondary Font: Poppins (for body text and UI elements)

6. Signature Design Concept

Cinematic Rooftop Hero Section

The Home Section will feature a fullscreen cinematic hero section that immerses users in the rooftop lounge experience.

• Visuals: A looping high-quality video of a rooftop cafe at sunset, with soft ambient lighting and a cozy vibe.
• Tagline Animation: "The Grey House | Cafe | Terrace | Lounge | Grey Courtyard" will fade in with a gold shimmer effect.
• Call-to-Action: A prominent "Reserve Table" button with a glowing hover effect.
• Micro-Animations: Subtle parallax scrolling as users move down the page, with elements like the featured dishes slider and gallery preview fading in smoothly.
• Preloader: A modern animation of a gold coffee cup icon filling up, transitioning into the hero section.

This design will immediately captivate users and set the tone for the rest of the website.

7. Non-Functional Requirements

• The website must load in under 2 seconds on a 4G connection.
• It must be fully responsive across all devices and screen sizes.
• It must be SEO-optimized for high search engine rankings.
• The AI chatbot must respond within 1 second.
• The website must support both light and dark modes.
• The booking system must provide real-time confirmation feedback.
• The login/signup system must be fully functional with secure authentication.
• Smooth scrolling and anchor-based navigation must be implemented.

8. Tech Stack

Frontend

• React for Web

Backend

• Python with FastAPI

Database

• MySQL (with Alembic for migrations)

AI Models

• GPT 5.4 for user-friendly responses
• Claude 4.6 Opas for coding and academic queries

AI Tools

• LangChain
• LiteLLM for LLM Routing

Orchestration

• Docker for local development
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

• Users will primarily access the website from India, so the default timezone will be IST (Indian Standard Time).
• The website will use INR (₹) as the default currency for pricing.
• High-quality images and videos will be provided by the client.
• The website will be hosted on a cloud platform with sufficient resources to handle peak traffic.
• The website will feature a single scrolling landing page for streamlined navigation.

10. Glossary

• Hero Section: The topmost section of a webpage, often featuring a large image or video.
• Glassmorphism: A design style that uses frosted glass-like effects.
• Micro-Animations: Small, subtle animations that enhance user experience.
• AI Chatbot: A conversational interface powered by artificial intelligence.
• Preloader: A loading animation displayed while the website is loading.
• Sticky Navbar: A navigation bar that remains visible as the user scrolls.
• Scrolling Landing Page: A single-page design where users scroll to access different sections.

End of Document.