Construa um site de salão que ajude os clientes a escolher um serviço e agendar com o profissional certo

Build a mobile-first website for my hair salon / barbershop / independent styling business. Help visitors choose the right service, see my actual work and book through my existing provider or send an appointment request.

MY DETAILS
- Name, business type and style: [REAL NAME / SOLO OR TEAM / BRAND COLOURS AND ATMOSPHERE]
- Country, site language, currency and time zone: [COUNTRY / LANGUAGE / CURRENCY / TIME ZONE]
- Location and contact: [REAL ADDRESS OR SERVICE AREA / PHONE / EMAIL / OPTIONAL WHATSAPP NUMBER / INSTAGRAM]
- Hours, holiday exceptions and walk-ins: [ACTUAL DAYS, HOURS AND POLICY]
- Team: [REAL NAMES, SPECIALTIES, SERVICES EACH PERSON OFFERS AND APPROVED PHOTOS; OR JUST ME]
- Services: [NAME, INCLUSIONS, DURATION, FIXED OR STARTING PRICE, PRICE VARIATIONS BY PROFESSIONAL OR SERVICE REQUIREMENTS, AND WHETHER CONSULTATION IS NEEDED]
- Booking provider: [EXACT PUBLIC BOOKING LINK AND SUPPORTED EMBED, OR REQUESTS ONLY]
- Media and reviews: [MY REAL WORK WITH PUBLICATION PERMISSION / GENUINE REVIEWS / APPROVED LICENSED ATMOSPHERE IMAGES THAT MAY BE LABELLED ILLUSTRATIVE / OR PLACEHOLDERS]
- Policies: [ACTUAL RESPONSE WINDOW, CANCELLATION TERMS AND PROFESSIONALLY REVIEWED CONSULTATION REQUIREMENTS; OMIT MISSING CLAIMS]

PAGES
Home: business type, location, selected work, service preview, contact and the booking action available. Make it easy to use on a phone. Use responsive heading sizes and intentional line breaks: at 320px wide, the full business name and every call to action must remain readable without clipping or horizontal scrolling.
Services: an editable menu grouped around what I actually offer. Show inclusions, duration and price basis clearly. Explain supplied differences such as professional, length, density or technique; do not invent surcharges. Use a consultation route when price or duration needs assessment. Do not turn every variable price into an unexplained "from" price.
Work: use my real photos, filtered by actual service categories. Attribute the professional only when supplied. If I supplied no real work, do not use headings or copy that imply real results exist. Omit the gallery or show compact, clearly labelled upload placeholders.
Team: show each person's real specialty. Show eligible services and prefill a professional choice only from an explicit mapping I supplied. If that mapping is missing or ambiguous, do not infer it from job titles or specialties; show the team without service assignments and list the missing mapping in the handoff. For a solo business, use a simple About section.
Visit: address, directions link, phone, hours, holiday exceptions, walk-in policy and supplied access information. For multiple locations, make the visitor choose the correct branch.

BOOKING ROUTE
If I supplied a provider, use its supported link or embed with a fallback link. Keep its calendar authoritative; do not invent a second synchronized calendar.
Otherwise label the action "Request an appointment". Collect name, one contact method, service, optional preferred professional and preferred day/time. Mark the request Pending. Say it is received only after saving successfully, and clearly explain that the appointment is not confirmed. Treat the saved request and any notification as separate statuses: the request database and owner dashboard are the source of truth.
Attempt an outbound notification only when I have connected a supported provider and supplied the required configuration. A missing custom domain, paid plan, sender identity or provider setup must not block or discard a saved request. In that case keep the request visible in the owner dashboard, show staff that notifications are not configured and list the exact activation steps. Do not create retry controls for an unconfigured channel, claim an alert was delivered because an API accepted or queued it, or promise an automatic text unless delivery is configured and tested. Let authorized staff confirm, decline or propose a different time after checking their actual calendar.
A WhatsApp button opens a conversation; it does not itself reserve a slot. Do not request medical history, identity documents or card details in this public form. Route consultation questions to the professional through their existing process. Do not generate treatment advice or declare a client suitable for a chemical service.

OWNER TOOLS AND TRUST
Give me a protected screen to update services, prices, hours and approved gallery photos, and handle requests. Visitors must not read other clients' records; enforce access on the server. Validate inputs, add spam protection and prevent duplicate submissions.
Use neutral upload placeholders until I supply real photos. Keep placeholders compact so they do not become large empty sections. Approved licensed atmosphere images may be used for decoration only when they are clearly labelled illustrative and are not presented as this business's premises, team, clients or work. Do not invent cuts, colour results, before/afters, reviews, awards or team members. AI cleanup of my real photos is welcome when it preserves the actual haircut, colour and result. Keep private client photos out of the public gallery.
Use accessible labels, strong text contrast, keyboard navigation, accurate page titles and business details. Support RTL if the language requires it. If a mobile action bar is fixed to the bottom, reserve enough content space and safe-area padding so it never covers text, form fields or buttons. Prepare privacy/terms drafts for review from the actual country and tools in the protected owner area or as unpublished content. Do not link a public legal page while it still contains placeholders or unreviewed assumptions. Before enabling public submissions, require the owner to complete and review a privacy notice that accurately describes the data and delivery services actually in use. No automatic marketing enrolment and no claim of LGPD or other legal compliance without review.

HANDOFF
Complete the required first-build gate before optional integrations: the public pages render; a valid request saves as Pending; the owner can see it in a protected screen; an unrelated visitor cannot read or change requests; basic validation, spam protection and duplicate handling work; and supplied service/professional links prefill only verified choices. Test the public pages at 320px mobile width and a normal desktop width for clipped headings, horizontal overflow, weak contrast, oversized empty placeholders and content hidden behind fixed controls. Test a price edit and confirm it updates every public location where that price appears.
Then test only the integrations that are actually configured. If notification delivery, a custom domain or another paid/external dependency is unavailable, leave that feature clearly inactive and report the exact prerequisite instead of repeatedly attempting it or holding up the usable site. Distinguish a real end-to-end delivery test from a simulated failure or an accepted/queued API response. List passed, failed, inactive and untested items separately, together with missing setup and service costs.