feat(design): click-to-enlarge on product screenshots
Some checks failed
ci / build-test (push) Failing after 3m41s

Lightbox.astro — reusable native HTMLDialogElement wrapper:
- Trigger: <button> wrapping the <img>, cursor: zoom-in, amber zoom-pill
  badge fades in on hover/focus.
- Dialog: showModal() opens a full-viewport modal (≤1800x1200 cap) with
  blurred amber-tinted backdrop.
- Close paths: native form[method=dialog] submit (Escape + close button),
  click on backdrop, click on the image itself.
- Accessibility: aria-labelledby + visually-hidden heading avoids both
  aria-label-misuse and no-redundant-role validator conflicts. Focus
  returns to trigger on close (native HTMLDialogElement behavior).
- Motion: 220ms fade+scale open, disabled under prefers-reduced-motion.
- CSP: <script> is Astro-bundled to an external file — script-src 'self'
  respected.

Hero and ProductShowcase now use <Lightbox> instead of a raw <img> for
the product screenshots. The existing frame styling (border, glow, ring
overlay) is untouched — the lightbox trigger is a block-level button
that fills the frame.
This commit is contained in:
hsiegeln
2026-04-25 00:31:48 +02:00
parent 4d4c072834
commit b7b58dd948
3 changed files with 241 additions and 10 deletions

View File

@@ -1,6 +1,7 @@
---
import CTAButtons from '../CTAButtons.astro';
import TopographicBg from '../TopographicBg.astro';
import Lightbox from '../Lightbox.astro';
---
<section class="relative overflow-hidden border-b border-border">
<TopographicBg opacity={0.22} lines={11} />
@@ -37,14 +38,12 @@ import TopographicBg from '../TopographicBg.astro';
</div>
<div class="lg:col-span-7 relative">
<div class="hero-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
<img
<Lightbox
src="/product/exchange-detail.png"
alt="Cameleer Mission Control — route execution detail with processor-level trace"
width="1920"
height="945"
width={1920}
height={945}
loading="eager"
decoding="async"
class="block w-full h-auto"
/>
<div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
</div>