Portfolio Hero Section with CTA & Image

<section class="max-w-7xl sm:px-6 sm:mt-16 mt-10 px-4">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
        <div class="lg:col-span-7">
          <h1 class="leading-none text-white tracking-tight">
            <span class="block text-[12vw] sm:text-[10vw] md:text-[8vw] lg:text-[7vw] font-semibold">
              <span data-letter="" style="display: inline-block; transform: translateY(0px); opacity: 1;" class="tracking-tighter">Maya</span>
              <span class="block"></span>
              <span data-letter="" style="display: inline-block; transform: translateY(0px); opacity: 1;" class="tracking-tighter">Chen</span>
            </span>
          </h1>
          <p class="sm:mt-5 sm:text-3xl leading-relaxed max-w-2xl text-base text-white/70 tracking-tight mt-4">
            AI Engineer &amp; Frontend — shipping agentic systems, RAG pipelines, and developer UX. I blend product intuition with systems engineering to build fast, reliable LLM apps.
          </p>

          <div class="mt-6 flex flex-col sm:flex-row gap-3">
            <a href="#work" class="inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>View Work</span>
            </a>
            <a href="mailto:hello@mayachen.dev" class="inline-flex items-center justify-center gap-2 hover:bg-white/15 text-sm font-medium text-white tracking-tight bg-white/10 border-white/10 border rounded-full pt-3 pr-5 pb-3 pl-5 shadow-sm backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail w-4 h-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
              <span class="">hello@mayachen.dev</span>
            </a>
          </div>

          <div class="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="flex items-start gap-3 border-t border-white/10 pt-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-[18px] h-[18px] text-white/50 mt-0.5"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
              <div>
                <p class="text-sm font-medium tracking-tight">Based in San Francisco</p>
                <p class="text-xs text-white/60 mt-0.5">Open to remote work</p>
              </div>
            </div>
            <div class="flex items-start gap-3 border-t border-white/10 pt-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" class="lucide lucide-cpu w-[18px] h-[18px] text-white/50 mt-0.5"><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>
                <p class="text-sm font-medium tracking-tight">AI Systems + Frontend</p>
                <p class="text-xs text-white/60 mt-0.5">RAG, agents, benchmarks</p>
              </div>
            </div>
            <div class="flex items-start gap-3 border-t border-white/10 pt-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-[18px] h-[18px] text-white/50 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              <div class="">
                <p class="text-sm font-medium tracking-tight">Currently available</p>
                <p class="text-xs text-white/60 mt-0.5">Starting mid‑September</p>
              </div>
            </div>
          </div>
        </div>

        <div class="lg:col-span-5">
          <div class="relative aspect-[4/5] sm:aspect-[5/6] overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.35)] bg-white/5 rounded-3xl border border-white/10">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9b22c33a-b017-42bd-bab5-89be63576edd_800w.jpg" alt="Maya at work" class="absolute inset-0 w-full h-full object-cover" style="filter: grayscale(100%) saturate(0.7) contrast(1.1);">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>

            <div class="absolute bottom-4 left-4 right-4 grid grid-cols-3 gap-3">
              <div class="rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
                <div class="flex items-center gap-2 mb-1">
                  <div class="w-2 h-2 rounded-full bg-white/50"></div>
                  <div class="text-lg font-semibold tracking-tight text-white">82%</div>
                </div>
                <p class="text-[11px] text-white/70">pass@1 eval</p>
              </div>
              <div class="rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
                <div class="flex items-center gap-2 mb-1">
                  <div class="w-2 h-2 rounded-full bg-white/50"></div>
                  <div class="text-lg font-semibold tracking-tight text-white">780ms</div>
                </div>
                <p class="text-[11px] text-white/70">p95 latency</p>
              </div>
              <div class="rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
                <div class="flex items-center gap-2 mb-1">
                  <div class="w-2 h-2 rounded-full bg-white/50"></div>
                  <div class="text-lg font-semibold tracking-tight text-white">1.2k</div>
                </div>
                <p class="text-[11px] text-white/70">tests</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>