# Image Assets Directory Structure

This directory contains all static image assets for the EuroStaff website.

## Directory Structure

```
public/
├── team/              # Team member photos (400x400px recommended)
├── portfolio/         # Portfolio project images
│   ├── *-thumb.jpg   # Thumbnails (800x600px)
│   └── *-hero.jpg    # Hero images (1920x1080px)
├── tech/              # Technology logos (100x100px)
├── testimonials/      # Client testimonial avatars (200x200px)
├── certifications/    # Certification logos (200x200px)
└── offices/           # Office location photos (600x400px)
```

## Image Specifications

### Team Photos (`/team/`)
- **Size:** 400x400px (square)
- **Format:** JPG or PNG
- **Naming:** `firstname-lastname.jpg` (e.g., `klaus-weber.jpg`)
- **Quality:** High quality, professional headshots
- **Background:** Neutral or company branded

### Portfolio Images (`/portfolio/`)
- **Thumbnails:** 800x600px (4:3 ratio)
- **Hero Images:** 1920x1080px (16:9 ratio)
- **Format:** JPG (optimized for web)
- **Naming:** `project-slug-thumb.jpg`, `project-slug-hero.jpg`
- **Quality:** Showcase actual project screenshots or mockups

### Technology Logos (`/tech/`)
- **Size:** 100x100px (square) or SVG
- **Format:** SVG preferred, PNG with transparency
- **Naming:** `technology-name.svg` (e.g., `react.svg`, `nodejs.svg`)
- **Source:** Official brand assets when possible

### Testimonial Avatars (`/testimonials/`)
- **Size:** 200x200px (square)
- **Format:** JPG or PNG
- **Naming:** `firstname-lastname.jpg`
- **Quality:** Professional headshots of clients

### Certification Logos (`/certifications/`)
- **Size:** 200x200px or original aspect ratio
- **Format:** SVG or PNG
- **Naming:** `certification-name.svg` (e.g., `iso27001.svg`, `gdpr.svg`)
- **Source:** Official certification logos

### Office Photos (`/offices/`)
- **Size:** 600x400px (3:2 ratio)
- **Format:** JPG
- **Naming:** `city-name.jpg` (e.g., `berlin.jpg`, `warsaw.jpg`)
- **Quality:** Professional office or city photos

## Placeholder System

The website uses an automatic placeholder system for missing images:

### Usage in Code

```typescript
import { placeholders } from '@/utils/placeholder';

// Team member avatar
<img src={member.avatar || placeholders.teamMember(member.name)} />

// Portfolio thumbnail
<img src={project.thumbnail || placeholders.portfolio(project.title)} />

// Technology logo
<img src={tech.icon || placeholders.techLogo(tech.name)} />
```

### Placeholder Features

- **Automatic generation:** Creates placeholder images on-the-fly
- **Consistent colors:** Uses name-based color generation for consistency
- **Gradient avatars:** Beautiful gradient backgrounds for team members
- **Text overlays:** Shows initials or names on placeholders
- **No external dependencies:** Uses inline SVG or placehold.co service

## Image Optimization

Before adding images to production:

1. **Compress images:** Use tools like TinyPNG, ImageOptim, or Squoosh
2. **Proper sizing:** Don't upload images larger than needed
3. **WebP format:** Consider using WebP for better compression
4. **Lazy loading:** Images are lazy-loaded by default in Next.js
5. **Alt text:** Always provide descriptive alt text

## Adding New Images

### For Team Members

1. Get professional headshot (400x400px minimum)
2. Save as `public/team/firstname-lastname.jpg`
3. Update team data in `src/data/team.ts`:
   ```typescript
   avatar: '/team/firstname-lastname.jpg'
   ```

### For Portfolio Projects

1. Get project screenshots or mockups
2. Create thumbnail (800x600px) and hero (1920x1080px)
3. Save as:
   - `public/portfolio/project-slug-thumb.jpg`
   - `public/portfolio/project-slug-hero.jpg`
4. Update case study data in `src/data/caseStudies.ts`

### For Technology Logos

1. Download official logo (SVG preferred)
2. Save as `public/tech/technology-name.svg`
3. Update service data if needed

## Current Status

### ✅ Placeholder System
- Utility functions created
- Automatic fallbacks working
- Gradient avatars for team members
- Consistent color generation

### ⏳ Actual Images Needed
- [ ] Team member photos (6-8 people)
- [ ] Portfolio project screenshots (5-6 projects)
- [ ] Office location photos (3 offices)
- [ ] Client testimonial avatars (6-8 people)
- [ ] Certification logos (2-3 certifications)

### 📝 Notes

- Placeholders are production-ready and look professional
- Real images can be added gradually without breaking the site
- All image paths are centralized in data files for easy updates
- Next.js Image component will be used for optimization in production

## Resources

- **Stock Photos:** Unsplash, Pexels (for office/location photos)
- **Avatars:** UI Avatars, Boring Avatars (for temporary avatars)
- **Icons/Logos:** Official brand websites, Simple Icons
- **Compression:** TinyPNG, Squoosh.app, ImageOptim
- **Editing:** Figma, Photoshop, GIMP

## Future Improvements

- [ ] Implement Next.js Image component for automatic optimization
- [ ] Add WebP format support
- [ ] Set up image CDN (Cloudflare, Cloudinary)
- [ ] Add responsive image srcsets
- [ ] Implement blur-up loading effect