# 📸 How to Add Your Images

All image references have been updated to use local images from the `public/images/` directory. 

## ✅ What's Been Done

- ✅ All Unsplash URLs replaced with local image paths
- ✅ Image directories created
- ✅ Fallback to Unsplash if local images are missing (so site still works)
- ✅ All pages updated (home, rooms, gallery, services, about, contact, attractions)

## 📁 Image Directory Structure

Place your images in these folders:

```
public/images/
├── hero/                    # Homepage hero slider (3 images)
│   ├── hero-1.jpg          # Hotel exterior
│   ├── hero-2.jpg          # Luxury room
│   └── hero-3.jpg          # Hotel lobby
│
├── rooms/                   # Room images
│   ├── rooms-header.jpg    # Rooms page header
│   ├── deluxe-boutique.jpg
│   ├── deluxe-boutique-2.jpg
│   ├── deluxe-twin.jpg
│   ├── deluxe-twin-2.jpg
│   ├── deluxe-family.jpg
│   ├── deluxe-family-2.jpg
│   ├── executive.jpg
│   ├── executive-2.jpg
│   ├── executive-family.jpg
│   └── executive-family-2.jpg
│
├── gallery/                 # Gallery images
│   ├── gallery-header.jpg  # Gallery page header
│   ├── exterior-1.jpg
│   ├── lobby-1.jpg
│   ├── restaurant-1.jpg
│   ├── room-1.jpg
│   ├── room-2.jpg
│   ├── food-1.jpg
│   ├── reception-1.jpg
│   └── view-1.jpg
│
├── attractions/            # Nearby attractions
│   ├── pashupatinath.jpg
│   ├── pashupatinath-2.jpg
│   ├── boudhanath.jpg
│   └── durbar-square.jpg
│
├── services/               # Services page
│   └── services-header.jpg
│
├── about/                  # About page
│   ├── about-header.jpg
│   ├── about-main.jpg
│   ├── about-1.jpg
│   ├── about-2.jpg
│   ├── about-3.jpg
│   └── about-4.jpg
│
└── contact/                # Contact page
    └── contact-header.jpg
```

## 🎯 Quick Start

1. **Add your images** to the appropriate folders above
2. **Use the exact filenames** shown, OR update the code to match your filenames
3. **Refresh your browser** - images will appear automatically!

## 📝 Image Requirements

### Recommended Sizes:
- **Hero images:** 1920x1080px (or 16:9 aspect ratio)
- **Room images:** 800x600px minimum
- **Gallery images:** 600x400px minimum
- **Attraction images:** 1200x600px minimum
- **Page headers:** 1920x600px

### Formats:
- JPG (recommended for photos)
- PNG (for images with transparency)
- WebP (for better compression)

### File Size:
- Keep images under 500KB each for fast loading
- Use image optimization tools like TinyPNG before uploading

## 🔄 Fallback System

If an image is missing, the site will automatically show a placeholder from Unsplash. This means:
- ✅ Your site will always work, even without images
- ✅ You can add images gradually
- ✅ No broken images will appear

## 🚀 After Adding Images

1. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
2. Refresh the page
3. Your images should appear!

## 💡 Tips

- Use descriptive filenames (e.g., `deluxe-boutique-room.jpg`)
- Keep consistent naming conventions
- Optimize images before uploading (reduce file size)
- Test on different devices to ensure images look good

---

**Note:** The database seeders already use these local paths, so when you add images with the correct filenames, they'll appear automatically on the website!

