From 5af7e0079f4d23ad588fee66e69b2b4af6034f83 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:18:08 +0200
Subject: [PATCH] =?UTF-8?q?Add=20HowItWorks=20section=20=E2=80=94=203-step?=
 =?UTF-8?q?=20engineer-facing=20walkthrough?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/HowItWorks.astro | 48 ++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/sections/HowItWorks.astro

diff --git a/src/components/sections/HowItWorks.astro b/src/components/sections/HowItWorks.astro
new file mode 100644
index 0000000..b5470df
--- /dev/null
+++ b/src/components/sections/HowItWorks.astro
@@ -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>