Veloura — Luxury Beauty & Hair Salon Website

Create a complete, production-quality, visually exceptional luxury beauty and hair salon website called Veloura using only vanilla HTML, CSS, and JavaScript.

The finished website must feel like a real premium beauty brand created by an experienced web designer.

This is NOT a basic salon template.

Avoid generic AI-generated layouts, repetitive cards, excessive gradients, random floating elements, oversized empty sections, and unnecessary animations.

The final result must be polished enough that a real premium salon could replace the placeholder information and publish the website.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep everything properly separated:

• HTML → index.html
• CSS → style.css
• JavaScript → script.js

The website must work immediately when these three files are placed in the same directory.

Correctly link the CSS and JavaScript files from index.html.

No installation or build process should be required.

---

2. TECHNOLOGY RULES

Use only:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Tailwind CSS
• Bootstrap
• jQuery
• npm
• Node packages
• GSAP
• external JavaScript libraries
• backend frameworks
• databases

Use inline SVG where simple icons are required.

This must remain a true static website.

---

3. BRAND IDENTITY

Brand name:

Veloura

Tagline:

Beauty, refined around you.

Create a sophisticated visual identity around the Veloura name.

The brand should feel:

• Luxurious
• Feminine
• Refined
• Calm
• Modern
• Exclusive
• Warm
• Professional

Do not make the design childish, overly pink, or overly decorative.

Veloura should feel like an upscale beauty destination located in a premium city neighborhood.

---

4. VISUAL DIRECTION

Use a luxury editorial aesthetic inspired by premium beauty campaigns and boutique salons.

Suggested palette:

• Warm ivory
• Soft cream
• Deep espresso
• Muted taupe
• Dusty rose used sparingly
• Champagne/gold accent used very carefully

Avoid bright pink.

Avoid putting gold borders around everything.

Use the luxury feeling through:

• Typography
• Photography
• Composition
• Whitespace
• Scale
• Details

rather than excessive decoration.

---

5. TYPOGRAPHY

Use elegant display typography for major headings and clean modern typography for body content.

Create strong contrast between:

• Large editorial headings
• Small uppercase labels
• Body copy
• Prices
• Buttons
• Metadata

Use responsive typography with clamp().

Some headings can use italic styling selectively to create an editorial fashion feeling.

Do not make body text difficult to read.

---

6. NAVIGATION

Create a refined sticky navigation.

Desktop navigation:

• Veloura logo
• Home
• About
• Services
• Artists
• Gallery
• Reviews
• Contact

Add a prominent:

Book Appointment

button.

The initial navigation should feel minimal.

After scrolling, transition into a slightly elevated navigation bar with a subtle background and border.

---

7. MOBILE NAVIGATION

Create a custom mobile menu.

Requirements:

• Elegant hamburger control
• Full or large mobile navigation panel
• Smooth animation
• Large touch targets
• Proper keyboard accessibility
• Escape key closes menu
• Selecting a link closes menu
• Body scrolling handled correctly while menu is open

Make the mobile navigation feel intentionally designed for Veloura.

---

8. HERO SECTION

Create a visually striking editorial hero.

Do NOT use the typical centered headline over a generic full-screen image.

Use an asymmetrical composition.

For example:

Left:

Small label:

“Luxury Hair & Beauty Studio”

Large headline:

Beauty that feels entirely your own.

Supporting copy:

“Thoughtful hair, beauty and self-care experiences designed around your individuality.”

Buttons:

Book Your Visit

Explore Services

Right:

Large editorial salon/model photograph.

Add one smaller overlapping image showing a beauty detail such as hair styling, salon tools, or treatment.

Include a subtle vertical label:

“Est. 2019 · Phnom Penh”

Add a small rating indicator:

★★★★★ 4.9 from 240+ guests

Keep overlapping elements controlled and elegant.

---

9. INTRODUCTION STRIP

Below the hero, create a minimal horizontal statement:

Hair · Beauty · Nails · Skin · Bridal

Use tasteful separators.

This section should create a transition between the hero and main content.

---

10. ABOUT VELOURA

Create an editorial About section.

Small label:

“Our Philosophy”

Main heading:

We believe beauty should feel personal.

Write realistic copy explaining that Veloura combines skilled artists, thoughtful consultation, premium products, and a calm environment.

Create a split layout using:

• Large image
• Text
• Small supporting image
• Established year

Add three brand values:

Personal

Every appointment begins with understanding the client.

Considered

Treatments are selected intentionally rather than following trends blindly.

Refined

Every detail of the experience is designed with care.

---

11. SIGNATURE SERVICES

Create a premium services section.

Do NOT display every service as identical small cards.

Use a sophisticated editorial layout.

Include:

Hair Styling

Cuts, styling and personalized transformations.

Starting from $25

Hair Color

Dimensional color, highlights and custom tones.

Starting from $45

Nail Atelier

Manicure, gel, extensions and detailed nail artistry.

Starting from $18

Skin Rituals

Personalized facial treatments focused on healthy, radiant skin.

Starting from $35

Makeup

Natural, evening and event makeup.

Starting from $30

