Beauty Parlour Website

A modern, responsive beauty parlour website with WhatsApp booking integration.

Features

  • 🌸 Beautiful, modern design with gradient backgrounds
  • šŸ“± Fully responsive layout
  • šŸ’„ Service showcase with pricing
  • šŸ‘©ā€šŸ’¼ Team member profiles
  • šŸ“ž Direct WhatsApp booking integration
  • šŸŽØ Interactive service selection
  • ⭐ Customer testimonials
  • šŸ“ Contact information and location

Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts           # Main HTTP server (Hono)
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ index.html         # Main page
│   ā”œā”€ā”€ style.css          # Custom styles
│   └── script.js          # Interactive functionality
└── README.md

WhatsApp Integration

The website includes direct WhatsApp booking functionality that:

  • Pre-fills service selection
  • Includes preferred date/time
  • Automatically formats booking message
  • Opens WhatsApp with ready-to-send message

Usage

  1. Customers browse services and select their preferred treatments
  2. They choose a preferred date and time
  3. Click "Book via WhatsApp" to open WhatsApp with pre-filled booking message
  4. Send the message to complete the booking request

Customization

To customize for your beauty parlour:

1. Update WhatsApp Number

Edit /frontend/script.js and change line 4:

const WHATSAPP_NUMBER = "1234567890"; // Replace with your actual WhatsApp number

2. Modify Services and Prices

Edit /frontend/index.html to update:

  • Service names and prices in the services section
  • Service options in the booking form checkboxes

3. Update Business Information

In /frontend/index.html, update:

  • Business name (currently "Bella Beauty")
  • Contact information (phone, address)
  • Business hours
  • Team member names and descriptions

4. Customize Styling

Edit /frontend/style.css to change:

  • Color scheme (currently pink/purple gradient)
  • Fonts and typography
  • Layout and spacing

Replace the spa icon in the navigation with your logo by updating the <i class="fas fa-spa"> element in the HTML.