# Images Directory

This directory is for storing general images used throughout the Mana landing page.

## Recommended Image Categories:

### Hero Images:

- **hero-background.jpg** - Main hero section background
- **hero-illustration.svg** - Hero section illustration/graphic

### Feature Images:

- **feature-1.png** - First feature illustration
- **feature-2.png** - Second feature illustration
- **feature-3.png** - Third feature illustration

### Product Screenshots:

- **dashboard-preview.png** - Dashboard screenshot
- **mobile-preview.png** - Mobile app screenshot
- **analytics-preview.png** - Analytics view screenshot

### Team/About:

- **team-member-1.jpg** - Team member photos
- **office-photo.jpg** - Company/office imagery

### Background Patterns:

- **pattern-dots.svg** - Decorative dot pattern
- **pattern-grid.svg** - Grid pattern
- **gradient-bg.jpg** - Gradient backgrounds

## Image Optimization Guidelines:

### Format Selection:

- **JPG**: Photos, complex images with many colors
- **PNG**: Images requiring transparency, screenshots
- **SVG**: Icons, illustrations, patterns (scalable)
- **WebP**: Modern format for better compression (with fallbacks)

### Size Optimization:

- Compress images using tools like TinyPNG or ImageOptim
- Provide responsive images in multiple sizes:
  - Small: 640px width
  - Medium: 1024px width
  - Large: 1920px width
  - Extra Large: 2560px width

### Naming Convention:

- Use descriptive, lowercase names with hyphens
- Include size suffixes for responsive images (e.g., hero-bg-large.jpg)
- Group related images with common prefixes

### Performance Tips:

- Lazy load images below the fold
- Use appropriate image dimensions (don't serve 4K images for thumbnails)
- Consider using CDN for image delivery
- Implement proper caching headers
