System Requirements Document (SRD) for Mango-Website

1. Introduction

This document outlines the system requirements for the Mango-Website, a project aimed at creating a professional and visually appealing website for Eilly Makeover Teela, a 24-hour beauty parlour located at D392 Inderprastha, Tyagi Rd, Loni, Ghaziabad, Uttar Pradesh 201102. The website will serve as a digital presence for the business, showcasing its services, location, and customer engagement sections while offering features like online booking, reviews, and contact options.

The goal is to attract more customers, provide a seamless online experience, and highlight the parlour's tagline: "Come and enjoy our service best in price and time". The website will also emphasize the parlour's 24/7 availability and its convenient location.

2. System Overview

The Mango-Website will be a responsive, visually engaging, and easy-to-navigate platform designed to meet the needs of Eilly Makeover's customers. It will include the following key features:

• A homepage with a welcoming message, tagline, and quick access to essential sections.
• A "Services" page detailing the beauty services offered.
• A "Gallery" showcasing before-and-after transformations and the parlour's ambiance.
• A "Reviews" section for customer testimonials and feedback.
• A "Contact" page with the parlour's address, phone number, and a Google Map for directions.
• Prominent call-to-action buttons for booking appointments and contacting the parlour.
• A floating "Call Now" button for instant access to the parlour's phone number.

The website will be optimized for both desktop and mobile devices, ensuring accessibility for all users.

3. Functional Requirements

As a User:

• I should be able to view the homepage with a welcoming message, tagline, and quick links to services, gallery, and contact details.
• I should be able to browse a detailed list of beauty services offered by the parlour.
• I should be able to view a gallery of before-and-after photos and images of the parlour.
• I should be able to read and leave reviews about the parlour's services.
• I should be able to find the parlour's address, phone number, and directions via Google Maps.
• I should be able to book an appointment online.
• I should be able to call the parlour directly using a "Call Now" button.

As an Admin:

• I should be able to update the list of services and their descriptions.
• I should be able to upload and manage photos in the gallery.
• I should be able to moderate and respond to customer reviews.
• I should be able to manage online booking requests.

4. User Personas

1. Customer

• Description: Individuals seeking beauty services in Loni, Ghaziabad, Uttar Pradesh.
• Goals: Explore services, view gallery, read reviews, and book appointments.
• Pain Points: Difficulty finding reliable beauty services and booking appointments.

2. Admin

• Description: The owner or staff of Eilly Makeover managing the website.
• Goals: Update website content, manage bookings, and respond to customer reviews.
• Pain Points: Keeping the website updated and managing customer interactions efficiently.

5. Visuals Colors and Theme

Color Palette

• Background: #FDF6F0 (Soft Cream)
• Surface: #FBE4D5 (Champagne Peach)
• Text: #4A2E2E (Deep Plum)
• Accent: #D49A6A (Rose Gold)
• Muted Tones: #E6D5C3 (Warm Beige)

The color palette is designed to evoke elegance, warmth, and sophistication, aligning with the beauty parlour's identity.

6. Signature Design Concept

The "Shimmering Elegance" Landing Page

The homepage will feature a shimmering rose-gold gradient background that subtly shifts hues as users scroll. The tagline, "Come and enjoy our service best in price and time", will appear in bold, animated typography at the center of the screen.

Key features of the landing page:

• Interactive Animations: Floating icons (e.g., scissors, makeup brushes, spa symbols) will gently sway as users hover over them, creating a dynamic and engaging experience.
• Dynamic Transitions: Sections of the homepage will "slide" into view with a soft fade-in effect, ensuring a seamless browsing experience.
• Floating Call Button: A pulsing "Call Now" button will remain fixed on the screen, allowing users to instantly contact the parlour.
• Service Highlights Strip: A row of feature cards (e.g., Bridal Packages, Open 24/7, Expert Artists) will animate into view as users scroll.

This design will create a memorable first impression and set the tone for the rest of the website.

7. Non-Functional Requirements

• The website must load within 3 seconds on both desktop and mobile devices.
• The website must be responsive and compatible with all major browsers (Chrome, Firefox, Safari, Edge).
• The website must adhere to accessibility standards (WCAG 2.1 Level AA).
• The website must support both English and Hindi languages for localization.
• The website must be hosted on a reliable server with 99.9% uptime.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Tools

• GPT 5.4 for user-friendly responses (if chatbot integration is required)

Orchestration

• Docker
• Docker-Compose

9. Assumptions and Constraints

• The website will primarily target users in Loni, Ghaziabad, Uttar Pradesh, and nearby areas.
• The admin will have basic technical knowledge to manage the website's content.
• The website will not include e-commerce functionality (e.g., selling products online) at this stage.
• The website will rely on third-party services like Google Maps for location and directions.

10. Glossary

• Responsive Design: A design approach that ensures the website looks and functions well on all devices (desktop, tablet, mobile).
• Call-to-Action (CTA): Buttons or links that prompt users to take specific actions, such as "Book Now" or "Call Us."
• WCAG: Web Content Accessibility Guidelines, a set of standards for making web content accessible to people with disabilities.
• Alembic: A database migration tool for Python.
• Intersection Observer: A browser API used for implementing scroll animations and lazy loading.