# Theme-integrated images and carousel dots

## Included source

- Six category image pairs: `public/home/categories/{earthmoving,power,material-handling,compact-equipment,access,attachments}.webp` and the corresponding `-dark.webp` files.
- Four representative listing image pairs: `public/home/listings/{eq-001,eq-003,eq-005,eq-006}.webp` and corresponding `-dark.webp` files.
- `components/kligo/themed-image.tsx`: one active image source selected by the shared theme. CSS prevents the incorrect light image appearing on a dark first paint.
- `components/home/equipment-category-grid.tsx`, `home-discovery-data.ts` and `components/marketplace/catalog-image.tsx`: consuming components. CatalogImage accepts optional `darkSrc`.
- `components/marketplace/listing-gallery.tsx` and `.kligo-carousel-dots` in `app/globals.css`: shared pagination without a rectangle, strip or pill background. Dot buttons retain transparent touch targets, names, selected state, focus, keyboard behavior and RTL direction.

Both the complete project ZIP and component reference ZIP include `public/home/`, this guide and these source components. Live examples are under Developer Kit → Cards and the marketplace homepage. Switch the website appearance to inspect both versions.

## Image surfaces

Light previews sit on white. Dark previews sit on #171717. Both illustrative preview variants use `filter: contrast(1.04)`: it brings off-white encoding variations to pure white in light mode. Dark images additionally use `mix-blend-mode: lighten`, inside an isolated card/photo surface. This resolves the entire charcoal backdrop to the exact card color, including the subtle WebP variations that previously left visible rectangles. The former edge fade is removed: fading only the outer margin did not correct the rest of the backdrop. This modest contrast adjustment also clips near-black shadow pixels to the card floor in dark mode. It is intentionally limited to these illustrative previews; real scene photos in subsequent carousel slides are unchanged. All underlying asset files are preserved.

Dark images are 640px WebP exports, loaded lazily below the opening screen. They are opaque image files, not transparent cutouts: reuse the shared rendering CSS as well as the assets. Do not put them on unrelated colors or use CSS opacity on the whole machine. For a future native app reproduce both the contrast and lighten compositing against #171717, or supply true alpha cutouts; simply matching the nominal background color is insufficient.

## Asset provenance and production boundaries

These are illustrative demo assets, not exact photographs of an available machine. The source photos and attribution remain in `public/home/credits.json`; license and author requirements continue to apply to derivative listing images. Product details can differ after AI editing. Use genuine seller photographs for real inventory.

Dark variants were edited using the built-in image generation tool. Prompt brief: preserve the input machine, geometry, camera angle, paint and equipment details; replace the white studio backdrop and floor with flat charcoal #171717, retain subtle realistic contact shadows and legibility of dark parts, leave empty margins, and add no text, frames or graphics. Original white files remain the light variants.

## Acceptance

Check both appearances, theme persistence on refresh, all six category cards and all four home previews. Click carousel dots and arrows, swipe, and use keyboard arrows. Confirm no pagination frame returns in desktop, mobile, Hebrew or Arabic layouts. Check that actual scene photos remain intact when advancing the carousel.