LUXE Salon is a premium, responsive website designed to deliver a luxury-grade digital experience. It features smooth scroll animations, glassmorphism UI, dark/light theme switching, and a fully functional contact system.
SaferSkills independently audited salon-website (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <img src="public/images/luxury_salon_interior.png" alt="LUXE Salon" width="600" /> </p>
<h1 align="center">✨ LUXE Salon</h1>
<p align="center"> <strong>A premium hair & beauty salon website built with modern web technologies</strong> </p>
<p align="center"> <img src="https://img.shields.io/badge/Next.js-16-black?logo=next.js" alt="Next.js" /> <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react" alt="React" /> <img src="https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?logo=tailwindcss" alt="Tailwind CSS" /> <img src="https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript" alt="TypeScript" /> <img src="https://img.shields.io/badge/Framer_Motion-12-FF0050?logo=framer" alt="Framer Motion" /> </p>
LUXE Salon is a premium, responsive website designed to deliver a luxury-grade digital experience. It features smooth scroll animations, glassmorphism UI, dark/light theme switching, and a fully functional contact system.
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router, SSR & API routes |
| React 19 | UI library with latest concurrent features |
| Tailwind CSS 4 | Utility-first styling with custom design tokens |
| TypeScript 5 | Type-safe development |
| Framer Motion 12 | Scroll animations, page transitions & micro-interactions |
| Lenis | Butter-smooth scroll experience |
| Lucide React | Beautiful, consistent icon system |
| next-themes | Dark/light mode with system preference detection |
tel: and mailto: links for instant actionluxe-salon/
├── public/
│ └── images/ # Optimized assets
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── contact/ # Contact form API route
│ │ │ └── newsletter/ # Newsletter subscription API route
│ │ ├── globals.css # Design tokens, theme, utility classes
│ │ ├── layout.tsx # Root layout with providers
│ │ └── page.tsx # Main page with lazy-loaded sections
│ ├── components/
│ │ ├── animations/ # Scroll reveals, particles, aurora BG
│ │ ├── sections/ # Navbar, Hero, About, Services, Gallery,
│ │ │ # Testimonials, Contact, Footer
│ │ └── ui/ # Reusable UI primitives
│ ├── hooks/ # Custom hooks (parallax, etc.)
│ └── lib/ # Constants, utilities
├── .github/
│ └── workflows/
│ └── ci.yml # GitHub Actions CI pipeline
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts# Clone the repository
git clone https://github.com/YOUR_USERNAME/luxe-salon.git
cd luxe-salon
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to see the result.
| Command | Description |
|---|---|
npm run dev | Start development server with hot reload |
npm run build | Create optimized production build |
npm run start | Serve the production build |
npm run lint | Run ESLint for code quality checks |
The project uses a custom design token system defined in globals.css:
| Token | Light Mode | Dark Mode |
|---|---|---|
--background | Near white | Deep charcoal |
--foreground | Near black | Near white |
--accent | Rich gold | Bright gold |
--muted-foreground | Mid gray | Light gray |
POST /api/contactHandles appointment booking form submissions.
Body:
{
"name": "string (required)",
"email": "string (required)",
"phone": "string (required)",
"service": "string (required)",
"message": "string (optional)"
}POST /api/newsletterHandles newsletter email subscriptions.
Body:
{
"email": "string (required)"
}Note: Both endpoints currently log to the console. To connect a real email service (SendGrid, Resend, Mailchimp, etc.), update the route handlers in src/app/api/.npm i -g vercel
verceldocker build -t luxe-salon .
docker run -p 3000:3000 luxe-salongit checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License.
<p align="center"> Built with ❤️ using Next.js, Tailwind CSS & Framer Motion </p>
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.