Vibe Code a Hair Salon Website

Build a one-page hair salon / barbershop website as a single self-contained
HTML file (inline CSS and JS, no external dependencies except Google Fonts
and Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Salon name: [SALON NAME]
- Type: full-service salon / barbershop / color specialty
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + TikTok (open in new tab, rel="noopener")
- Stylists: list of 4 with name + specialty
- Hours: [WEEKDAY / WEEKEND / SUN]
- Booking: form + click-to-call + (optional) link to external scheduler

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: warm blush (#f3e1d8), charcoal text (#1a1a1a), single
 burnished-gold accent (#b3873b) for CTAs and italic accents, soft cream
 (#faf5ee). Override if user provides hex values; derive variants for AA
 contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Chic editorial fashion magazine. Soft, sophisticated, not "cute".
- Type pairing: high-contrast display serif for headings (Playfair Display,
 Cormorant Garamond) + clean sans for body (Inter, Outfit). NO script
 fonts.
- Eyebrow labels: uppercase, tracked .22em, gold, prefixed by a 28px CSS
 ::before line.
- Headlines: short with ONE italic accent ("Hair that *turns heads*").
 Italic word uses subtle gold-foil gradient text fill.
- Generous whitespace, overlapping image cards, asymmetric grids. Soft
 rounded corners (20-32px) and thin gold borders on key surfaces.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5, round caps. Cover: scissors, comb, brush, palette,
 flower, calendar, clock, pin, phone, mail, star, check, gift,
 instagram-mark, tiktok-mark.
- Icon containers: 44x44 rounded squares with blush-tinted bg, flip to gold
 filled with cream icon on hover.
- Motion: scroll fade-ins, subtle Ken Burns on hero image, hover lifts on
 service cards (6px). No bounce, no parallax.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect cream translucent + backdrop blur)
 - Wordmark (large serif) left | anchor nav center | "Book now" gold pill
 CTA right
 - Mobile: hamburger to slide-in full-width menu

2. HERO
 - Two-column: text left, photo right (Unsplash search: "model long
 hair color" or "salon interior chair") rounded 32px with soft blush
 gradient overlay bottom-left
 - Left: eyebrow with line marker, two-line headline with italic accent,
 2-line subhead, two CTAs (gold "Book a service", blush-outline "View
 services")
 - Floating pill on hero image: "Walk-ins welcome on weekdays"
 - Ken Burns slow zoom on hero photo

3. SERVICES & PRICING
 - Eyebrow + headline ("On the *menu* this season")
 - Tab-style category filter at top: Cuts / Color / Treatments / Extensions
 (filter chips, active filled gold, others outlined)
 - Below: list-style services (NOT card grid, keeps editorial feel)
 - Each service row: name (serif) on left + duration in small monospace +
 price-from in serif gold on right + 1-line description in muted text
 below name
 - Thin gold divider between each row
 - 12-14 services total spread across categories
 - Smooth JS filtering on category change

4. STYLISTS
 - Eyebrow + headline ("Meet your *makers*")
 - 4 stylist cards in horizontal row (stack mobile)
 - Each: portrait photo (rounded 24px), name (serif), specialty (small
 uppercase tag chip in blush), years of experience, "Book with [NAME]
 →" gold link, Instagram icon link

5. GALLERY
 - Eyebrow + headline ("Recent *work*")
 - 9-image masonry grid (CSS columns: 3 desktop, 2 tablet, 1 mobile) of
 real Unsplash hair photos (color transformations, updos, men's cuts,
 blonde balayage, curls)
 - Each image rounded 12px, hover: slight 1.03 scale + gold border flash
 - Below grid: "Follow for daily transformations" with Instagram link

6. BOOKING FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Reserve your *chair*"), 3-bullet reassurance
 ("Confirmation by SMS", "Easy reschedule", "Cancellation up to 24h")
 - Right: cream card with thin gold border (1px)
 • Fields: full name, phone, email, service (select, grouped by
 category), preferred stylist (select, "No preference" option),
 preferred date, preferred time window (morning/afternoon/evening),
 notes (textarea)
 • Submit gold button, full-width
 • Inline JS success message (preventDefault, no real backend)

7. MEMBERSHIPS & GIFT CARDS
 - Two-column horizontal cards (stack mobile)
 - Left card: VIP Membership, eyebrow, headline, 3-line description, 4
 benefits as prose with check icons, price-per-month in serif gold,
 "Join VIP" gold CTA
 - Right card: Gift Cards, eyebrow, headline, 3-line description, 3
 price options as pill buttons ($50 / $100 / $250 / custom), "Send a
 gift" gold CTA opening mailto with prefilled subject

8. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation mark in muted blush, quote body
 (specific service, specific moment, varied lengths), 5 gold SVG stars,
 separator, gradient-circle initials avatar + first name + last initial
 + service ("Balayage with Lena, 2024")
 - NO fake stock photos of perfect-haired models in testimonials

9. PRODUCTS WE LOVE
 - Thin cream strip section, borders top/bottom
 - "WE USE & RECOMMEND" label left + 5 plaintext brand names right
 (Olaplex, Kérastase, Davines, Bumble and bumble, Oribe, typeset, not
 logos, to avoid trademark issues)

10. HOURS + MAP
 - Two-column: hours table left (with note about walk-ins), Google Maps
 embed right (rounded 24px, shadow)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay top-left: salon name, address, "Get directions →"

11. FAQ
 - 6 collapsible <details>: "Do you take walk-ins?", "Can I cancel?",
 "Do you work with curly / textured hair?", "Are children welcome?",
 "Do you offer color consultations?", "Parking?"
 - "+" icon rotates 45° to "×" on open

12. NEWSLETTER
 - Centered card on blush background, gold radial blob accents
 - Eyebrow "STYLE NOTES", headline ("Style tips + *15% off* your first
 visit"), inline email input + gold submit button + inline success
 message

13. FOOTER (deep charcoal)
 - Centered wordmark in cream serif
 - Italic serif tagline below (NOT handwritten)
 - Social row: gold-bordered glass circles (only platforms user provides)
 - Bottom: address + phone + hours + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `BeautySalon` schema in <head> with name, address, telephone,
 openingHours, priceRange, hasOfferCatalog of services
- CSS custom properties for palette/gradients at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy", decoding="async"
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (scissors mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Editorial fashion-magazine. Confident, warm, never breathless. Specific over
generic ("Hand-painted balayage, finished with a glaze that lasts twelve
washes", not "beautiful hair"). Headlines short with ONE italic word. Body
copy treats hair as craft, not "magic" or "transformation". Testimonials
should feel like real Yelp/Google reviews, specific service, specific
stylist, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including hair, lipstick, sparkle emojis)
- No "transformation magic", "hair miracle", "we love your hair" filler
- No animated scissor cursors or sparkle particle effects
- No script/handwritten fonts
- No real product brand logos (Olaplex, Kérastase) as images, typeset names
- No fake-perfect hair-model stock photos in testimonials
- No "Best Salon 2024" Yelp-style badge graphics
- No bright neon pinks or salon-chain-style gradients
- No bullet lists in card copy (write as prose)


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "HairSalon" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~70-80KB), production-ready, that I can open in a
browser and immediately deploy. Include JSON-LD schema. Show the file as a
single code block and briefly summarize the design decisions made.