From 073ff2ad48a11c1a8385834b9d294fca8491e425 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 00:22:28 +0200
Subject: [PATCH] =?UTF-8?q?feat(design):=20new=20ProductShowcase=20section?=
 =?UTF-8?q?=20=E2=80=94=20'When=20something=20breaks'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Editorial section between DualValueProps and HowItWorks. Breaks the
identical-rectangle cascade with an asymmetric 8/4 grid: large
error-detail screenshot with subtle cyan/amber backlight on the left,
three numbered callout captions on the right.

The screenshot (cross-route correlation chain + circuit breaker +
fallback + Java stack trace) makes the 'deep tracing, replay, live
control' claims concrete in a way the abstract RouteDiagram never did.

Cyan kicker on this section (vs. amber elsewhere) signals 'this one is
different' and echoes the cross-route correlation color in the product.
---
 src/components/sections/ProductShowcase.astro | 92 +++++++++++++++++++
 src/pages/index.astro                         |  2 +
 2 files changed, 94 insertions(+)
 create mode 100644 src/components/sections/ProductShowcase.astro

diff --git a/src/components/sections/ProductShowcase.astro b/src/components/sections/ProductShowcase.astro
new file mode 100644
index 0000000..b0b6b7c
--- /dev/null
+++ b/src/components/sections/ProductShowcase.astro
@@ -0,0 +1,92 @@
+---
+import TopographicBg from '../TopographicBg.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">
+          <img
+            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"
+            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>
+        <figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
+        <div aria-hidden="true" class="showcase-shot-glow"></div>
+      </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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d0c92d1..e74a383 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import SiteHeader from '../components/SiteHeader.astro';
 import SiteFooter from '../components/SiteFooter.astro';
 import Hero from '../components/sections/Hero.astro';
 import DualValueProps from '../components/sections/DualValueProps.astro';
+import ProductShowcase from '../components/sections/ProductShowcase.astro';
 import HowItWorks from '../components/sections/HowItWorks.astro';
 import WhyUs from '../components/sections/WhyUs.astro';
 import PricingTeaser from '../components/sections/PricingTeaser.astro';
@@ -17,6 +18,7 @@ import FinalCTA from '../components/sections/FinalCTA.astro';
   <main>
     <Hero />
     <DualValueProps />
+    <ProductShowcase />
     <HowItWorks />
     <WhyUs />
     <PricingTeaser />