2026-04-24 17:18:08 +02:00
|
|
|
---
|
|
|
|
|
interface Step {
|
|
|
|
|
n: string;
|
|
|
|
|
title: string;
|
|
|
|
|
body: string;
|
|
|
|
|
code?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const steps: Step[] = [
|
|
|
|
|
{
|
|
|
|
|
n: '01',
|
2026-04-24 23:49:42 +02:00
|
|
|
title: 'Point us at your Camel app',
|
|
|
|
|
body: 'Drop it in, or connect one you already run. No code changes. No SDK. Nothing to rewrite.',
|
2026-04-24 17:18:08 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
n: '02',
|
2026-04-24 23:49:42 +02:00
|
|
|
title: 'We take it from there',
|
|
|
|
|
body: 'Every route, every processor, every exchange — discovered and traced automatically. Sensitive fields are masked by default.',
|
2026-04-24 17:18:08 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
n: '03',
|
2026-04-24 23:49:42 +02:00
|
|
|
title: 'Watch it run',
|
|
|
|
|
body: 'Browse executions, tap live traffic, replay failed exchanges, follow flows across services. Nothing to instrument. Nothing to maintain.',
|
2026-04-24 17:18:08 +02:00
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
---
|
|
|
|
|
<section class="border-b border-border">
|
|
|
|
|
<div class="max-w-content mx-auto px-6 py-20 md:py-24">
|
|
|
|
|
<div class="max-w-2xl mb-16">
|
|
|
|
|
<p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">For engineers</p>
|
|
|
|
|
<h2 class="text-hero font-bold text-text mb-4">How it works</h2>
|
2026-04-24 23:49:42 +02:00
|
|
|
<p class="text-text-muted text-lg">Three steps. No code changes. Nothing to maintain.</p>
|
2026-04-24 17:18:08 +02:00
|
|
|
</div>
|
|
|
|
|
<ol class="grid md:grid-cols-3 gap-6 md:gap-8">
|
|
|
|
|
{steps.map((step) => (
|
feat(design): card motion + Pricing MID tier hierarchy
- DualValueProps: 110ms staggered rise-in on load (cubic-bezier ease),
reduced-motion users see cards pre-populated, no animation.
- All card sections (DualValueProps, HowItWorks, WhyUs, Pricing) gain a
subtle hover lift: -translate-y-0.5, amber/40 border, soft amber drop
shadow. 200ms ease-out — tactile but not noisy.
- Pricing MID tier now looks like the highlighted option: ring-2 accent,
amber-tinted drop shadow, lg:-translate-y-2 (sits above the others),
and a 'MOST POPULAR' ribbon pill. The 1px border swap was invisible.
2026-04-25 00:23:54 +02:00
|
|
|
<li class="relative rounded-lg border border-border bg-bg-elevated p-7 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)]">
|
2026-04-24 17:18:08 +02:00
|
|
|
<div class="font-mono text-accent text-sm tracking-wider mb-3">{step.n}</div>
|
|
|
|
|
<h3 class="text-lg font-bold text-text mb-3">{step.title}</h3>
|
|
|
|
|
<p class="text-text-muted leading-relaxed mb-4">{step.body}</p>
|
|
|
|
|
{step.code && (
|
|
|
|
|
<pre class="font-mono text-xs md:text-sm bg-bg border border-border rounded px-4 py-3 text-text-muted overflow-x-auto leading-relaxed"><code>{step.code}</code></pre>
|
|
|
|
|
)}
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
