Instruction file imported from AuTomaTheo/5.-Mstudio (.cursor/rules/PRD.mdc). Copyright stays with the author.

Product Requirements Rule: Salon/Barbershop Website & WhatsApp Booking System

IMPORTANT:

Always read memory-bank/@architecture.md before writing any code. Include entire database schema.

Always read memory-bank/@app-design-document.md before writing any code.

After adding a major feature or completing a milestone, update memory-bank/@architecture.md.

This rule is a detailed, structured reference of the PRD.md file. Use it to understand all requirements, user stories, design guidelines, and technical recommendations for the project.

1. Introduction

This document outlines the product requirements for a new, innovative website and WhatsApp booking system for [Salon/Barbershop Name]. The project aims to create a digital presence that is trendy, professional, warm, and friendly, truly encapsulating the salon's essence and highlighting the expertise of its staff. A key feature is an intelligent WhatsApp bot for appointment scheduling, designed to enhance customer convenience and streamline the booking process.

2. Goals

• Increase Bookings: Streamline the appointment process to drive more bookings through both the website and an intuitive WhatsApp interface.
• Enhance Brand Image: Establish [Salon/Barbershop Name] as a modern, high-quality, and customer-centric establishment that values innovation and professionalism.
• Showcase Professionalism & Expertise: Clearly highlight staff qualifications, specialized studies, and certifications to build client trust and justify premium service offerings.
• Improve Customer Experience: Offer a convenient, accessible, and friendly booking and information discovery process, particularly through the innovative WhatsApp channel.
• Operational Efficiency: Reduce manual effort and time spent on appointment scheduling via phone calls by automating the process through the WhatsApp bot and an integrated backend system.

3. Target Audience

• Primary: Tech-savvy individuals aged 20-55 residing in the local and surrounding areas, seeking high-quality, professional hair and grooming services. They value convenience, style, and expertise.
• Secondary: Existing loyal customers of [Salon/Barbershop Name] looking for an easier, more modern way to book appointments and stay informed.
• Characteristics: Appreciate a blend of trendiness and professionalism, are active on social media (especially Instagram, Facebook), and are comfortable using messaging apps like WhatsApp for service interactions. They research online before choosing a salon/barbershop.

4. User Stories

• US1: As a potential new customer, I want to easily browse the salon's services, see clear pricing, and view examples of their work, so I can quickly decide if they meet my style and budget.
• US2: As a discerning customer, I want to learn about the stylists/barbers, their specializations, and critically, their professional background (studies, certifications, experience), so I can feel confident in choosing the right professional for my needs.
• US3: As a busy professional, I want to be able to check appointment availability and book a slot quickly and easily via WhatsApp, even outside of salon opening hours, without needing to make a phone call.
• US4: As a WhatsApp user making an appointment, if my preferred date and time are unavailable, I want the bot to intelligently suggest the closest alternative available slots, so I don't have to guess or make multiple inquiries.
• US5: As a booked customer, I want to receive an automated confirmation of my appointment via WhatsApp, followed by a reminder closer to the date, so I don't forget.
• US6: As the salon owner, I want the website to be a true reflection of our salon's unique atmosphere and high standards, effectively attracting our target clientele and showcasing our team's expertise.
• US7: As a salon staff member, I want the WhatsApp booking system to seamlessly integrate with our central appointment calendar to avoid double bookings and ensure all staff are aware of scheduled appointments.
• US8: As a potential customer, I want to easily find the salon's location, contact details, and opening hours on the website.

5. Design & Branding Guidelines

• Overall Feel: Innovative, trendy, highly professional, yet simultaneously warm, welcoming, and friendly. The design should feel current and sophisticated.
• Visuals:
  • Photography/Videography: Emphasis on high-quality, authentic, and professional photos/videos of the salon interior (showcasing its unique vibe), staff in action (looking professional and friendly), detailed shots of services (e.g., hair transformations, intricate barbering), and happy, stylish clients (with consent).
  • Layout: Clean, modern, intuitive, and aesthetically pleasing. Generous use of white space. Mobile-first approach.
  • Authenticity: Minimize stock imagery; prioritize custom content that tells the salon's story.
