src/components/sections/DualValueProps.astro

@@ -0,0 +1,38 @@
+---
+interface Tile {
+  outcome: string;
+  capability: string;
+}
+
+const tiles: Tile[] = [
+  {
+    outcome: 'Cut debugging time in half.',
+    capability:
+      'Every processor on every route, timed to the nanosecond. Choice branches, splits, multicasts, and error handlers preserved as a proper execution tree — not a pile of log lines.',
+  },
+  {
+    outcome: 'Ship integrations with confidence.',
+    capability:
+      'Capture real payloads and replay them on demand. Deep-trace a specific correlation ID across services. Push trace settings to a running agent without a redeploy.',
+  },
+  {
+    outcome: 'Keep what you have built.',
+    capability:
+      'One `-javaagent` flag. No code changes, no SDK, no framework lock-in. Native understanding of 45+ EIP node types across Apache Camel 4.x.',
+  },
+];
+---
+<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) => (
+        <div class="rounded-lg border border-border bg-bg-elevated p-7 md:p-8 hover:border-border-strong transition-colors">
+          <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>