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

---
import CTAButtons from '../CTAButtons.astro';
import TopographicBg from '../TopographicBg.astro';
---
<section class="relative overflow-hidden border-b border-border">
  <TopographicBg opacity={0.22} lines={11} />
  <div class="relative max-w-content mx-auto px-6 pt-16 pb-20 md:pt-24 md:pb-24 lg:pt-28">
    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
      <div class="lg:col-span-5">
        <img
          src="/cameleer-logo.svg"
          width="64"
          height="64"
          alt=""
          decoding="async"
          class="shrink-0 mb-5 hero-mark"
        />
        <p
          class="inline-flex items-center gap-2 mb-7 rounded-full border border-accent/30 bg-accent/[0.08] text-accent px-3.5 py-1 text-sm italic font-medium"
        >
          <span aria-hidden="true" class="text-base">✦</span>
          Your camels called. They want a GPS.
        </p>
        <h1
          class="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="lg:col-span-7 relative">
        <div class="hero-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
          <img
            src="/product/exchange-detail.png"
            alt="Cameleer Mission Control — route execution detail with processor-level trace"
            width="1920"
            height="945"
            loading="eager"
            decoding="async"
            class="block w-full h-auto"
          />
          <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
        </div>
        <div aria-hidden="true" class="hero-shot-glow"></div>
      </div>
    </div>
  </div>
</section>

<style>
  /* Rotating H1 — fluid size + fade transition */
  .hero-rotator {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    position: relative;
    display: block;
    /* Reserve enough vertical space that a 2-line wrap of the longest line
       does not push the page on swap (mobile wraps line 1 to 2 lines). */
    min-height: 2.5em;
  }
  .hero-line {
    display: block;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    position: absolute;
    inset: 0;
  }
  .hero-line[data-active] {
    opacity: 1;
    position: relative;
  }

  /* Product screenshot frame — subtle dropshadow + amber glow behind */
  .hero-shot {
    box-shadow:
      0 1px 0 rgba(240, 180, 41, 0.08) inset,
      0 30px 60px -20px rgba(0, 0, 0, 0.6),
      0 10px 25px -10px rgba(0, 0, 0, 0.5);
  }
  .hero-shot-glow {
    position: absolute;
    inset: 10% -5% 10% -5%;
    background: radial-gradient(
      60% 60% at 50% 50%,
      rgba(240, 180, 41, 0.18),
      transparent 70%
    );
    filter: blur(40px);
    z-index: -1;
  }

  /* Slow sway on the mark — tasteful, not distracting */
  @keyframes hero-mark-sway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-1.5deg); }
  }
  .hero-mark {
    animation: hero-mark-sway 7s ease-in-out infinite;
    transform-origin: 50% 90%;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-line { transition: none; }
    .hero-mark { animation: 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>