Project Category Cards Grid

<div class="bg-white pt-20 pb-20">
  <style>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
    
    .font-space-grotesk {
      font-family: 'Space Grotesk', 'Arial', sans-serif;
    }
    
    .font-geist {
      font-family: 'Inter', 'Helvetica Neue', sans-serif;
    }</style>
  <div class="lg:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <div class="max-w-4xl mb-12">
      <h2 class="sm:text-5xl text-4xl font-semibold text-gray-900 tracking-tight font-space-grotesk">What Types of Projects Qualify?</h2>
    </div>
    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <article class="group overflow-hidden bg-white border border-gray-200
        rounded-3xl shadow-sm hover:shadow-lg transition-shadow
        duration-300">
        <div class="overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0465d628-a834-480c-8e14-ff665ed9a84b_800w.jpg" alt="3D render of layered chip with neon accents" class="sm:h-52 transition-transform duration-300 group-hover:scale-105 w-full h-48 object-cover" />
        </div>
        <div class="pt-6 pr-6 pb-6 pl-6">
          <h3 class="text-lg font-semibold tracking-tight text-gray-900 font-geist">Protocol & Core Infrastructure</h3>
          <ul class="mt-3 list-disc pl-5 text-sm text-gray-600 space-y-2 font-geist">
            <li>Enhancements to the Nosana network.</li>
            <li>Optimizations for GPU workload distribution and performance.</li>
            <li>Security, privacy, and cryptographic innovations.</li>
          </ul>
        </div>
      </article>
      <article class="group overflow-hidden bg-white border border-gray-200
        rounded-3xl shadow-sm hover:shadow-lg transition-shadow
        duration-300">
        <div class="overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4bb2c3e7-9367-4d74-b3ef-e74384d9fedb_800w.jpg" alt="3D render of connected nodes and UI layers" class="w-full h-48 sm:h-52 object-cover transition-transform duration-300 group-hover:scale-105" />
        </div>
        <div class="pt-6 pr-6 pb-6 pl-6">
          <h3 class="text-lg font-semibold tracking-tight text-gray-900 font-geist">Ecosystem & Developer Tooling</h3>
          <ul class="mt-3 list-disc pl-5 text-sm text-gray-600 space-y-2 font-geist">
            <li>SDKs, APIs, and CLI tools to improve the developer experience.</li>
            <li>Open‑source dashboards and monitoring tools.</li>
            <li>Documentation, tutorials, and technical resources.</li>
          </ul>
        </div>
      </article>
      <article class="group overflow-hidden bg-white border border-gray-200
        rounded-3xl shadow-sm hover:shadow-lg transition-shadow
        duration-300">
        <div class="overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2708f065-299d-4cc7-b08e-37d986f56c16_800w.jpg" alt="3D render of modular app tiles" class="w-full h-48 sm:h-52 object-cover transition-transform duration-300 group-hover:scale-105" />
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold tracking-tight text-gray-900 font-geist">AI Application Layer</h3>
          <ul class="mt-3 list-disc pl-5 text-sm text-gray-600 space-y-2 font-geist">
            <li>Decentralized AI model deployment frameworks.</li>
            <li>Fine‑tuning and inference pipelines optimized for distributed compute.</li>
            <li>Cross‑platform integrations with existing ML tools.</li>
          </ul>
        </div>
      </article>
      <article class="group overflow-hidden bg-white border border-gray-200
        rounded-3xl shadow-sm hover:shadow-lg transition-shadow
        duration-300">
        <div class="overflow-hidden">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/382269e3-aeb0-45b7-ad66-400f34b74ac6_800w.jpg" alt="3D render of glowing atom over platform" class="w-full h-48 sm:h-52 object-cover transition-transform duration-300 group-hover:scale-105" />
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold tracking-tight text-gray-900 font-geist">Community & Education</h3>
          <ul class="mt-3 list-disc pl-5 text-sm text-gray-600 space-y-2 font-geist">
            <li>Initiatives that grow the Nosana developer community.</li>
            <li>Hackathons, workshops, and training programs.</li>
            <li>Educational content to promote decentralized AI adoption.</li>
          </ul>
        </div>
      </article>
    </div>
  </div>
</div>