AI Solutions Hero Section with Animated Metrics Cards

<section class="isolate overflow-hidden min-h-[1000px] md:h-screen relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d953ad7f-2dd7-42f7-8f74-593d55181036_3840w.jpg" alt="Abstract 3D render background" class="pointer-events-none sm:max-h-full w-full h-full max-h-[600px] object-cover absolute top-0 right-0 bottom-0 left-0" style="mask-image: linear-gradient(to bottom, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);">
  <div
    class="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_20%,rgba(255,255,255,0.06),transparent),linear-gradient(to_top,rgba(0,0,0,0.85),rgba(0,0,0,0.35))]">
  </div>

  <div
    class="z-10 flex flex-col md:px-8 h-full max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6 relative gap-x-10 gap-y-10 justify-center">
    <div class="max-w-3xl">
      <h2
        class="sm:text-5xl lg:text-6xl animate-on-scroll text-4xl font-medium text-white tracking-tight font-manrope drop-shadow-xl"
        style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
        Intelligent systems. Proven results.
      </h2>
      <p class="sm:text-lg leading-relaxed animate-on-scroll text-base text-white/85 max-w-2xl mt-5"
        style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
        Deploy AI solutions with complete confidence through advanced monitoring, human oversight, and transparent
        performance metrics—built for enterprise scale.
      </p>

      <style>
        /* Default: paused */
        .animate-on-scroll {
          animation-play-state: paused !important;
        }

        /* Activated by JS */
        .animate-on-scroll.animate {
          animation-play-state: running !important;
        }
      </style>
      <script>
        // One shared observer; safe to call initInViewAnimations() multiple times
  (function () {
    const once = true;

    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }

    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => {
        window.__inViewIO.observe(el); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
      </script>
    </div>

    <div class="grid gap-6 lg:grid-cols-3 gap-x-6 gap-y-6 animate-on-scroll"
      style="animation: fadeSlideIn 1.0s ease-out 0.6s both;">
      <!-- Analytics Card -->
      <div class="rounded-3xl border border-white/10 bg-black/60 p-6 backdrop-blur-xl">
        <div class="flex items-center justify-between">
          <span class="text-xs uppercase tracking-[0.18em] text-white/60">Performance metrics</span>
          <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2 py-1 text-[10px] text-white/70 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-3 w-3"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg> Active
        </span>
        </div>

        <p class="mt-4 text-lg leading-relaxed text-white/90">
          Enterprise AI adoption increased by <span class="text-emerald-400">84%</span> this year
        </p>

        <div class="mt-6">
          <div class="relative h-24 w-full rounded-lg bg-gradient-to-b from-white/[0.03] to-transparent">
            <div class="absolute inset-x-0 bottom-6 h-[2px] bg-white/10"></div>
            <div
              class="absolute left-1/2 bottom-6 h-2 w-2 -translate-x-1/2 rounded-full bg-sky-400 shadow-[0_0_0_4px_rgba(56,189,248,0.15)]">
            </div>
            <div class="absolute inset-x-0 top-4 flex justify-between px-2 text-[10px] text-white/50">
              <span class="">2025</span><span>2024</span><span class="">2023</span><span class="">2022</span><span class="">2021</span>
            </div>
          </div>
          <div class="mt-5">
            <div class="text-4xl font-medium tracking-tight text-white">$45B</div>
            <div class="text-sm text-white/60">Market Value</div>
          </div>
        </div>
      </div>

      <!-- Face Detection Card -->
      <div class="rounded-3xl border border-white/10 bg-black/60 p-2 backdrop-blur-xl">
        <div class="relative overflow-hidden rounded-2xl bg-white/5">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/993d5154-c104-4507-8c0a-55364d2a948c_800w.jpg" alt="Identity verification" class="h-56 w-full object-cover sm:h-64" style="">
          <div class="absolute inset-0 bg-[radial-gradient(60%_30%_at_50%_55%,rgba(163,230,53,0.25),transparent)]">
          </div>

          <!-- Scan overlay -->
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="h-1 w-3/4 rounded bg-lime-400 shadow-[0_0_30px_rgba(132,204,22,0.45)]"></div>
          </div>

          <!-- Grid lines -->
          <div class="pointer-events-none absolute inset-0 grid grid-cols-6 grid-rows-6">
            <div
              class="col-span-6 row-span-6 [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px)] [background-size:16.666%_100%,100%_16.666%]">
            </div>
          </div>

          <div
            class="absolute left-4 top-4 rounded-md bg-black/60 px-2 py-1 text-xs text-white/85 ring-1 ring-white/10">
            Match confirmed
          </div>

          <div class="p-4">
            <div class="mt-2 text-base font-medium text-white/90">Smart Recognition</div>
            <div class="text-sm text-white/60">Advanced Processing</div>
          </div>
        </div>
      </div>

      <!-- Success Metrics Card -->
      <div class="rounded-3xl border border-white/10 bg-black/60 p-6 backdrop-blur-xl">
        <p class="text-lg leading-relaxed text-white/90">
          Achieving <span class="text-lime-400">92%</span> accuracy rate, our platform delivers consistent
          enterprise-grade performance.
        </p>

        <div class="mt-6">
          <div class="text-sm text-white/70">Performance Overview</div>

          <div class="mt-4 space-y-4">
            <!-- Succeed -->
            <div class="">
              <div class="flex items-baseline justify-between">
                <span class="text-sm text-white/80">Completed</span>
                <span class="text-base text-white/90">78%</span>
              </div>
              <div class="mt-2 h-3 w-full rounded-full bg-white/10">
                <div class="h-3 w-[78%] rounded-full bg-gradient-to-r from-emerald-400 to-emerald-500"></div>
              </div>
            </div>

            <!-- In Progress -->
            <div class="">
              <div class="flex items-baseline justify-between">
                <span class="text-sm text-white/80">Processing</span>
                <span class="text-base text-white/90">14%</span>
              </div>
              <div class="mt-2 h-3 w-full rounded-full bg-white/10">
                <div class="h-3 w-[14%] rounded-full bg-gradient-to-r from-sky-400 to-blue-500"></div>
              </div>
            </div>

            <!-- Failed -->
            <div class="">
              <div class="flex items-baseline justify-between">
                <span class="text-sm text-white/80">Pending</span>
                <span class="text-base text-white/90">8%</span>
              </div>
              <div class="mt-2 h-3 w-full rounded-full bg-white/10">
                <div class="relative h-3 w-[8%] overflow-hidden rounded-full bg-white/10">
                  <div
                    class="absolute inset-0 bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.2)_0_6px,rgba(255,255,255,0.05)_6px_12px)]">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-6 flex items-center gap-3 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4 text-white/70">
            <path
              d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
              class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          Quality-assured workflows
        </div>
      </div>
    </div>

    <!-- Logo row -->
    <div class="flex flex-wrap text-white/50 mt-4 gap-x-8 gap-y-4 items-center animate-on-scroll"
      style="animation: fadeSlideIn 1.0s ease-out 0.8s both;">
      <span class="inline-flex items-center gap-2 text-sm">
      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="network" class="lucide lucide-network h-3.5 w-3.5"><rect x="16" y="16" width="6" height="6" rx="1" class=""></rect><rect x="2" y="16" width="6" height="6" rx="1" class=""></rect><rect x="9" y="2" width="6" height="6" rx="1" class=""></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" class=""></path><path d="M12 12V8" class=""></path></svg>
      </span>
      TechFlow
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="flame" class="lucide lucide-flame h-3.5 w-3.5"><path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" class=""></path></svg>
      </span>
      InnovateLab
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="diamond" class="lucide lucide-diamond h-3.5 w-3.5"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" class=""></path></svg>
      </span>
      DataCraft
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" class="lucide lucide-cpu h-3.5 w-3.5"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
      </span>
      CloudMind
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 h-3.5 w-3.5"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
      </span>
      DevCore
      </span>
    </div>
  </div>

  <div class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black to-transparent"></div>
</section>