Bridal

Complete bridal beauty experiences.

Custom quotation

Each service should have:

• Number
• Service name
• Short description
• Starting price
• Explore action

Add subtle hover interactions.

---

12. FEATURED SERVICE

Create a large visual feature section for one signature experience:

The Veloura Signature

Use a large image and editorial content.

Explain that this is a personalized hair and beauty consultation followed by selected treatments.

Include:

• Consultation
• Personalized treatment
• Styling
• Aftercare guidance

Add CTA:

Discover the Signature Experience

---

13. BEFORE & AFTER

Create a sophisticated transformation section.

Title:

Real transformations. Thoughtfully created.

Show several before/after examples.

Implement an interactive before/after comparison for at least one example using vanilla JavaScript.

The slider should support:

• Mouse
• Touch
• Keyboard where practical

Clearly label:

Before

After

Do not make this interaction dependent on external libraries.

---

14. ARTISTS

Create a “Meet the Artists” section.

Include 4 team members.

For each:

• Professional portrait
• Name
• Specialty
• Years of experience
• Short introduction
• Instagram placeholder

Example roles:

• Creative Director & Hair Artist
• Senior Colorist
• Nail Artist
• Skin Specialist

Use large photography and minimal text.

Avoid generic employee cards.

---

15. BEAUTY GALLERY

Create an editorial gallery.

Include categories:

• All
• Hair
• Color
• Nails
• Skin
• Bridal

Implement category filtering using vanilla JavaScript.

Use a masonry-inspired CSS Grid layout.

Use different image proportions to create visual rhythm.

Clicking an image should open an accessible custom lightbox.

Lightbox should support:

• Previous
• Next
• Close
• Escape key
• Clicking outside to close

Prevent background scrolling while open.

---

16. EXPERIENCE SECTION

Create a section explaining the Veloura salon experience.

Heading:

More than an appointment.

Include four stages:

01 — Consultation

Understand style, preferences, lifestyle and goals.

02 — Personalization

Recommend treatments specifically for the guest.

03 — Experience

Deliver the service in a calm, considered environment.

04 — Aftercare

Provide practical guidance for maintaining the result.

Use an elegant connected layout on desktop.

Stack naturally on mobile.

---

17. PREMIUM PRODUCTS

Create a small section explaining that Veloura uses carefully selected professional products.

Show several fictional premium product categories rather than copyrighted real brands.

Examples:

• Botanical Hair Care
• Professional Color
• Skin Essentials
• Nail Care

Include a statement about responsible product selection.

---

18. TESTIMONIALS

Create a premium review section.

Use 4 realistic customer testimonials.

Avoid overly exaggerated marketing language.

Example style:

“From the consultation to the final styling, everything felt considered. I left feeling like myself — just better.”

Include:

• Customer first name
• Service
• Star rating

Create a vanilla JavaScript testimonial slider.

Support:

• Previous/next buttons
• Touch-friendly controls
• Keyboard interaction

---

19. SOCIAL PROOF

Create a compact statistics area.

Example:

4.9 / 5 Average guest rating

2,500+ Appointments completed

6 Beauty specialists

7 Years Creating confidence

Animate numbers subtly when they enter the viewport.

Do not animate the rating unnecessarily.

---

20. SPECIAL OFFER

Create an elegant promotional section.

Example:

Your first Veloura experience

New guests receive a complimentary consultation with selected services.

CTA:

Reserve Your Consultation

Do not make it look like a cheap discount banner.

Maintain the premium brand aesthetic.

---

21. BOOKING SECTION

Create a polished appointment booking interface.

Heading:

Make time for yourself.

Fields:

• Full Name
• Phone Number
• Email
• Service
• Preferred Artist
• Date
• Preferred Time
• Notes

Service dropdown options:

• Hair Styling
• Hair Color
• Nails
• Skin Treatment
• Makeup
• Bridal Consultation

Artist options should correspond to the team section.

This is a frontend demonstration only.

Do NOT pretend to send data to a server.

Validate fields using JavaScript.

Show useful inline errors.

After valid submission, display:

“Your appointment request is ready. This demo form is not connected to a booking system.”

Do not falsely tell users that an appointment was booked.

---

22. OPENING HOURS

Create an elegant hours section.

Example:

Monday — Friday 9:00 AM — 7:00 PM

Saturday 9:00 AM — 8:00 PM

Sunday 10:00 AM — 6:00 PM

Add:

“Last appointment begins one hour before closing.”

---

23. LOCATION

Create a Visit Veloura section.

Use:

Veloura Beauty Studio

BKK1, Phnom Penh

Use a fictional/sample street address clearly suitable as placeholder content.

Include:

• Phone placeholder
• Email placeholder
• Directions button
• Map-style visual placeholder

Do not require Google Maps API.

Create the map appearance with HTML/CSS or a simple replaceable placeholder.

---

24. INSTAGRAM-STYLE SECTION

Create a visual section titled:

@velourabeauty

Display six beauty/salon photographs.

Add:

“Follow our latest work”

button.

This does not need to connect to Instagram API.

