SnapOtter/apps/landing/src/components/Hero.astro

---
import CategoryCards from "./CategoryCards.astro";
import HeroSearch from "./HeroSearch.astro";
import TrustSignals from "./TrustSignals.astro";

const trustBadges = [
  "On-premise",
  "Privacy-first",
  "GDPR & HIPAA ready",
  "Air-gap ready",
  "SAML SSO",
  "Audit logging",
  "Open source",
];
---

<section class="relative overflow-hidden px-6 pt-28 pb-12 md:pt-32 md:pb-16">
  <!-- Gradient mesh background -->
  <div class="hero-mesh" aria-hidden="true"></div>
  <div class="hero-mesh-extra" aria-hidden="true"></div>

  <div class="relative mx-auto max-w-4xl text-center">
    <!-- Enterprise trust badges -->
    <div class="animate-fade-up flex flex-wrap items-center justify-center gap-2">
      {trustBadges.map((badge) => (
        <span class="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-medium text-primary-dark">
          <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          {badge}
        </span>
      ))}
    </div>

    <!-- Headline: one sentence, rotating modality + fixed privacy promise -->
    <h1 class="animate-fade-up mt-8 font-display text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl" style="animation-delay: 0.1s;">
      Every <span class="word-rotator" aria-hidden="true"><span class="word-rotator-track"><span>file</span><span>image</span><span>video</span><span>audio</span><span>PDF</span><span>data</span><span>file</span></span></span><span class="sr-only">file</span> tool you need.
      <span class="mt-3 block bg-gradient-to-r from-primary to-primary-light bg-clip-text text-2xl font-bold text-transparent sm:text-3xl md:text-4xl">Nothing leaves your network.</span>
    </h1>

    <!-- Subtitle: one calm supporting line -->
    <p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-muted md:text-xl" style="animation-delay: 0.15s;">
      The file-processing suite for teams that keep sensitive data in-house.
    </p>

    <!-- Hero tool search -->
    <HeroSearch />

    <!-- Category cards -->
    <CategoryCards />

    <!-- Stats strip -->
    <TrustSignals />
  </div>
</section>

<style>
  /* Pure-CSS rotating word (no client JS). Cycles the file type in the headline. */
  .word-rotator {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
    color: var(--color-primary);
  }
  .word-rotator-track {
    display: flex;
    flex-direction: column;
    animation: word-rotate 13.2s infinite;
  }
  .word-rotator-track > span {
    display: block;
    height: 1em;
    line-height: 1;
    white-space: nowrap;
  }
  @keyframes word-rotate {
    0%, 12% { transform: translateY(0); }
    16.66%, 28.66% { transform: translateY(-1em); }
    33.33%, 45.33% { transform: translateY(-2em); }
    50%, 62% { transform: translateY(-3em); }
    66.66%, 78.66% { transform: translateY(-4em); }
    83.33%, 95.33% { transform: translateY(-5em); }
    100% { transform: translateY(-6em); }
  }
  @media (prefers-reduced-motion: reduce) {
    .word-rotator-track {
      animation: none;
    }
  }
</style>