Beauty salon

Homepage :- 

1.  Welcome :- Welcomed with their names.
2. Offers :- Promotes ongoing offers with discounts.
3. Services :- What do you want to do? Which encourage user with interactions by choosing service category.
4. Salon profiles :- It shows that which salon you follow. In which it shows the salon activities.
5. Footer navigation :- It shows home, navigation, Booking, images and profile section.

Nearby Map :-

1. Header :- Address information and filters.
2. Map :- Which shows the user's current location and Searched beauty salon.
3. Bottom panel :- Shows the Beauty salon information with salon image, information, price and ratings.
4. Navigation bar :- Shows Home, Navigation, Booking, Images and profile panel.

Location :-

1. Header :- direct for turning right or left 
2. Map :- Shows your current location and salon location 
3. Footer :- Shows the distance with time duration, Real-time and finish button.

Shop Service Selection :-

Header Navigation Icons (Top Left & Right)

• Back Arrow: Returns user to previous page.

• Heart Icon: Add to favorites.

• Share Icon: Share salon with others.

Gallery Section

• Displays images of past work and salon interior.

• Clicking “View all” opens full gallery view.

Our Specialists

• Horizontal scroll of available specialists.

• Tap a specialist to highlight or view their profile.

Reviews Section

• Showcases customer reviews with profile image, star rating, and comments.

• Reinforces trust and social proof.

Service & pricing summary

• Displays selected services with price.

• Example: “Total (1 Service): $40”.

Book Now button

• Clear and bold.

• Takes user to booking page.

Booking :-

Specialist Selection

• Profile photos allow users to choose their preferred specialist and selected specialist gets a checkmark.

Date Picker (Horizontal Scroll)

• Allows selection of a date.

• Active date is highlighted. 

Time Slot Selection

• Time options shown in scrollable pill-style buttons.

Notes Input Box

• Optional input area for users to provide special instructions or comments.

• Placeholder text: “Type your notes here”.

Service Summary

• Displays number of selected services and total price.

Checkout

• Final step for booking.

Shop Details :-

Full-Width Hero Image

• Provides a visual first impression of the salon’s ambiance.

Service Tags

• Keywords like “Hair, Facial, Nails, 2+” help users understand the offerings at a glance.

Salon Name & Address

• Example: “Plush Beauty Lounge”

• Location: “360 Stillwater Rd, Palm City, FL 34990”

Ratings & Availability

• Rating (e.g., 4.7 based on 270 reviews)

• "96% (8 Pax Available)" shows current availability.

Status Badge

• “OPEN” indicator to show live status.

Book Now”

• Always visible, encouraging users to proceed with booking right away.

More Info Link

• “View More Details” directs user to scroll down or expand additional info like pricing, reviews, etc.