src/components/sections/Hero.astro

@@ -0,0 +1,27 @@
+---
+import CTAButtons from '../CTAButtons.astro';
+import RouteDiagram from '../RouteDiagram.astro';
+import TopographicBg from '../TopographicBg.astro';
+---
+<section class="relative overflow-hidden border-b border-border">
+  <TopographicBg opacity={0.14} lines={10} />
+  <div class="relative max-w-content mx-auto px-6 pt-20 pb-24 md:pt-28 md:pb-32">
+    <div class="max-w-3xl">
+      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-6">
+        Observability · Apache Camel
+      </p>
+      <h1 class="text-display font-bold text-text mb-6">
+        See every route.<br />
+        Reach into every flow.
+      </h1>
+      <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
+        Zero-code tracing, processor-level detail, and live control for Apache Camel —
+        from a single <code class="font-mono text-accent bg-bg-elevated border border-border rounded px-1.5 py-0.5 text-base">-javaagent</code> flag.
+      </p>
+      <CTAButtons size="lg" />
+    </div>
+    <div class="mt-16 md:mt-20">
+      <RouteDiagram />
+    </div>
+  </div>
+</section>