# Image Replacement Guide — Trimology weight

Every image on this site lives at `public/images/` and uses a
predictable filename. To replace any image, upload a new file with
the EXACT same name to that folder via your host's File Manager
(Hostinger / Cloudflare / cPanel). No code change, no rebuild.

## Slot map

| What it is | File path |
| --- | --- |
| Hero (main bottle shot) | `public/images/trimology-weight-hero.<ext>` |
| 1-bottle pricing card | `public/images/trimology-weight-1-bottle.<ext>` |
| 3-bottle pricing card | `public/images/trimology-weight-3-bottles.<ext>` |
| 6-bottle pricing card | `public/images/trimology-weight-6-bottles.<ext>` |
| Bonus #1 cover | `public/images/trimology-weight-bonus-1.<ext>` |
| Bonus #2 cover | `public/images/trimology-weight-bonus-2.<ext>` |
| Bonus #3 cover | `public/images/trimology-weight-bonus-3.<ext>` |
| Ingredient 1..N | `public/images/trimology-weight-ingredient-N.<ext>` |
| Customer review portrait 1..3 | `public/images/trimology-weight-review-N.<ext>` |
| Trust badge 1..2 | `public/images/trimology-weight-trust-N.<ext>` |
| Featured journey 0..2 | `public/images/trimology-weight-journey-N.<ext>` |
| Open Graph (social share) | `public/images/trimology-weight-og.jpg` |

## How to replace

1. Find a placeholder file you want to swap. Placeholders end in
   `-placeholder.png` — those are slots the generator could not
   fetch from the source page.
2. Get a real image (your own product shot, an Unsplash photo,
   a Canva mockup — whatever fits).
3. Rename your file to match the placeholder filename EXACTLY
   (case-sensitive). E.g. `keyslim-drops-bonus-1.jpg` →
   your image must be named `keyslim-drops-bonus-1.jpg`.
   `.jpg` / `.png` / `.webp` extensions all work.
4. Upload to `public/images/` via your host's File Manager,
   overwriting the placeholder.
5. Refresh the site — new image is live.

## Recommended sources for free stock images

- **Bonus / ebook covers:** Canva.com (5-min mockup with your title)
- **Ingredient photos:** unsplash.com, pexels.com (search the
  ingredient name + 'closeup' or 'botanical')
- **Customer portraits:** thispersondoesnotexist.com (single click,
  AI-generated, royalty-free)
- **Trust badges:** generate via Canva or use simple PNG logos

## Image dimensions (for best quality)

- Hero: 600 × 600 px (1:1 square)
- Pricing cards: 400 × 400 px (1:1 square)
- Bonus covers: 400 × 520 px (3:4 portrait)
- Ingredients: 320 × 320 px (1:1 square)
- Reviews / journeys: 120 × 120 px (1:1 square)
- OG image: 1200 × 630 px (Facebook / Twitter standard)

Bigger is fine — the templates use CSS aspect-ratio so any size
fits without layout shift.