• Color Palette: (To be finalized with a designer) Suggestions:
  • Primary: Sophisticated neutrals (e.g., charcoal grey, warm beige, off-white).
  • Secondary: A trendy yet timeless accent color (e.g., deep emerald green, muted terracotta, rich burgundy, or a metallic like brushed gold/copper).
  • Highlight: A brighter, friendly color for CTAs or specific highlights.
• Typography: A combination of modern, stylish, and highly legible fonts. Perhaps a distinctive sans-serif for headings and a clean, readable sans-serif or serif for body text.
• Logo: Prominently displayed, modern, and reflective of the brand's premium and innovative positioning.
• Tone of Voice: Professional but approachable, knowledgeable, confident, caring, and enthusiastic. Language should be clear, concise, and engaging.

6. Functional Requirements

6.1 Website Functional Requirements

• Homepage:
  • Compelling hero section (e.g., full-width image/video, concise tagline encapsulating the salon's essence).
  • Brief, engaging introduction to the salon's philosophy, unique selling propositions (USPs), and commitment to professional development.
  • Visually appealing showcase of featured services or signature styles.
  • Clear Call-to-Action (CTA) to "Book via WhatsApp" or "Explore Services."
  • Curated client testimonials or links to positive reviews.
  • Introduction to the expert team or link to the team page.
• About Us / Our Story Page:
  • Detailed narrative of the salon's origins, mission, vision, and core values.
  • Emphasis on what makes the salon unique – its atmosphere, customer service philosophy, and dedication to the craft.
• Our Team / Experts Page:
  • Individual, professional profiles for each staff member.
  • High-quality photo, engaging bio, list of specializations and services offered.
  • Crucial Feature: A dedicated section for each staff member titled "Professional Development & Studies" or similar, detailing their formal education, certifications, advanced courses, workshops attended, and years of experience. This directly addresses the requirement to showcase their expertise.
• Services Page:
  • Comprehensive list of all services (e.g., haircuts, advanced coloring, balayage, keratin treatments, specific barbering techniques, facials, etc.).
  • Detailed descriptions for each service, including benefits, process (briefly), estimated duration, and transparent pricing. Use of accordions or tabs for better organization if extensive.
  • Categorization for easy navigation (e.g., Hair Salon Services, Barbershop Services, Beauty Treatments).
• Gallery / Lookbook / Portfolio Page:
  • High-resolution image and video gallery showcasing the salon's best work. Before & After shots can be powerful.
  • Filterable by service type, stylist (optional), or style category.
  • Potential integration with the salon's Instagram feed (if high quality and curated).
• Blog / Journal / Insights (Recommended for SEO & Expertise):
  • Articles on hair care, styling tips, latest industry trends, explanations of techniques, staff spotlights, product recommendations.
  • Positions the salon as an authority and provides valuable content for clients.
• Contact & Location Page:
  • Salon address with an embedded, interactive Google Map.
  • Click-to-call phone number.
  • Professional email address.
  • Clear display of operating hours (and any special holiday hours).
  • Simple contact form for general inquiries (not bookings).
  • Prominent Feature: A clear QR code and/or a direct button/link to initiate a WhatsApp chat for bookings and inquiries.
• Responsive Design: Flawless display and functionality across all devices: desktops, tablets, and smartphones (mobile-first indexing in mind).
• SEO Foundation: On-page SEO best practices implemented: optimized meta titles/descriptions, header tags, image alt text, structured data markup (LocalBusiness, Service, Person for team members).

6.2 WhatsApp Integration & Bot Functional Requirements

• WhatsApp Business API Integration: Secure and reliable integration with the official WhatsApp Business API (via a Meta Business Partner).
• Automated Greeting & Main Menu:
  • Friendly, on-brand welcome message upon initiating a chat.
  • Simple menu with options like: "Book an Appointment", "View Services", "Ask a Question", "Location & Hours".
• Intelligent Appointment Booking Flow (Bot):
  1. Service Inquiry/Selection: User can state desired service(s) or select from a list.
  2. Stylist/Barber Preference: Option to request a specific staff member or choose "Any Available Professional."
  3. Date & Time Request: User proposes a preferred date (and optionally, a general time like 'morning' or 'afternoon', or a specific time).
  4. Real-time Availability Check: Bot queries a backend database/calendar system that reflects actual, up-to-the-minute staff availability and service durations.
  5. Slot Confirmation: If the exact slot is available, the bot confirms the service, date, time, and staff member (if specified) and asks the user to confirm the booking.
  6. Intelligent Alternative Suggestion: If the requested slot is unavailable, the bot MUST offer the closest available alternative(s). Examples:
     • "Unfortunately, [Stylist] is fully booked on [Date] at [Time]. However, they are available at [Alternative Time] on the same day, or on [Next Available Date] at [Time]."
     • "We don't have that exact time, but for [Service] on [Date], we have openings at [Time1], [Time2], or [Time3]."
     • "If you're flexible, the next available appointment for [Service] is on [Nearest Date] at [Time]."
  7. Booking Finalization & Confirmation Message: Upon user confirmation, the bot finalizes the appointment in the salon's scheduling system and sends a detailed confirmation message via WhatsApp (Service, Date, Time, Staff, Salon Address, any pre-appointment notes).
• Backend Calendar/Database Synchronization: Robust, real-time, two-way synchronization with the salon's primary appointment management system to prevent double bookings and ensure data consistency.
• Automated Appointment Reminders: Configurable automated reminders sent via WhatsApp (e.g., 24 or 48 hours before the appointment) including details and an option to confirm attendance or contact for changes.
• Basic FAQ Handling: Bot ability to answer common questions (e.g., parking, payment methods, specific service details if not booking).
• Human Handoff Protocol: A clear and seamless process for the bot to escalate conversations to a human staff member if it cannot understand the query, if the user requests it, or for complex issues. Notification to staff for takeover.
• Language Support: Initially in the primary language of the salon's clientele. Plan for future multilingual support if relevant.
• Error Handling & Clarification: Graceful handling of typos, misunderstood inputs, or ambiguous requests. Bot should ask clarifying questions if needed.

7. Non-Functional Requirements

• Performance:
  • Website: Fast page load times (e.g., LCP under 2.5 seconds, Core Web Vitals optimized). Smooth animations and transitions.
  • WhatsApp Bot: Near-instantaneous responses to user inputs (within 1-3 seconds for database queries).
• Usability & Accessibility:
  • Website: Intuitive navigation, clear information architecture, high readability. Adherence to WCAG 2.1 Level AA accessibility standards.
  • WhatsApp Bot: Natural, conversational flow. Simple commands and clear instructions. Easy for non-technical users.
• Reliability & Availability: Target 99.9% uptime for the website and WhatsApp booking service. Robust error recovery.
• Scalability: The system (website hosting, backend API, database, WhatsApp integration) must be able to handle an increasing number of users, concurrent sessions, and booking transactions without degradation in performance.
• Security:
  • Website: HTTPS enforced. Secure handling of any data submitted via forms. Protection against common web vulnerabilities (XSS, CSRF).
  • WhatsApp: Adherence to WhatsApp Business API security best practices and data privacy regulations (e.g., GDPR if applicable). No sensitive PII stored unnecessarily.
• Maintainability:
  • Well-documented, modular code for both frontend and backend.
  • Easy-to-update content (services, prices, team bios, blog posts) – ideally via a user-friendly CMS for salon staff.
• Compatibility:
  • Website: Compatible with latest versions of major web browsers (Chrome, Firefox, Safari, Edge) on desktop and mobile.
  • WhatsApp Bot: Compatible with all standard WhatsApp clients on iOS and Android.

8. Technology Stack Suggestions (High-Level)

• Frontend (Website):
  • Modern JavaScript Framework/Library: React (with Next.js), Vue.js (with Nuxt.js), or Svelte/SvelteKit for a dynamic, fast, and trendy UI.
  • Static Site Generation (SSG) or Server-Side Rendering (SSR) for performance and SEO.
• Backend (API for Website & WhatsApp Bot, Booking Logic):
  • Node.js (with Express.js or NestJS), Python (with Django or Flask), Ruby (with Rails), or Go.
• Database (Appointments, Staff Schedules, Services):
  • Relational Database: PostgreSQL or MySQL for structured data and transactional integrity.
  • Consider Redis for caching if high traffic.
• Content Management System (CMS) (Optional but Recommended for Salon Staff):
  • Headless CMS: Strapi, Sanity.io, Contentful for maximum flexibility and decoupling from frontend.
  • Traditional CMS: WordPress (with REST API) if staff are familiar and for ease of content editing.
• WhatsApp Integration:
  • Official WhatsApp Business API through a Meta Business Solution Provider (BSP) like Twilio, MessageBird, Vonage (formerly Nexmo), 360dialog.
• Hosting & Deployment:
  • Frontend: Vercel, Netlify, AWS Amplify.
  • Backend & Database: AWS (EC2, RDS, Lambda), Google Cloud Platform (Compute Engine, Cloud SQL, Cloud Functions), Azure, Heroku, DigitalOcean.
• Appointment Scheduling System: Either build custom logic or integrate with an existing third-party salon scheduling software that offers an API.

9. Success Metrics

• Booking Volume:
  • % increase in total appointments booked per month/quarter.
  • Number and % of appointments booked via the WhatsApp bot.
• Website Engagement & Conversion:
  • Website traffic (unique visitors, sessions).
  • Average session duration, pages per session.
  • Bounce rate (lower is better).
  • Conversion rate from website visitor to booking inquiry/initiation.
• WhatsApp Bot Performance:
  • Task completion rate (successful bookings via bot without human intervention).
  • Average conversation duration for successful booking.
  • User satisfaction with bot interaction (e.g., via short follow-up survey).
  • Reduction in phone calls for bookings.
• Operational Efficiency:
  • Reduction in time spent by staff on manual appointment scheduling.
  • Decrease in no-show rates (attributable to automated reminders).
• Brand & Customer Satisfaction:
  • Positive customer feedback/reviews mentioning the website or WhatsApp booking ease.
  • Improvement in online review scores (Google, Yelp, etc.).
• SEO Performance:
  • Improvement in search engine rankings for targeted local keywords (e.g., "best barbershop [city]", "balayage specialist [city]").

10. Future Considerations (Post-MVP)

• Online Payments & Deposits: Integration of a secure payment gateway (e.g., Stripe, PayPal) to accept deposits or full pre-payments for services, reducing no-shows further.
• E-commerce for Products: A dedicated section on the website for selling salon-exclusive hair care and beauty products.
• Advanced AI for WhatsApp Bot: Incorporate Natural Language Processing (NLP) for more fluid, human-like conversations and better intent recognition. Personalized service/stylist recommendations based on past bookings or preferences.
• Customer Accounts/Portal on Website: Allow clients to create accounts to view their appointment history, manage upcoming bookings (reschedule/cancel within policy), and save preferences.
• Loyalty Program Integration: Digital loyalty cards, points system, or exclusive offers for repeat customers, manageable via website/WhatsApp.
• Multi-Language Support: Expand website and WhatsApp bot to support additional languages based on evolving clientele demographics.
• Automated Rescheduling/Cancellation via Bot: Allow users to fully manage their existing appointments (reschedule or cancel subject to salon policy) directly through the WhatsApp bot.
• Group Bookings/Multiple Services: Enhanced bot logic to handle bookings for multiple people or multiple services in a single session.
• Targeted Promotions via WhatsApp: (With user consent) Send out special offers, last-minute availability, or new service announcements via WhatsApp broadcasts.

Reference: All details above are sourced from PRD.md. For the most up-to-date requirements, always check the original file.