Portfolio Showcase Section

<section class="max-w-7xl sm:px-6 sm:py-16 text-zinc-900 mr-auto ml-auto pt-12 pr-4 pb-12 pl-4">
  <div class="flex items-end justify-between mb-6 sm:mb-10">
    <div class="">
      <p class="text-[11px] sm:text-xs tracking-widest text-zinc-500 font-geist uppercase">(03) Selected Work</p>
      <h3 class="mt-2 text-3xl sm:text-4xl tracking-tight font-light font-geist">A few projects we're proud of.</h3>
    </div>
    <a href="#" class="hidden sm:inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:shadow font-geist">
      View Portfolio
      <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 h-4 w-4">
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg>
    </a>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
    <a href="#" class="group relative overflow-hidden rounded-3xl ring-1 ring-zinc-200 bg-white shadow-sm">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/52795d68-87e9-4475-b17f-167769668b81_800w.jpg" alt="Dashboard project" class="h-56 sm:h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105">
      <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-5">
        <p class="text-xs text-white/70 font-geist">SaaS • Product</p>
        <div class="mt-1 flex items-center justify-between">
          <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Cloud Analytics</h4>
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-zinc-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 h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </span>
        </div>
      </div>
    </a>
    <a href="#" class="group relative overflow-hidden rounded-3xl ring-1 ring-zinc-200 bg-white shadow-sm">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4d50bfcc-af2b-4668-b115-0a03f8ff1b7b_800w.jpg" alt="Dev tools" class="h-56 sm:h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105">
      <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-5">
        <p class="text-xs text-white/70 font-geist">Platform • Website</p>
        <div class="mt-1 flex items-center justify-between">
          <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Boltshift Launch</h4>
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-zinc-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 h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </span>
        </div>
      </div>
    </a>
    <a href="#" class="group relative overflow-hidden rounded-3xl ring-1 ring-zinc-200 bg-white shadow-sm">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a47e3716-4ead-4fb3-9c48-59eaaf43dc29_800w.jpg" alt="Minimal brand" class="h-56 sm:h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105">
      <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-5">
        <p class="text-xs text-white/70 font-geist">Identity • Campaign</p>
        <div class="mt-1 flex items-center justify-between">
          <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Quotient Rebrand</h4>
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-zinc-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 h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </span>
        </div>
      </div>
    </a>
  </div>
  <div class="mt-8 sm:mt-10 flex justify-center">
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-zinc-200 px-5 py-3 text-sm text-zinc-700 hover:shadow font-geist">
      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="external-link" class="lucide lucide-external-link h-4 w-4">
        <path d="M15 3h6v6"></path>
        <path d="M10 14 21 3"></path>
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
      </svg>
    </a>
  </div>
</section>