A cinematic, ultra-premium mountain resort website built with React, Tailwind CSS v4, and Framer Motion. This project features immersive storytelling, seasonal fog animations, and a sophisticated design system.
- 🎭 Cinematic Hero Experience: Immersive fullscreen visuals with Ken Burns effect and "Escape Into the Mist" storytelling.
- 🌫️ Seasonal Fog Atmosphere: A custom React hook detects the current month and applies a cinematic fog overlay during November, December, and January.
- 🗺️ Multi-Page Navigation: Dedicated Home and Location/Map pages connected via React Router.
- ✨ Custom Glow Cursor: A bespoke interactive cursor effect that reacts to hover states for a premium touch.
- 🍱 Luxury Design System:
- Colors: Deep Forest Green, Mist Gray, and Soft Gold palette.
- Typography: Elegant Cinzel and Playfair Display headings with Inter body text.
- 📱 Ultra-Responsive: Meticulously optimized for all devices, from mobile to large desktop displays.
- 🖱️ Smooth Interactions: Scroll-triggered animations, parallax effects, and glassmorphism UI elements.
- Framework: React (Vite)
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Icons: Lucide React
- Routing: React Router
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/mountain-resort.git cd mountain-resort -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
src/
├── components/ # Reusable UI components (Navbar, Hero, Rooms, etc.)
├── hooks/ # Custom React hooks (useSeasonalFog)
├── pages/ # Page components (Home, Map)
├── assets/ # Images and static assets
└── index.css # Global styles and Tailwind v4 configuration
This project is licensed under the MIT License - see the LICENSE file for details.
Designed and Developed for the ultimate luxury mountain experience.