Essence Isle is a premium landing page for a niche perfume house, designed with a focus on individuality, mystery, and an immersive user experience. The site features a minimalist, cinematic aesthetic with a soft pastel lavender theme.
- Cinematic Hero Experience: A full-screen, high-definition visual introduction to the brand's philosophy.
- Ultra-Minimalist Navbar: A clean, airy navigation system that prioritizes brand identity and core collection links.
- Signature Collection: A curated showcase of flagship fragrances (Mountain Breeze, Rose de Jour, Crystaline Ember) with smooth hover interactions and detailed aura descriptions.
- AI Scent Discovery: A refined, interactive section where users can discover their personalized fragrance profile through memory descriptions and image uploads.
- Custom Branding: Bespoke typography using local "Montserrat" and "Lux Classic" fonts with precise letter-spacing.
- Responsive & Accessible: Fully optimized for all devices, from mobile to desktop.
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Fonts: Local font integration (
next/font/local) - Smooth Scrolling: Lenis integration for a premium scroll feel.
- Node.js 18.x or later
- npm or yarn
-
Clone the repository:
git clone [repository-url]
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
- Primary Color:
#f2ecfe(Pastel Lavender) - Primary Text:
#2d1b4d(Deep Plum) - Accents:
#C6A86B(Champagne Gold) - Typography:
- Headings: Lux Classic (Serif)
- Body: Montserrat & Lux Classic (Sans-serif)
Developed with a focus on "Quiet Luxury" and craftsmanship.