Featured Partners Responsive Card Grid

<section class="max-w-7xl sm:px-6 lg:px-8 mx-auto pb-16 w-full">
        <div class="bg-white/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4">
  <p class="text-xs text-neutral-400">Featured partners</p>
  <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div class="flex flex-col gap-3 ring-1 ring-white/10 bg-neutral-900/60 rounded-lg pt-4 pr-4 pb-4 pl-4">
      <div class="flex items-center gap-3">
        <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="square-dot" class="lucide lucide-square-dot h-6 w-6 text-neutral-300"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><circle cx="12" cy="12" r="1" class=""></circle></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">ProtoKit</span>
          <p class="text-xs text-neutral-400 mt-1">Rapid prototyping &amp; wireframing toolkit</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          4 months
        </span>
        <span class="text-neutral-400">• Pro Plan</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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="shapes" class="lucide lucide-shapes h-6 w-6 text-neutral-300"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect><circle cx="17.5" cy="17.5" r="3.5" class=""></circle></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">FormaLab</span>
          <p class="text-xs text-neutral-400 mt-1">3D modeling &amp; visualization platform</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          6 months
        </span>
        <span class="text-neutral-400">• Studio Access</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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="scan-line" class="lucide lucide-scan-line h-6 w-6 text-neutral-300"><path d="M3 7V5a2 2 0 0 1 2-2h2" class=""></path><path d="M17 3h2a2 2 0 0 1 2 2v2" class=""></path><path d="M21 17v2a2 2 0 0 1-2 2h-2" class=""></path><path d="M7 21H5a2 2 0 0 1-2-2v-2" class=""></path><path d="M7 12h10" class=""></path></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">Lens AI</span>
          <p class="text-xs text-neutral-400 mt-1">AI-powered image analysis &amp; generation</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          3 months
        </span>
        <span class="text-neutral-400">• Premium API</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex gap-3 items-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" data-lucide="cog" class="lucide lucide-cog w-[24px] h-[24px]" style="width: 24px; height: 24px; color: rgb(212, 212, 212);"><path d="M11 10.27 7 3.34" class=""></path><path d="m11 13.73-4 6.93" class=""></path><path d="M12 22v-2" class=""></path><path d="M12 2v2" class=""></path><path d="M14 12h8" class=""></path><path d="m17 20.66-1-1.73" class=""></path><path d="m17 3.34-1 1.73" class=""></path><path d="M2 12h2" class=""></path><path d="m20.66 17-1.73-1" class=""></path><path d="m20.66 7-1.73 1" class=""></path><path d="m3.34 17 1.73-1" class=""></path><path d="m3.34 7 1.73 1" class=""></path><circle cx="12" cy="12" r="2" class=""></circle><circle cx="12" cy="12" r="8" class=""></circle></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">MotionForge</span>
          <p class="text-xs text-neutral-400 mt-1">Advanced motion graphics &amp; animation suite</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          5 months
        </span>
        <span class="text-neutral-400">• Master License</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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="layout" class="lucide lucide-layout h-6 w-6 text-neutral-300"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M9 21V9" class=""></path></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">Gridly</span>
          <p class="text-xs text-neutral-400 mt-1">Responsive grid system &amp; layout builder</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          4 months
        </span>
        <span class="text-neutral-400">• Unlimited Sites</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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-6 w-6 text-neutral-300"><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>
        <div class="">
          <span class="text-base font-medium text-neutral-200">SageML</span>
          <p class="text-xs text-neutral-400 mt-1">Machine learning model deployment platform</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          6 months
        </span>
        <span class="text-neutral-400">• Enterprise Tier</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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="palette" class="lucide lucide-palette h-6 w-6 text-neutral-300"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">ChromaFlow</span>
          <p class="text-xs text-neutral-400 mt-1">Color palette generator &amp; brand toolkit</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          3 months
        </span>
        <span class="text-neutral-400">• Creative Suite</span>
      </div>
    </div>

    <div class="flex flex-col gap-3 rounded-lg bg-neutral-900/60 px-4 py-4 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <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="zap" class="lucide lucide-zap h-6 w-6 text-neutral-300"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
        <div class="">
          <span class="text-base font-medium text-neutral-200">VelocityCode</span>
          <p class="text-xs text-neutral-400 mt-1">High-performance code generation framework</p>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs">
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          5 months
        </span>
        <span class="text-neutral-400">• Developer Pro</span>
      </div>
    </div>
    </div>

    

    
  </div>
</div>
      </section>