# Thematic Ecosystem — project images guide

This folder holds the screenshots/visuals for the Thematic Ecosystem case study
and its child projects. Every page works with graceful placeholders, so missing
images will **not** break anything. Drop real files in to replace the
placeholders.

## How images are wired

Image file names are defined in `src/data/projects.js`:

- Each child project has a `beforeAfterGroups` list built with
  `attachPaths(slug, fileList)`. The `fileList` array maps each group to a
  `[before.webp, after.webp]` pair under `public/projects/<slug>/`.
- Until a real `before`/`after` object is set, the slider shows a placeholder
  that displays the **expected file path** so you know exactly where each image
  goes.

To enable a real image, edit the relevant group/gallery entry in
`src/data/projects.js` and replace `before: null` (or `after: null`,
`image: null`) with:

```js
before: {
  src: "/projects/thematic-channels/before-home.webp",
  alt: "Thematic Channels homepage before redesign"
}
```

Use honest screenshots only. Do not add fake metrics, testimonials, or outcomes.

## Folders & expected files

### thematic-ecosystem/ (umbrella)
- `hero.webp`
- `ecosystem-map.webp`
- `overview-before.webp`
- `overview-after.webp`

### thematic-channels/
- `hero.webp`
- `before-home.webp`, `after-home.webp`
- `before-content.webp`, `after-content.webp`
- `before-mobile.webp`, `after-mobile.webp`

### thematic-celebrities/
- `hero.webp`
- `before-home.webp`, `after-home.webp`
- `before-profile.webp`, `after-profile.webp`
- `before-mobile.webp`, `after-mobile.webp`

### thematic-events/
- `hero.webp`
- `before-home.webp`, `after-home.webp`
- `before-event.webp`, `after-event.webp`
- `before-registration.webp`, `after-registration.webp`
- `before-mobile.webp`, `after-mobile.webp`

### thematic-group/
- `hero.webp`
- `before-home.webp`, `after-home.webp`
- `before-about.webp`, `after-about.webp`
- `before-mobile.webp`, `after-mobile.webp`

### thematic-admin/ (internal system — fewer screenshots by design)
- `hero.webp`
- `admin-dashboard.webp`
- `admin-workflow.webp`
- `database-structure.webp`
- `before-workflow.webp`, `after-workflow.webp`