Placeholder Component Template

<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-lg">
  <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">
      <!-- Team Avatars -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="relative">
          <!-- Center hub -->
          <div class="w-16 h-16 flex ring-1 ring-white/20 bg-gradient-to-r from-slate-900 to-slate-700 rounded-full items-center justify-center">
            <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="w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(255, 255, 255);">
              <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" class=""></path>
              <polyline points="3,7 12,13 21,7" class=""></polyline>
            </svg>
          </div>
          
          <!-- Orbiting avatars -->
          <img class="absolute -top-8 -left-4 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fe82ca0-ec91-4df3-b0fb-d97b643f2178_320w.jpg">
          <img class="absolute -top-6 -right-6 w-8 h-8 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ec17a2e2-e4f4-4164-b631-f074e640a0c1_320w.jpg">
          <img class="absolute -bottom-8 -right-2 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e08496f1-bdba-4cb4-83c1-96ac5be57ace_320w.jpg">
          <img class="absolute -bottom-6 -left-6 w-8 h-8 object-cover border-white/30 border-1 rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c1bfea42-f5c9-4b52-974e-36fe36212b17_320w.jpg">
          
          <!-- Connection lines -->
          <div class="absolute inset-0 pointer-events-none">
            <svg class="w-full h-full" viewBox="0 0 100 100">
              <line x1="50" y1="50" x2="25" y2="25" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2"></line>
              <line x1="50" y1="50" x2="75" y2="20" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2"></line>
              <line x1="50" y1="50" x2="80" y2="80" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2"></line>
              <line x1="50" y1="50" x2="20" y2="75" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2"></line>
            </svg>
          </div>
        </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">Team Collaboration</h3>
      </div>
      <p class="text-zinc-300 text-sm leading-relaxed font-sans">Real-time updates, smart notifications, and seamless handoffs keep everyone synchronized across time zones.</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">
          See team features
          <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"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</article>