Luxuria Parlour 🌟

A modern, component-based premium beauty and salon website built with Next.js (App Router) and exclusively styled using styled-components.

This project evolved from a static HTML/CSS template into a modular React application featuring Server-Side Rendering (SSR) of styles and fully encapsulated Next.js components.

---

🚀 Tech Stack

• Framework: Next.js (App Router, Turbopack)
• Library: React
• Styling: styled-components
• Language: TypeScript/TSX
• Icons: Phosphor Icons (loaded via CDN)
• Fonts: System & Web safe fonts with variable property usage

---

✨ Key Features

• Component-Driven Architecture: Codebase is modularized into dedicated sections (e.g., HeroSection, PricingSection, GallerySection).
• Encapsulated Styling: All section-specific styles are housed directly within their respective React components using styled-components.
• Zero FOUC (Flash of Unstyled Content): Configured with Next.js specific Server Registry (lib/registry.tsx) to preload styled-components on the server.
• Global Design System: Utilizes app/globals.css strictly for CSS custom properties (variables), baseline resets, base typography, and preloader keyframes.
• Responsive Layout: Fully styled for modern desktop, tablet, and mobile views using localized styled-components media queries.
• Dynamic Interactivity: Vanilla JS preloader and mobile navbar toggles rewritten internally using pure React hooks (useState, useEffect).

---

📂 Project Structure

luxuria/
├── app/
│   ├── globals.css         # Global variables, resets, and utility classes
│   ├── layout.tsx          # Root layout housing the StyledComponentsRegistry 
│   └── page.tsx            # Main orchestrator, manages Preloader and imports sections
├── components/
│   ├── Navbar.tsx          # Sticky navigation with mobile menu React state
│   └── sections/           # Individual, styled Next.js section components
│       ├── AboutSection.tsx
│       ├── BookingSection.tsx
│       ├── ContactSection.tsx
│       ├── FeaturesSection.tsx
│       ├── FooterSection.tsx
│       ├── GallerySection.tsx
│       ├── HomeSection.tsx
│       ├── InstagramSection.tsx
│       ├── MarqueeSection.tsx
│       ├── PricingSection.tsx
│       ├── ServicesSection.tsx
│       ├── StatsBandSection.tsx
│       ├── TeamSection.tsx
│       └── TestimonialsSection.tsx
├── lib/
│   └── registry.tsx        # Styled-components SSR compatibility wrapper
├── public/                 # Static assets
└── next.config.ts          # Turbopack & Styled-component compiler settings

---

🛠️ Getting Started

Prerequisites

Make sure you have Node.js installed.

Installation

1. Clone the repository and navigate into the luxuria directory:

   cd luxuria

2. Install dependencies:

   npm install

Development Server

Run the development server using Turbopack:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Production Build

To create an optimized production build:

npm run build
npm start

---

🎨 Styling Philosophy

1. Variables & Globals

We house foundational elements in app/globals.css:

• Color Palettes: Defined as root variables (e.g., --clr-primary, --clr-bg-dark).
• Typography & Transitions: Standardizing baseline font families and CSS transitions.
• Utilities: Core animations (like fadeInUp) and site-wide labels.

2. Component-Level CSS

Instead of a gigantic monolithic stylesheet, each section (like ServicesSection.tsx) leverages a styled.section (or similar) wrapper. All local styles, hovers, and strict media queries are bundled directly with the logic itself. This makes expanding, modifying, or removing features entirely straightforward without breaking external designs.

---

📜 License

This application is created for demonstration and educational purposes around component-based modern architecture