Bespoke Aesthetic Medicine meets Curated Wellness. Lumiére is a premium digital experience for an elite aesthetic clinic, featuring subtle, high-impact transformations and organic anti-aging modalities.
Lumiére is a sophisticated web application built with Next.js 16 (App Router) and React 19, designed to showcase the clinical excellence of a modern medical spa. The project emphasizes a "quiet luxury" aesthetic, combining minimalist design with powerful interactive elements.
- 🏆 Signature Medical Therapies: Detailed showcases for advanced treatments like Fotona 4D, PRP Glow Infusion, and Sculptra.
- 🌓 Interactive Before & After Slider: A custom-built visualizer allowing clients to witness clinical transformations first-hand.
- 👩⚕️ Professional Trust Profile: Comprehensive credentials and bio for the lead clinician, Dr. Evelyn Rousseau.
- 📅 Seamless Booking Flow: Integrated appointment request system with WhatsApp quick-action support.
- 📱 Fluid Animations: Powered by
motion(Framer Motion) for a smooth, high-end feel. - 🎨 Modern Styling: Built with the latest Tailwind CSS v4 for high-performance, maintainable styles.
- Framework: Next.js 16 (App Router)
- Library: React 19
- Styling: Tailwind CSS v4
- Animations: Motion
- Icons: Lucide React
- Fonts: Serif (Playfair Display/Source Serif) for elegance + Sans (Inter/Geist) for clarity.
- Language: TypeScript
-
Clone the repository
git clone https://github.com/your-username/lumiere.git cd lumiere -
Install dependencies
pnpm install
-
Run the development server
pnpm dev
-
Open the application Navigate to http://localhost:3000 in your browser.
├── app/ # Next.js App Router (Pages & Layouts)
│ ├── services/ # Treatment detail pages
│ ├── booking/ # Appointment request flow
│ ├── before-after/ # Results gallery
│ └── globals.css # Tailwind 4 configuration & global styles
├── components/ # Reusable UI components
│ ├── Hero.tsx # Dynamic model hero section
│ ├── BeforeAfterSlider.tsx # Interactive visualizer
│ └── BookingForm.tsx # Appointment request logic
├── data.ts # Centralized treatment & clinic data
├── types.ts # TypeScript interfaces
├── public/ # Static assets (images, icons)
└── package.json # Dependencies & scripts
Lumiére specializes in non-invasive, bio-stimulatory technologies:
- Fotona 4D Laser Facelift: 4D collagen remodeling from the inside out.
- PRP Youth Glow: Autologous growth factor infusion for organic skin repair.
- Sculptra Aesthetic: PLLA-based deep tissue volumization.
- Hair Restoration: Advanced PRP therapy for follicular awakening.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️ for the pursuit of natural beauty.