Hotel Park Premium

byManish Kumar

Build a complete, production-ready React + Vite + Tailwind CSS hotel website for "Hotel Park Premium" located in Sikkim, India. The website must have 4 pages: Home, About, Rooms, Travel, and Contact — with a luxury yet warm mountain-resort aesthetic, fully responsive, and designed to feel immersive and inviting. --- ## 🎨 DESIGN SYSTEM **Color Palette:** - Primary: Deep Forest Green `#1B4332` - Accent Gold: `#C9A84C` - Warm Cream: `#FDF6EC` - Charcoal: `#1C1C1C` - Mist Gray: `#F0EDE8` - White: `#FFFFFF` **Typography:** - Display / Headings: `Playfair Display` (Google Font) — serif, elegant - Body: `Inter` (Google Font) — clean, readable - Accent Labels / Tags: `Lato` or `DM Sans` **Design Philosophy:** - Luxury boutique hotel feel — not corporate, not generic - Micro-interactions on hover (scale, glow, shadow lift) - Smooth scroll-triggered fade-in animations (use Framer Motion) - Sticky glassmorphism navbar with blur effect - Cards with hover parallax lifts - Gold dividers and accent underlines on section titles - Full-screen hero with a parallax background video/image overlay - Consistent 80px section padding --- ## 🧭 NAVBAR - Sticky top navbar with glassmorphism: `backdrop-blur-md bg-white/80 shadow-sm` - Logo: "Hotel Park Premium" with a small mountain/leaf SVG icon in gold - Nav links: Home | About | Rooms | Travel | Contact - Active link: gold underline indicator - CTA button: "Book Now" — filled gold button, rounded - Mobile: hamburger menu with smooth slide-down drawer - Smooth scroll or React Router navigation --- ## 🏠 PAGE 1: HOME **Hero Section:** - Full-screen background image (Sikkim mountain landscape) - Dark gradient overlay - Centered text: - Eyebrow tag: "Welcome to Sikkim's Finest" - H1: "Luxury Meets the Himalayas" - Subtext: "Experience unmatched comfort nestled in the heart of the Eastern Himalayas" - Two CTA buttons: "Explore Rooms" (gold filled) | "Discover Sikkim" (ghost/outline) - Scroll indicator animation at bottom **Stats Strip:** - 4 stat cards in a horizontal strip below hero: - 🏨 120+ Rooms | ⭐ 4.9 Rating | 🌄 6 Districts Covered | ☕ 24/7 Service **Featured Rooms Section:** - Title: "Our Premium Rooms" - 3 room cards in a grid: Deluxe Room, Suite Room, Himalayan View Suite - Each card: image, room name, key features (icons), price per night, "View Details" button - Cards have hover lift shadow + scale(1.02) animation **Why Choose Us Section:** - 4 icon boxes in a 2x2 or 4-col grid: - 🏔️ Himalayan Views | 🍽️ Organic Restaurant | 🧘 Wellness Spa | 🚐 Travel Assistance - Minimal icon + title + 1-line description style **Explore Sikkim Banner:** - Full-width section with a Sikkim landscape background - Overlay text: "Six Districts. One Journey. Infinite Memories." - CTA: "Explore Travel Guide" → links to Travel page **Testimonials Section:** - 3 guest review cards with star ratings, quote, name, and country flag - Subtle card background, italic quote styling **Gallery Strip:** - Masonry or equal-height 6-image photo gallery - Hover zoom-in effect on images --- ## 🏨 PAGE 2: ABOUT **Hero Banner:** - Background: Hotel exterior photo - Title: "Our Story" **About Content:** - Left: Image of hotel lobby/mountain view - Right: Story text about Hotel Park Premium — founded with a vision to blend Sikkimese hospitality with luxury comfort, sustainability-focused, team of local experts - Gold accent border-left on the text block **Our Values:** - 4 values in card grid: Hospitality, Sustainability, Local Culture, Excellence **Team Section:** - 3-4 team member cards: Name, Role, small circular photo, short bio **Awards & Certifications:** - Logo strip of certificates/badges (use placeholder icons) --- ## 🛏️ PAGE 3: ROOMS **Hero:** - Title: "Find Your Perfect Stay" - Subtitle about comfort and Himalayan views **Room Filter Tabs:** - Tabs: All | Deluxe | Suite | Premium | Himalayan View - On click, filter the room cards dynamically (React state) **Room Cards (6 total):** Each card shows: - Image (top) - Room name + category tag - Amenity icons: WiFi, AC, TV, Geyser, Mountain View, Breakfast - Size in sq.ft - Price: "₹ X,XXX / night" - Two buttons: "View Details" | "Book Now" **Room Detail Modal (on "View Details" click):** - Opens a full modal with: - Image gallery (2-3 images) - Full amenities list - Description - Price breakdown - "Book Now" CTA --- ## ✈️ PAGE 4: TRAVEL **Hero:** - Title: "Discover the Six Districts of Sikkim" - Subtitle: "From alpine meadows to ancient monasteries — explore every corner" **Districts Grid:** - 2x3 grid (6 cards) — one for each district: 1. East Sikkim (Capital: Gangtok) 2. West Sikkim (Capital: Geyzing) 3. North Sikkim (Capital: Mangan) 4. South Sikkim (Capital: Namchi) 5. Pakyong District (Capital: Pakyong) 6. Soreng District (Capital: Soreng) **District Card Design:** - Background image of the district - Overlay gradient - District name + capital badge - "Explore District →" button - Hover: slight scale-up and brighter overlay **District Detail Page (on card click — opens a new route like `/travel/east-sikkim`):** Each district page contains (FULL DATA for all 6 districts): ### Header Section: - Full-width hero image of district - District name, capital, altitude range, best time to visit (in badge pills) ### 1. Overview: - 2-3 paragraphs about the district's geography, culture, and vibe ### 2. Top Attractions: - 4-6 attraction cards with image, name, short description, and distance from hotel ### 3. Festivals & Events: - Timeline or cards layout - Festival name, month, description (3-4 festivals per district) ### 4. Accommodation Options: - Table or card list: Budget | Mid-range | Luxury options (general info, not specific hotels) ### 5. Transportation: - Icons + descriptions for: Road, Air, Shared Jeep, Helicopter (if applicable) ### 6. Travel Tips: - Numbered list of 5-6 practical tips specific to that district (permits, clothing, altitude sickness, etc.) ### 7. FAQ: - Accordion-style FAQ (5-6 questions per district) - Smooth expand/collapse animation **FULL DATA TO USE FOR ALL 6 DISTRICTS:** **East Sikkim:** - Capital: Gangtok | Altitude: 1,437–1,800m | Best Time: March–May, Oct–Dec - Attractions: Rumtek Monastery, Tsomgo Lake, Nathula Pass, MG Marg, Enchey Monastery, Banjhakri Falls - Festivals: Losar (Feb), Saga Dawa (May/June), Dashain (Oct), Tihar (Nov) - Tips: Carry Permit for Nathula, avoid monsoon landslides, book cable car in advance **West Sikkim:** - Capital: Geyzing | Altitude: 1,500–3,000m | Best Time: Oct–May - Attractions: Pelling, Khecheopalri Lake, Yuksom, Rabdentse Ruins, Singshore Bridge, Pemayangste Monastery - Festivals: Tendong Lho Rum Faat (Aug), Pang Lhabsol (Aug/Sept) - Tips: Trek permit for Dzongri, carry warm clothes year-round, Yuksom is trek base camp **North Sikkim:** - Capital: Mangan | Altitude: 900–5,500m | Best Time: May–June, Sept–Nov - Attractions: Gurudongmar Lake, Lachen, Lachung, Yumthang Valley, Zero Point, Chopta Valley - Festivals: Losar, Bumchu Festival (Feb/March) - Tips: Protected Area Permit required, book permits 2 days in advance, carry altitude sickness medicine **South Sikkim:** - Capital: Namchi | Altitude: 900–1,800m | Best Time: Oct–April - Attractions: Char Dham Namchi, Samdruptse Statue, Ravangla, Tendong Hill, Borong - Festivals: Buddha Jayanti (May), Namchi Mahotsav (Oct) - Tips: Best for road trips, ideal for first-time Sikkim visitors **Pakyong District:** - Capital: Pakyong | Altitude: 1,300–2,500m | Best Time: March–June, Sept–Nov - Attractions: Pakyong Airport, Aritar Lake, Padamchen, Reshithang, Hanuman Tok - Tips: Nearest district to airport, good for short getaways **Soreng District:** - Capital: Soreng | Altitude: 600–2,000m | Best Time: Oct–March - Attractions: Legship, Okhrey, Barsey Rhododendron Sanctuary, Dentam - Festivals: Tendong Lho Rum Faat, Maghe Sankranti (Jan) - Tips: Best for offbeat trekking, less touristy, rhododendron bloom in April --- ## 📬 PAGE 5: CONTACT **Hero:** - Title: "Get In Touch" - Subtitle: "We'd love to hear from you" **Layout: Two-column** - Left: Contact info (address, phone, email, map embed placeholder) - Right: Contact form **Contact Form (Web3Forms integration):** ```jsx // Web3Forms endpoint: https://api.web3forms.com/submit // The user will replace ACCESS_KEY with their own key const FORM_FIELDS = [ { label: "Full Name", type: "text", name: "name", required: true }, { label: "Email Address", type: "email", name: "email", required: true }, { label: "Phone Number", type: "tel", name: "phone" }, { label: "Check-in Date", type: "date", name: "checkin" }, { label: "Check-out Date", type: "date", name: "checkout" }, { label: "Room Type", type: "select", name: "room_type", options: ["Deluxe", "Suite", "Himalayan View", "Premium"] }, { label: "Message", type: "textarea", name: "message" } ] ``` - Hidden field: `<input type="hidden" name="access_key" value="YOUR_WEB3FORMS_ACCESS_KEY" />` - On success: Show a green animated success message "Your message has been sent! We'll contact you within 24 hours." - On error: Show red error message - Button: "Send Message" with loading spinner state **Map Section:** - Full-width Google Maps embed (or placeholder) for hotel location in Sikkim --- ## 🔧 TECHNICAL REQUIREMENTS **Project Structure:**