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

---
// biome-ignore-all lint/correctness/noUnusedImports: Astro template consumes component imports.
// biome-ignore-all lint/correctness/noUnusedVariables: Astro template consumes frontmatter values.
import CategoryCards from "./CategoryCards.astro";
import HeroSearch from "./HeroSearch.astro";
import TrustSignals from "./TrustSignals.astro";

const trustBadges = ["Self-hosted", "Open source", "Air-gap capable", "Compliance-friendly"];
---

<section class="relative overflow-hidden px-6 pt-28 pb-12 md:pt-32 md:pb-16">
  <!-- Gradient mesh background (CSS fallback beneath the shadergradient loop) -->
  <div class="hero-mesh" aria-hidden="true"></div>
  <div class="hero-mesh-extra" aria-hidden="true"></div>

  <!-- ShaderGradient warm-wash loop: captured, self-hosted, no framework. -->
  <!-- Poster (still) doubles as the reduced-motion and load-failure fallback. -->
  <div class="hero-gradient" aria-hidden="true">
    <!-- biome-ignore lint/a11y/useMediaCaption: decorative silent background loop with no audio track. -->
    <video autoplay muted loop playsinline preload="metadata" tabindex="-1">
      <source src="/hero-gradient.webm?v=5" type="video/webm" />
      <source src="/hero-gradient.mp4?v=5" type="video/mp4" />
    </video>
  </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-white/25 bg-black/25 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">
          <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 precise promise for privacy-sensitive buyers -->
    <h1 class="animate-fade-up mt-8 font-display text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl" style="animation-delay: 0.1s; text-shadow: 0 2px 30px rgba(90, 20, 0, 0.28);">
      File processing for privacy-sensitive teams.
    </h1>

    <!-- Subtitle: one calm supporting line -->
    <p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-white/90 md:text-xl" style="animation-delay: 0.15s; text-shadow: 0 1px 16px rgba(90, 20, 0, 0.22);">
      Run image, video, audio, PDF, and file tools with local AI, batch workflows, and enterprise controls.
    </p>

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

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

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