Portfolio Hero Section with CTA and Image Grid

<section class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
      <div class="grid gap-6 lg:grid-cols-2 mt-10">
        <div class="relative overflow-hidden rounded-2xl bg-neutral-900/60 p-6 ring-1 ring-white/10">
          <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] text-neutral-300">
            <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-[14px] w-[14px]" style="stroke-width: 1.5;"><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>
            Senior UI/UX · Systems · Research
          </span>
          <h1 class="sm:text-5xl md:text-6xl text-4xl font-medium tracking-tight mt-4">
            I design thoughtful products and scalable design systems.
          </h1>
          <p class="mt-3 max-w-prose text-sm text-neutral-400">
            Portfolio navigation demo. Explore work, case studies, and process via the full-width panel and mobile overlay.
          </p>
          <div class="mt-5 flex flex-wrap items-center gap-3">
            <a href="#contact" class="inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 px-4 py-2 text-sm font-medium hover:bg-neutral-100 transition">
              Let’s collaborate
              <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" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </a>
            <a href="#case-studies" class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white hover:bg-white/10 transition">
              See case studies
              <span class="h-1.5 w-1.5 rounded-full bg-white/80"></span>
            </a>
          </div>
          <div class="mt-6 h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
          <div class="mt-4 grid grid-cols-3 gap-3 text-[11px] text-neutral-400">
            <div class="inline-flex items-center gap-2">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
              Accessibility-first
            </div>
            <div class="inline-flex items-center gap-2">
              <span class="h-1.5 w-1.5 rounded-full bg-sky-400"></span>
              Research-driven
            </div>
            <div class="inline-flex items-center gap-2">
              <span class="h-1.5 w-1.5 rounded-full bg-fuchsia-400"></span>
              Systems thinking
            </div>
          </div>
        </div>
        <div class="grid gap-4">
          <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10">
            <img alt="Product UI" class="h-full w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/44cc0f92-4f9d-4e6c-bab3-5aec5a2e0341_1600w.jpg">
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10">
              <img alt="Design system" class="h-40 w-full h-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ab45de77-565c-4707-a5f7-5b243fe2c828_800w.jpg">
            </div>
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10">
              <img alt="Research" class="h-40 w-full h-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d07f5b64-557b-4f4d-b18f-6732ccd9fadb_800w.jpg">
            </div>
          </div>
        </div>
      </div>
    </section>