Documentation: Luxe Salon Template (v1.0)

Thank you for purchasing Luxe! This is a professional salon template built with HTML5 and Tailwind CSS v4. This guide covers the installation, development, and production build process.

1. File Structure

Your project folder is structured for a standard Node.js workflow:

Luxe-Template/
├── src/
│ └── input.css          (Main CSS Source)
├── js/
│ └── script.js          (Interactive Logic)
├── index.html         (Main Website)
├── links.html         (Bonus: Link-in-Bio Page)
├── 404.html           (Bonus: Error Page)
├── robots.txt         (Bonus: SEO Bot File)
├── terms.html         (Legal Page)
├── privacy.html       (Legal Page)
├── output.css         (Compiled CSS)
├── package.json       (Build Config)
└── documentation.html (You are reading this)

2. Installation & Setup

You will need Node.js installed to compile the styles.

Step 1: Install Dependencies

Open your terminal/command prompt in the project folder and run:

npm install

This installs Tailwind CSS v4 and the CLI tools defined in package.json.

Step 2: Clean Up index.html (Important)

Before starting, open index.html and remove the following lines ( If Present ) from the <head> section. These were for preview purposes only and are not needed for the production build.

Remove: <script src="https://cdn.tailwindcss.com"></script>
Remove: The entire <script>tailwind.config = { ... }</script> block.

Why? We are using the compiled output.css file instead, which is faster and cleaner.

Step 3: Start Development Server

To watch for changes and automatically rebuild your CSS while you edit:

npm run dev

This command runs the Tailwind CLI in watch mode. You can now edit src/input.css or your HTML files, and the changes will reflect immediately.

3. Customizing the Theme (Colors & Fonts)

In Tailwind v4, theme customization is done directly in CSS. Open src/input.css to make changes.

Changing Brand Colors

Locate the @theme or :root variables block in src/input.css. It will look like this:

@layer theme {
    :root {
        --color-brand-dark: #0f0f0f;
        --color-brand-primary: #d4af37; /* <--- Change this Hex Code */
        --color-brand-light: #f4f4f4;
    }
}

Simply update the hex codes. For example, change #d4af37 to #E91E63 for a Pink theme. The build script will automatically update output.css.

4. Production Build

When you are ready to publish your website, run the build command to generate a minified, optimized CSS file:

npm run build

This generates the final output.css.

5. Managing Content Sections

The template uses "Repeating Blocks". To add content, copy the HTML code block and paste it below the existing items.

A. Services

In #services, copy this block inside a category card:

<div class="flex justify-between items-center border-b border-white/10 pb-4">
    <div>
        <h4 class="font-medium text-lg text-gray-200">New Service Title</h4>
        <p class="text-xs text-gray-500 mt-1">Description</p>
    </div>
    <span class="font-serif text-xl text-brand-primary italic">$99</span>
</div>

B. Team Members

In #stylists, duplicate this block:

<div class="group cursor-pointer">
    <div class="relative overflow-hidden h-[500px] w-full mb-6">
        <img src="IMAGE_URL" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-700 ease-in-out transform group-hover:scale-105">
        <div class="absolute bottom-0 left-0 w-full bg-white/90 backdrop-blur-sm p-4 translate-y-full group-hover:translate-y-0 transition duration-500 flex justify-center gap-6">
            <a href="#" class="text-brand-dark hover:text-brand-primary"><i class="fa-brands fa-instagram text-lg"></i></a>
        </div>
    </div>
    <div class="text-center">
        <h3 class="font-serif text-2xl font-bold text-brand-dark">Name</h3>
        <p class="text-brand-primary uppercase tracking-widest text-xs mt-2">Role</p>
    </div>
</div>

C. FAQ Items

In the "Common Inquiries" section, duplicate the details block:

