b7b58dd948
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.
92 lines
3.5 KiB
Plaintext
92 lines
3.5 KiB
Plaintext
---
|
|
import TopographicBg from '../TopographicBg.astro';
|
|
import Lightbox from '../Lightbox.astro';
|
|
|
|
interface Callout {
|
|
title: string;
|
|
body: string;
|
|
}
|
|
|
|
const callouts: Callout[] = [
|
|
{
|
|
title: 'Cross-service correlation.',
|
|
body: 'Every exchange carries its correlation ID forward. One click jumps to what the downstream route did with the same message — 610 ms later.',
|
|
},
|
|
{
|
|
title: 'Runtime detail, not guesswork.',
|
|
body: 'Circuit breaker tripped. Fallback path ran. The request tried to reach backend:80. The kind of pieces a 3 AM page actually needs — already captured.',
|
|
},
|
|
{
|
|
title: 'The whole story of a failure.',
|
|
body: 'Exception class, message, stack trace, headers, payload — all pinned to the exchange. No log-grepping tour. No SSH into the pod.',
|
|
},
|
|
];
|
|
---
|
|
<section class="relative overflow-hidden border-b border-border bg-bg">
|
|
<TopographicBg opacity={0.14} lines={7} />
|
|
<div class="relative max-w-content mx-auto px-6 py-24 md:py-32">
|
|
<div class="max-w-3xl mb-14 md:mb-20">
|
|
<p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">When it breaks</p>
|
|
<h2 class="text-hero font-bold text-text mb-5">
|
|
When something breaks, the answer is already waiting.
|
|
</h2>
|
|
<p class="text-lg text-text-muted leading-relaxed">
|
|
Follow a single exchange from ingestion to failure. See the route it took, the fallback that ran, the stack trace, the correlated downstream work — in one place. Without writing a line of tracing code.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
|
|
<figure class="lg:col-span-8 relative">
|
|
<div class="showcase-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
|
|
<Lightbox
|
|
src="/product/error-detail.png"
|
|
alt="Cameleer Mission Control — complex fulfillment route with circuit breaker, fallback, correlated audit route, and full error context"
|
|
width={1920}
|
|
height={945}
|
|
loading="lazy"
|
|
/>
|
|
<div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
|
|
</div>
|
|
<div aria-hidden="true" class="showcase-shot-glow"></div>
|
|
<figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
|
|
</figure>
|
|
|
|
<ul class="lg:col-span-4 space-y-7 lg:pt-4">
|
|
{callouts.map((c, i) => (
|
|
<li class="relative pl-10">
|
|
<span
|
|
class="absolute left-0 top-0 inline-flex items-center justify-center w-7 h-7 rounded-full border border-accent/40 bg-accent/10 text-accent font-mono text-xs"
|
|
aria-hidden="true"
|
|
>
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<h3 class="text-text font-semibold mb-1.5">{c.title}</h3>
|
|
<p class="text-text-muted leading-relaxed">{c.body}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.showcase-shot {
|
|
box-shadow:
|
|
0 1px 0 rgba(240, 180, 41, 0.08) inset,
|
|
0 40px 80px -30px rgba(0, 0, 0, 0.7),
|
|
0 15px 35px -15px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.showcase-shot-glow {
|
|
position: absolute;
|
|
inset: -5% -8% -5% -8%;
|
|
background: radial-gradient(
|
|
55% 55% at 45% 50%,
|
|
rgba(92, 200, 255, 0.10),
|
|
rgba(240, 180, 41, 0.08) 40%,
|
|
transparent 75%
|
|
);
|
|
filter: blur(50px);
|
|
z-index: -1;
|
|
}
|
|
</style>
|