# Marketing Assets Directory

This directory contains all marketing-related images and media files.

## Directory Structure

```
public/images/marketing/
├── hero/
│   ├── dashboard-mockup.png
│   ├── dashboard-mockup.webp
│   └── dashboard-mockup@2x.png
├── screenshots/
│   ├── dashboard-screenshot.png
│   ├── campaigns-screenshot.png
│   ├── ai-tools-screenshot.png
│   └── analytics-screenshot.png
├── logos/
│   ├── logo.svg
│   ├── logo-white.svg
│   ├── logo-icon.svg
│   └── favicon.ico
├── customers/
│   ├── customer-logo-1.svg
│   ├── customer-logo-2.svg
│   └── ...
├── testimonials/
│   ├── avatar-1.jpg
│   ├── avatar-2.jpg
│   └── ...
├── og-images/
│   ├── og-image.jpg (1200x630)
│   ├── twitter-card.jpg (1200x675)
│   └── demo-thumbnail.jpg
└── icons/
    ├── feature-icon-1.svg
    ├── feature-icon-2.svg
    └── ...
```

## Image Guidelines

### Formats
- **SVG**: For logos, icons, and illustrations
- **WebP**: For photos and screenshots (with JPG/PNG fallback)
- **PNG**: For images requiring transparency
- **JPG**: For photos without transparency

### Optimization
- Compress all images before upload
- Use responsive images with srcset
- Provide @2x versions for retina displays
- Maximum file size: 500KB per image

### Naming Convention
- Use lowercase with hyphens
- Be descriptive: `dashboard-screenshot-desktop.png`
- Include size suffix: `logo@2x.png`
- Include format: `hero-image.webp`

### Required Images

#### Hero Section
- [ ] Dashboard mockup (desktop): 1200x800px
- [ ] Dashboard mockup (mobile): 600x800px
- [ ] Product demo video thumbnail: 1920x1080px

#### Screenshots
- [ ] Dashboard overview: 1600x1000px
- [ ] Campaign management: 1600x1000px
- [ ] AI tools interface: 1600x1000px
- [ ] Analytics dashboard: 1600x1000px

#### Logos & Branding
- [ ] Main logo (SVG)
- [ ] Logo white version (SVG)
- [ ] Logo icon only (SVG)
- [ ] Favicon (ICO, 32x32, 16x16)
- [ ] Apple touch icon (PNG, 180x180)

#### Social Media
- [ ] OpenGraph image: 1200x630px
- [ ] Twitter card image: 1200x675px
- [ ] LinkedIn share image: 1200x627px

#### Customer Logos
- [ ] 10-15 customer logos (SVG preferred)
- [ ] Grayscale versions for trust strip

#### Testimonials
- [ ] Customer avatars: 200x200px (circular)
- [ ] Company logos for testimonials

#### Icons
- [ ] Feature icons (SVG, 64x64)
- [ ] Role icons (Brand, Creator, Agency)
- [ ] Social platform icons

## Usage Examples

### Responsive Image
```html
<picture>
    <source srcset="/images/marketing/hero/dashboard-mockup.webp" type="image/webp">
    <source srcset="/images/marketing/hero/dashboard-mockup.png" type="image/png">
    <img src="/images/marketing/hero/dashboard-mockup.png" 
         srcset="/images/marketing/hero/dashboard-mockup@2x.png 2x"
         alt="Dashboard mockup" 
         loading="lazy">
</picture>
```

### Blade Asset Helper
```blade
<img src="{{ asset('images/marketing/logos/logo.svg') }}" alt="Logo">
```

### Background Image
```css
background-image: url('/images/marketing/hero/dashboard-mockup.webp');
```

## Tools for Optimization

- **TinyPNG**: https://tinypng.com/
- **Squoosh**: https://squoosh.app/
- **SVGOMG**: https://jakearchibald.github.io/svgomg/
- **ImageOptim**: https://imageoptim.com/

## Placeholder Images

For development, use placeholder services:
- https://via.placeholder.com/1200x800
- https://picsum.photos/1200/800
- https://placehold.co/1200x800

## Notes

- All images should be optimized before deployment
- Use CDN for production (CloudFlare, AWS CloudFront)
- Implement lazy loading for below-fold images
- Provide alt text for all images (accessibility)
- Test images on retina and non-retina displays