<details class="group [&_summary::-webkit-details-marker]:hidden border-b border-gray-300">
    <summary class="flex items-center justify-between cursor-pointer py-6 text-brand-dark hover:text-brand-primary transition">
        <span class="font-serif text-xl font-medium">Question?</span>
        <span class="relative ml-1.5 h-5 w-5 flex-shrink-0">
            <svg class="absolute inset-0 h-5 w-5 opacity-100 group-open:opacity-0 transition-opacity duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
            <svg class="absolute inset-0 h-5 w-5 opacity-0 group-open:opacity-100 transition-opacity duration-300 text-brand-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" /></svg>
        </span>
    </summary>
    <div class="pb-6 text-gray-600 leading-relaxed animate-[fadeIn_0.5s_ease-out]">
        <p>Answer.</p>
    </div>
</details>

6. JavaScript Functionality

The logic is located in js/script.js.

Booking Modal: Configured to open on any link with href="#book-now". Set your email action in the <form> tag (e.g., using Formspree).
Mobile Menu: Controls the responsive navigation toggle.
Lightbox: Works automatically on images with class gallery-img.

7. Deployment

For deployment, you only need to upload the following files to your host (Netlify, Vercel, cPanel, etc.):

index.html (The cleaned version without CDN scripts)
output.css (The production CSS)
js/ folder
terms.html & privacy.html

8. SEO & Social Media Setup

Your template includes a professional SEO and Social Media (Open Graph) setup. To ensure your website ranks on Google and looks good when shared on Facebook/Twitter, you must update these tags.

Open index.html, look inside the <head> tag, and update the following lines:

<title>Luxe Salon | Premium Hair Styling & Spa Treatments</title>
<meta name="title" content="Luxe Salon | Premium Hair Styling & Spa Treatments">
<meta name="description" content="Experience world-class hair styling, skincare, and spa treatments at Luxe Salon. Book your appointment today for a transformative beauty experience in the heart of the city.">
<meta name="keywords" content="luxury salon, hair stylist, spa treatments, facial, massage, barber shop, beauty salon, manicure, pedicure, bridal makeup, hair coloring balayage">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="author" content="Luxe Salon Template">

<!-- Social Media Previews -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://your-website.com/"> <!-- REPLACE THIS -->
<meta property="og:title" content="Luxe Salon | Premium Hair & Spa Experience">
<meta property="og:description" content="Discover the art of beauty. From precision haircuts to rejuvenating spa facials, Luxe offers a sanctuary for your wellbeing. Book online today.">
<meta property="og:image" content="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=1974&auto=format&fit=crop">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://your-website.com/"> <!-- REPLACE THIS -->
<meta property="twitter:title" content="Luxe Salon | Premium Hair & Spa Experience">
<meta property="twitter:description" content="Discover the art of beauty. From precision haircuts to rejuvenating spa facials, Luxe offers a sanctuary for your wellbeing.">
<meta property="twitter:image" content="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=1974&auto=format&fit=crop">

<!-- Browser Colors & Icon -->
<meta name="theme-color" content="#d4af37">
<meta name="msapplication-navbutton-color" content="#d4af37">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✂️</text></svg>">

Important: Be sure to change content="https://your-demo-link.com/" to your actual domain name (e.g., https://mysalon.com/), otherwise social sharing previews might not work correctly.

9. Bonus Files & Extras

We have included three professional tools to help you market your salon better and improve your website's technical performance.

A. Link-in-Bio Page (links.html)

Stop paying for tools like Linktree. We included a custom, branded links page designed for your Instagram and TikTok bio.

Usage: Upload links.html to your server.
Your Link: Your bio link will be https://yoursalon.com/links.html.
Editing: Open the file and update the profile image URL and the href="#" links to your social media profiles.

B. Custom 404 Page (404.html)

If a visitor types a wrong URL (e.g., yoursalon.com/old-page), they usually see a generic error. This file keeps them on your site with a branded message.

Usage: Most hosting providers (Netlify, Vercel, cPanel) automatically detect this file. simply upload it to your root folder.
Customization: You can edit the text "Style Not Found" to be anything you like.

C. Robots.txt (SEO Control)

This file tells Google and other search engines which parts of your site to index and which to ignore (like system files).

Usage: Upload this file to the "root" (main folder) of your website hosting.
Important Step: Open the file and replace https://your-domain.com/sitemap.xml with your actual website link.