Glassmorphic Analytics Feature Card

<div class="relative overflow-hidden bg-neutral-900 border-white/10 border rounded-3xl pt-4 pr-4 pb-4 pl-4 max-w-xl">
  <div class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
    <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
    <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
    
    <div class="flex flex-col lg:flex-row gap-6 h-full pt-6 pr-6 pb-7 pl-6">
      <!-- Left content -->
      <div class="flex flex-col flex-1">
        <div class="flex gap-3 mb-3 items-center">
          
          <h3 class="text-lg font-semibold tracking-tight">Real-time Analytics</h3>
        </div>
        <p class="text-neutral-300 text-sm font-light mb-4 font-sans">Monitor model performance and usage patterns across your entire AI infrastructure</p>
        
        <div class="flex flex-wrap gap-2 mb-4">
          <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-500/10 border border-neutral-500/20 text-neutral-300 font-sans">
            METRICS
          </span>
          <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-600/10 border border-neutral-600/20 text-neutral-300 font-sans">
            ALERTS
          </span>
        </div>

        <div class="mt-auto inline-flex items-center text-sm font-medium text-neutral-300 font-sans">
          Learn more 
          <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" class="ml-2 h-4 w-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>

      <!-- Right visual -->
      <div class="flex-1 lg:max-w-md">
        <article class="relative overflow-hidden h-64 bg-gradient-to-br from-zinc-900 to-zinc-950 border-zinc-800 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
          <div class="absolute inset-0"></div>
          <div class="relative z-10 h-full flex flex-col">
            <div class="flex items-start justify-between">
              <div class="flex items-center gap-1">
                <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
                <span class="h-1 w-1 rounded-full bg-zinc-600"></span>
                <span class="h-1 w-1 rounded-full bg-zinc-600"></span>
              </div>
              <span class="text-[11px] text-zinc-500 font-normal font-geist">Dashboard</span>
            </div>
            <div class="flex-1 flex flex-col bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6f79f677-2e40-404d-a1b3-43d4cd1166de_800w.jpg)] bg-cover rounded-lg mt-2 mb-2 pt-6 pb-6 items-center justify-center">
              
            </div>
            <div class="mt-auto">
              <h3 class="text-[15px] sm:text-base font-medium leading-snug tracking-tight text-zinc-100 font-geist">Performance insights at a glance</h3>
              <p class="mt-1 text-sm text-zinc-400 font-geist">Monitor costs, latency, and quality metrics.</p>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>