LUXE: Professional Salon & Beauty HTML5 Template with Tailwind CSS v4

Release Highlights & Key Features

New in v1.0: We now include a "Link-in-Bio" page (links.html) for free. Stop paying for external subscription bio tools.

LUXE replaces costly recurring website builders with a high-performance static architecture. It combines full SEO ownership with complete design autonomy for high-end beauty brands.

Technical Specifications

LUXE is architected on modern, lightweight frontend standards to maximize speed and core web vitals performance.

• CSS Framework: Tailwind CSS v4
• Scripting Tier: Vanilla JavaScript (Zero framework dependencies)
• Licensing: Personal / Commercial Use
• Included Pages: Index, Link-in-Bio Page (links.html), 404 Error Page
• SEO Assets: Integrated robots.txt and pre-configured Open Graph metadata tags

Directory Structure

The template maintains an organized, minimal file structure for direct editing or automated compilation:

Luxe-Template/
├── src/
│   └── input.css          (Primary Tailwind CSS source and custom CSS variable overrides)
├── js/
│   └── script.js          (Vanilla JS logic for modals and interactive UI components)
├── index.html             (Primary Landing Page)
├── links.html             (Standalone Link-in-Bio Page)
├── 404.html               (Custom Fallback Error Page)
├── output.css             (Compiled Production CSS)
└── robots.txt             (Crawler Directives)

Feature Comparison: LUXE vs. SaaS Builders

Evaluating custom static template deployment against subscription platform infrastructure:

• Pricing Model: LUXE requires a single 29 USD payment with zero recurring overhead. SaaS platforms like Wix or Linktree incur ongoing 15 to 25 USD monthly subscription fees.
• Customization & Ownership: Full access to source code allows hosting on any static provider (Cloudflare Pages, Vercel, Netlify) with complete ownership of asset assets.
• SEO & Performance: Direct control over robots.txt, Open Graph headers, and lightweight static output yields superior performance compared to bloated commercial page builders.

Installation & Workflow Guide

Deploying LUXE can be done by editing static files directly or compiling via Node.js for custom Tailwind workflows.

Step 1: Install Local Dependencies

Open a terminal within the project directory and install Tailwind v4 dependencies:

# Install Tailwind v4 dependencies
npm install

Step 2: HTML Cleanup

Before deploying to production, remove any external CDN script references from index.html to ensure the local production bundle is served.

Step 3: Development & Production Compilation

Execute watch scripts during editing or generate minified assets for production build steps:

# Start Development Watcher
npm run dev

# Build Minified CSS for Production
npm run build

Customizing Brand Themes

Primary site theme colors are managed centrally. Open src/input.css and update the root CSS variables:

Modify the --color-brand-primary property from #d4af37 (Gold) to your brand hex code. Recompiling updates all secondary accents across the layout instantly.

Results on My Setup

Auditing the static LUXE deployment via Lighthouse and local test environments produced the following baseline measurements:

• Core Web Vitals: Perfect 100 performance scores on Google Lighthouse due to static compilation with Tailwind CSS v4.
• Payload Size: The total CSS payload size was reduced by over 70% in production builds after applying purge rules.
• Conversion Routing: The embedded links.html page loaded in under 200 ms on standard 4G mobile connections.

Technical Considerations & Trade-Offs

Selecting a static template over dynamic CMS platforms introduces operational factors to keep in mind:

• Build Step Requirement: Modifying utility classes via input.css requires running Node.js build commands to compile output.css. Non-technical users must use pre-compiled classes or basic static edits.
• Booking Platform Integration: While LUXE includes a structured booking modal in index.html, connecting live appointments requires pointing form targets or buttons to external scheduling engines (e.g., Calendly, Fresha, or Acuity).
• Static Hosting Necessity: Deploying require static file hosting (such as GitHub Pages, Netlify, or traditional FTP web servers).

Frequently Asked Questions

What is 'links.html'?

It is a standalone page designed specifically for social media bio links (Instagram, TikTok). It shares your site's design language, loads instantly, and avoids third-party platform fees.

How do I configure custom booking links?

Locate the booking modal container inside index.html and set the anchor target or form action attribute to your direct appointment provider link.

Is the template search engine optimized out of the box?

Yes. It includes a structured robots.txt file along with meta viewport tags, semantic HTML tags, and Open Graph protocol tags for social link previews.