Make it visually resemble a premium social gallery without copying Instagram's interface.

---

25. FOOTER

Create a sophisticated footer.

Include:

Veloura logo

Tagline:

“Beauty, refined around you.”

Navigation:

• About
• Services
• Artists
• Gallery
• Book
• Contact

Contact:

• Email
• Phone
• Location

Social:

• Instagram
• Facebook
• TikTok

Add copyright with year generated dynamically in JavaScript.

Include a subtle back-to-top control.

---

26. JAVASCRIPT FUNCTIONALITY

Implement:

• Responsive mobile navigation
• Scrolled navbar state
• Active navigation highlighting
• Smooth anchor scrolling
• Gallery filtering
• Gallery lightbox
• Before/after slider
• Testimonial slider
• Booking form validation
• Animated statistics
• Scroll reveal
• Back-to-top
• Dynamic year

Use IntersectionObserver where appropriate.

Avoid expensive continuous scroll listeners.

---

27. ANIMATION DIRECTION

Animation should feel like luxury editorial motion.

Use:

• Gentle fade
• Controlled upward movement
• Image reveal
• Slight stagger
• Subtle hover transitions

Do not:

• Bounce elements
• Spin content
• Animate every paragraph
• Use aggressive zoom effects
• Create distracting particles

Respect:

prefers-reduced-motion

All content must remain usable when animations are disabled.

---

28. IMAGE DIRECTION

Images are extremely important to this design.

Use high-quality remote placeholder images appropriate for:

• Luxury salon interiors
• Professional hairstyling
• Hair color
• Nails
• Skin care
• Bridal beauty
• Beauty portraits

Do not use unrelated generic office photographs.

Use consistent photographic direction.

Prefer editorial imagery with:

• Soft natural light
• Neutral tones
• Clean composition
• Premium styling

Provide meaningful alt text.

Lazy-load below-the-fold images.

Ensure image containers maintain their dimensions while loading.

---

29. RESPONSIVE DESIGN

Design intentionally for:

• 320px mobile
• 375px mobile
• 430px mobile
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Simplify hero composition
• Stack editorial layouts naturally
• Maintain strong image presence
• Keep service prices readable
• Make booking fields easy to tap
• Make gallery filtering horizontally usable without breaking layout
• Reduce decorative overlaps
• Maintain appropriate whitespace

Never allow horizontal page overflow.

---

30. ACCESSIBILITY

Use semantic HTML.

Ensure:

• Correct heading hierarchy
• Form labels
• Image alt text
• Visible focus states
• Keyboard-accessible controls
• Accessible mobile navigation
• Accessible lightbox
• Accessible testimonial controls
• Sufficient contrast
• Proper button elements instead of clickable divs

Use ARIA only where necessary.

---

31. SEO

Add appropriate SEO metadata for Veloura.

Create:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card metadata
• Theme color

Use only one H1.

Add LocalBusiness / BeautySalon structured data using JSON-LD with clearly fictional placeholder contact/address values.

---

32. PERFORMANCE

Keep the website lightweight.

Do not load unnecessary resources.

Requirements:

• Efficient CSS
• Efficient JavaScript
• Lazy-loaded images
• Stable image aspect ratios
• Minimal layout shift
• No unnecessary dependencies
• No large animation libraries
• No background videos

The site should feel fast even on mobile.

---

33. CODE QUALITY

Use CSS variables for the design system.

Organize CSS into logical sections.

Use:

• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive absolute positioning.

Avoid excessive !important.

Use JavaScript functions with clear names.

Guard against missing DOM elements.

There must be no console errors.

---

34. CONTENT QUALITY

Do not use Lorem Ipsum.

Write believable luxury salon content specifically for Veloura.

Avoid generic phrases repeated throughout the page.

The writing should be concise, sophisticated, warm and human.

Do not make unrealistic claims.

---

35. IMPORTANT DESIGN RULE

The final page must NOT look like:

“A navbar followed by 12 identical card sections.”

Create visual rhythm.

Alternate between:

• Full-width editorial sections
• Split layouts
• Large imagery
• Compact information
• Horizontal content
• Gallery layouts
• Typography-led sections

Every section should still belong to the same visual system.

---

36. FINAL QUALITY CHECK

Before returning the code, verify:

• Navigation works
• Mobile menu works
• All anchors are correct
• Gallery filters work
• Lightbox works
• Before/after comparison works
• Testimonials work
• Booking validation works
• Statistics animate correctly
• Back-to-top works
• No horizontal overflow
• No broken selectors
• No undefined variables
• No console errors
• No missing closing HTML tags
• Mobile layout is polished
• Reduced-motion support works
• All three files connect correctly

Fix problems before returning the final result.

---

37. FINAL OUTPUT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do not use placeholders such as:

“remaining code here”

“continue styles”

“add more items”

Do not provide pseudo-code.

Do not omit repetitive sections.

Everything must be implemented.

The website must work immediately after copying the three files into a static website editor.

The final result should be screenshot-worthy, production-quality, responsive, visually distinctive, and convincing enough to look like a professionally designed luxury salon website rather than an AI-generated template.