cameleer-website/src/components/sections/Hero.astro

---
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">
      <div class="flex items-center gap-3 mb-6">
        <img
          src="/cameleer-logo.svg"
          width="48"
          height="48"
          alt=""
          decoding="async"
          class="shrink-0"
        />
        <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase">
          Your camels called. They want a GPS.
        </p>
      </div>
      <h1
        class="text-display font-bold text-text mb-6 hero-rotator"
        aria-live="off"
        data-hero-rotator
      >
        <span class="hero-line" data-active aria-hidden="false">Run Apache Camel without running Apache Camel.</span>
        <span class="hero-line" aria-hidden="true">Camel integrations, minus the baggage.</span>
        <span class="hero-line" aria-hidden="true">Your camels, our caravan. You just ride.</span>
      </h1>
      <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
        The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night.
      </p>
      <CTAButtons size="lg" />
    </div>
    <div class="mt-16 md:mt-20">
      <RouteDiagram />
    </div>
  </div>
</section>

<style>
  .hero-rotator {
    position: relative;
    display: block;
    /* Reserve height for the tallest line so no layout shift on swap.
       Two lines at current H1 size handles all three on most viewports. */
    min-height: 2.2em;
  }
  .hero-line {
    display: block;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    /* Stack all lines on top of each other — only [data-active] is visible. */
    position: absolute;
    inset: 0;
  }
  .hero-line[data-active] {
    opacity: 1;
    position: relative;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-line {
      transition: none;
    }
  }
</style>

<script>
  // Hero rotating headline. Bundled by Astro (CSP: script-src 'self').
  const rotator = document.querySelector<HTMLElement>('[data-hero-rotator]');
  if (rotator) {
    const lines = Array.from(rotator.querySelectorAll<HTMLElement>('.hero-line'));
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!reduced && lines.length > 1) {
      let index = 0;
      let paused = false;
      const pause = () => { paused = true; };
      const resume = () => { paused = false; };
      rotator.addEventListener('mouseenter', pause);
      rotator.addEventListener('mouseleave', resume);
      rotator.addEventListener('focusin', pause);
      rotator.addEventListener('focusout', resume);
      setInterval(() => {
        if (paused) return;
        lines[index].removeAttribute('data-active');
        lines[index].setAttribute('aria-hidden', 'true');
        index = (index + 1) % lines.length;
        lines[index].setAttribute('data-active', '');
        lines[index].setAttribute('aria-hidden', 'false');
      }, 10000);
    }
  }
</script>