chore(sections): delete retired DualValueProps + ProductShowcase
Some checks failed
ci / build-test (push) Failing after 3m44s
Some checks failed
ci / build-test (push) Failing after 3m44s
These two sections were collapsed into ThreeAmWalkthrough.astro (Task 3). No remaining consumers — removed from the tree. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -1,62 +0,0 @@
|
|||||||
---
|
|
||||||
interface Tile {
|
|
||||||
outcome: string;
|
|
||||||
capability: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// tile.capability is a compile-time constant defined below — never feed
|
|
||||||
// user-supplied or CMS content into set:html further down (XSS risk).
|
|
||||||
const tiles: Tile[] = [
|
|
||||||
{
|
|
||||||
outcome: 'Ship integrations, then sleep.',
|
|
||||||
capability:
|
|
||||||
'Every route, every processor, every exchange — traced automatically. When something breaks at 3 AM, the answer is already waiting for you. So you do not have to be.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
outcome: 'Debug in daylight.',
|
|
||||||
capability:
|
|
||||||
'Replay the exact exchange that failed. Follow a single request across services. See payloads before and after each processor. The pieces your ops team needs at 3 AM, captured already — so 3 AM stays quiet.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
outcome: 'Keep what you built. Keep what you chose.',
|
|
||||||
capability:
|
|
||||||
'You picked Apache Camel on purpose — open, portable, yours. Cameleer runs and understands your Camel apps as they are. No code changes, no SDK, no rewrite, no lock-in.',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
---
|
|
||||||
<section class="border-b border-border">
|
|
||||||
<div class="max-w-content mx-auto px-6 py-20 md:py-24">
|
|
||||||
<div class="grid md:grid-cols-3 gap-6 md:gap-8">
|
|
||||||
{tiles.map((tile, i) => (
|
|
||||||
<div
|
|
||||||
class="tile rounded-lg border border-border bg-bg-elevated p-7 md:p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]"
|
|
||||||
style={`--tile-delay:${i * 110}ms`}
|
|
||||||
>
|
|
||||||
<h2 class="text-xl md:text-2xl font-bold text-text mb-3 leading-snug">
|
|
||||||
{tile.outcome}
|
|
||||||
</h2>
|
|
||||||
<p class="text-text-muted leading-relaxed" set:html={tile.capability.replace(/`([^`]+)`/g, '<code class="font-mono text-accent bg-bg border border-border rounded px-1 py-0.5 text-sm">$1</code>')}></p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@keyframes tile-rise {
|
|
||||||
from { opacity: 0; transform: translateY(18px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
.tile {
|
|
||||||
opacity: 0;
|
|
||||||
animation: tile-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
||||||
animation-delay: var(--tile-delay, 0ms);
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.tile {
|
|
||||||
opacity: 1;
|
|
||||||
animation: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
---
|
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user