Add HowItWorks section — 3-step engineer-facing walkthrough
This commit is contained in:
48
src/components/sections/HowItWorks.astro
Normal file
48
src/components/sections/HowItWorks.astro
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
interface Step {
|
||||
n: string;
|
||||
title: string;
|
||||
body: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
const steps: Step[] = [
|
||||
{
|
||||
n: '01',
|
||||
title: 'Add the agent',
|
||||
body: 'Drop the Cameleer agent JAR alongside your Camel app and start it with a single flag. That is the entire installation.',
|
||||
code: 'java \\\n -javaagent:cameleer-agent.jar \\\n -jar your-camel-app.jar',
|
||||
},
|
||||
{
|
||||
n: '02',
|
||||
title: 'Launch your app',
|
||||
body: 'Every route, processor, exchange, and route graph is discovered and reported automatically. Configurable redaction keeps sensitive fields out of the trace.',
|
||||
},
|
||||
{
|
||||
n: '03',
|
||||
title: 'See it in Mission Control',
|
||||
body: 'Browse executions, tap live traffic, replay failed exchanges, and follow flows across services. Nothing to instrument, nothing to maintain.',
|
||||
},
|
||||
];
|
||||
---
|
||||
<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>
|
||||
<p class="text-text-muted text-lg">Three steps. No code changes. Works across Camel 4.x.</p>
|
||||
</div>
|
||||
<ol class="grid md:grid-cols-3 gap-6 md:gap-8">
|
||||
{steps.map((step) => (
|
||||
<li class="relative rounded-lg border border-border bg-bg-elevated p-7">
|
||||
<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>
|
||||
Reference in New Issue
Block a user