Salon Web. Idea

Introduction

The "Salon Web. Idea" project aims to create an online platform for a salon located at AMAN PALACE COMPLEX, Barwani, Madhya Pradesh, India. The salon offers a wide range of beauty and grooming services, and the website will facilitate online booking and provide information about the services offered.

System Overview

The Salon Web. Idea project will develop a user-friendly website that allows customers to explore salon services, book appointments online, and contact the salon for inquiries. The website will operate within the local timezone (IST) and cater to the Indian market, considering local preferences and currency (INR).

Functional Requirements as Story Points

• As a Customer, I should be able to view a list of all available salon services.
• As a Customer, I should be able to book an appointment online for any service.
• As a Customer, I should be able to view the salon's operating hours.
• As a Customer, I should be able to contact the salon via call or message.
• As a Customer, I should be able to view the salon's address and location on a map.
• As a Customer, I should be able to receive confirmation of my booking via email or SMS.
• As a Salon Admin, I should be able to manage service listings and update them as needed.
• As a Salon Admin, I should be able to view and manage customer appointments.
• As a Salon Admin, I should be able to send notifications to customers about their appointments.

User Personas

• Customer: Individuals looking to book beauty and grooming services online.
• Salon Admin: Staff responsible for managing appointments and service listings.

Core User Flows

• Customer visits the website -> Browses services -> Selects a service -> Books an appointment -> Receives confirmation.
• Salon Admin logs into the admin panel -> Updates service listings -> Manages appointments -> Sends notifications to customers.

Visuals Colors and Theme

• primary: #FF6F61 (Coral)
• primary_light: #FF8A80 (Light Coral)
• secondary: #4A90E2 (Sky Blue)
• accent: #F5A623 (Amber)
• highlight: #F8E71C (Yellow)
• bg: #FFFFFF (White)
• surface: rgba(250, 250, 250, 0.8)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: rgba(200, 200, 200, 0.5)

Signature Design Concept

The homepage will feature an interactive "Beauty Carousel" using framer-motion. As users scroll, they will see a rotating carousel of service images that expand with detailed descriptions upon hover. Each image will have a subtle 3D tilt effect, creating an engaging and dynamic browsing experience. The carousel will be accompanied by ambient background music that can be toggled on or off, enhancing the luxurious feel of the salon's offerings.

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model. Layers of images and text will move at different speeds as the user scrolls, creating a sense of depth and immersion. This model will highlight the salon's services and create a visually rich first impression.

Non-Functional Requirements

• The website should load within 3 seconds on standard broadband connections.
• The website should be accessible on both desktop and mobile devices.
• The website should comply with local data protection regulations.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL
• AI Tools: Not applicable
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The salon operates from 10 am to 10 pm, and the website should reflect these hours.
• The website will primarily serve customers in India, using INR for transactions.
• The salon's location and contact information must be prominently displayed.

Glossary

• Customer: An individual seeking beauty services.
• Salon Admin: A staff member managing the salon's online presence.
• Parallax: A scrolling effect where background images move slower than foreground images, creating a 3D effect.
• Framer-motion: A library for creating animations in React applications.