Portfolio Project Grid with Hover Details

<section id="work" class="w-full sm:px-6 md:px-10 max-w-7xl mr-auto ml-auto pt-12 pr-4 pb-6 pl-4">
      <div class="flex items-end justify-between mb-6 sm:mb-8">
        <div class="">
          <p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-[0.2em]">(01) Ship Log</p>
          <h2 class="mt-2 text-2xl sm:text-3xl font-semibold tracking-tight">Recent builds we’re proud of.</h2>
        </div>
        <a href="#work" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 bg-white rounded-full px-4 py-2">
          Explore all
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
  <!-- Col 1 -->
  <div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer bg-white rounded-3xl shadow-sm h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a64e6770-50ba-4159-829d-d5f20fab2595_800w.jpg" alt="SaaS analytics platform" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">SaaS • Analytics</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Telemetry Cloud</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex bg-black/40 pt-6 pr-6 pb-6 pl-6 backdrop-blur-md items-center justify-center">
      <div class="transform group-hover:translate-y-0 transition-transform duration-300 delay-75 text-center translate-y-8">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Telemetry Cloud</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Advanced analytics platform for SaaS companies. Real-time insights, custom dashboards, and predictive analytics to drive growth.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          Live Project
        </div>
      </div>
    </div>
  </div>

  <div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc543ce0-b776-4e3a-a6d5-933229659050_800w.jpg" alt="Developer portal" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">DevEx • Docs</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Launchpad Portal</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
      <div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Launchpad Portal</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Comprehensive developer experience platform with interactive documentation, API testing, and seamless onboarding flows.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-amber-400"></span>
          In Development
        </div>
      </div>
    </div>
  </div>

  <div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/51178af2-893c-4b8c-98ab-8023bddbc403_800w.jpg" alt="AI code assistant" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">AI • Product</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Pair AI</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
      <div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Pair AI</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Intelligent code assistant with context-aware suggestions, automated testing, and collaborative programming features.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          Beta Release
        </div>
      </div>
    </div>
  </div>

  <!-- Col 2 -->
  <div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1459a924-0e1f-45a6-a3e5-87850677a537_800w.jpg" alt="Billing platform" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">Fintech • Platform</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">LedgerFlow</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex bg-black/40 pt-6 pr-6 pb-6 pl-6 backdrop-blur-md items-center justify-center">
      <div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">LedgerFlow</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Modern billing platform with automated invoicing, subscription management, and real-time financial reporting for growing businesses.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          Production Ready
        </div>
      </div>
    </div>
  </div>

  <div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6d5e0510-9196-4a94-b2d3-5e95eddcbce9_800w.jpg" alt="Mobile CI/CD" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">Infra • DevOps</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Runway Pipelines</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
      <div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Runway Pipelines</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Advanced CI/CD pipeline for mobile applications with automated testing, deployment orchestration, and rollback capabilities.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          Enterprise Scale
        </div>
      </div>
    </div>
  </div>

  <div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c8e6a60a-b3fb-4b34-83c2-ead36a2abc7f_800w.jpg" alt="Realtime collaboration" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">Realtime • Collab</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Syncboard</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
      <div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Syncboard</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Real-time collaboration platform with live cursors, shared workspaces, and conflict-free synchronization across teams.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-amber-400"></span>
          Coming Soon
        </div>
      </div>
    </div>
  </div>
</div>

      <div class="mt-8 sm:mt-10 flex justify-center">
        <a href="#work" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-neutral-200 px-5 py-3 text-sm text-neutral-700 hover:shadow">
          View all work
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>
    </section>