UB MAKEOVERS

Introduction

UB MAKEOVERS is a salon website designed to showcase the salon's work, achievements, customer ratings, client bookings, offers, price lists, and social media channels. The website aims to provide a user-friendly experience for both new and existing customers.

System Overview

The UB MAKEOVERS website will serve as a digital platform for the salon, offering features such as showcasing work, displaying achievements, managing client bookings, and integrating social media channels. The website will maintain a theme of either golden and black or soft pink and golden, as per the user's preference.

Functional Requirements

• As a User, I should be able to view the salon's work and achievements.
• As a User, I should be able to see customer ratings.
• As a User, I should be able to book appointments online.
• As a User, I should receive appointment reminders.
• As a User, I should be able to view current offers and price lists.
• As a User, I should be able to access the salon's Instagram, WhatsApp, and YouTube channels.
• As a User, I should be able to see the salon's logo prominently displayed.

User Personas

• New Customer: Interested in exploring the salon's services and booking appointments.
• Existing Customer: Regular visitor looking to manage bookings and stay updated on offers.
• Admin: Manages content, bookings, and customer interactions on the website.

Core User Flows

• New Customer: Visits website -> Views salon work and achievements -> Books an appointment -> Receives appointment reminder.
• Existing Customer: Logs in -> Manages bookings -> Checks offers and price lists -> Engages with social media channels.
• Admin: Updates content -> Manages bookings -> Sends appointment reminders -> Updates offers and price lists.

Visuals Colors and Theme

• primary: #DAA520 (Golden)
• primary_light: #FFD700 (Light Golden)
• secondary: #FFC0CB (Soft Pink)
• accent: #FF69B4 (Hot Pink)
• highlight: #FF4500 (Orange Red)
• bg: #000000 (Black)
• surface: rgba(255, 215, 0, 0.8) (Golden)
• text: #FFFFFF (White)
• text_muted: #B0B0B0 (Gray)
• border: rgba(218, 165, 32, 0.2) (Golden)

Signature Design Concept

The homepage will feature an interactive "Golden Glow" theme. As users scroll, golden particles will gently drift across the screen, creating a luxurious and elegant atmosphere. The logo will be prominently displayed in the center, with sections for work, achievements, and offers appearing as glowing panels that expand on hover. The use of gsap for smooth animations will enhance the user experience, making the website feel dynamic and engaging.

Interaction Model & Motion Direction

• Interaction Model: Parallax
• Landing Page: Features layered depth with golden particles moving at different speeds, creating a rich visual storytelling experience.
• Internal Pages: Static, focusing on clarity and ease of navigation.

Non-Functional Requirements

• The website should load within 3 seconds.
• It should be responsive and accessible on all devices.
• Ensure data security for user information.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL
• AI Tools: Not applicable

Assumptions and Constraints

• The website will primarily target users in India.
• The theme will be consistent across all pages.
• Appointment reminders will be sent via email or SMS.

Glossary

• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
• GSAP: GreenSock Animation Platform, a JavaScript library for creating animations.
• Responsive Design: A design approach that ensures a website looks good on all devices.