Dark Feature Card with Mobile Illustration

<article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm max-w-xl">
        <div class="pt-6 pr-6 pb-6 pl-6">
          <!-- Illustration -->
          <div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Mobile Interface -->
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="w-24 h-40 bg-zinc-950/90 rounded-2xl border-2 border-white/20 overflow-hidden">
                <!-- Phone Header -->
                <div class="h-6 bg-zinc-900 flex items-center justify-center">
                  <div class="w-12 h-1 bg-white/30 rounded-full"></div>
                </div>
                
                <!-- Content Area -->
                <div class="p-2 space-y-2">
                  <div class="h-3 bg-blue-500/30 rounded"></div>
                  <div class="space-y-1">
                    <div class="h-2 bg-white/10 rounded w-3/4"></div>
                    <div class="h-2 bg-white/10 rounded w-1/2"></div>
                  </div>
                  <div class="flex gap-1">
                    <div class="flex-1 h-8 bg-emerald-500/20 rounded border border-emerald-500/40"></div>
                    <div class="flex-1 h-8 bg-white/10 rounded"></div>
                  </div>
                  <div class="space-y-1">
                    <div class="h-1 bg-white/10 rounded"></div>
                    <div class="h-1 bg-white/10 rounded w-2/3"></div>
                  </div>
                </div>

                <!-- Notification -->
                
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="text-xl font-normal text-white tracking-tight font-geist">Mobile Ready</h3>
            </div>
            <p class="text-zinc-300 text-sm leading-relaxed font-sans">Stay productive anywhere with our native mobile apps. Full feature parity with offline sync and push notifications.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                Download apps
                <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="h-4 w-4">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </article>