Portfolio Hero Section with CTAs

<div class="lg:col-span-7">
          <h1 class="leading-none text-gray-900 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">Jordan</span>
              <span class="block"></span>
              <span data-letter="" style="display: inline-block; transform: translateY(0px); opacity: 1;" class="tracking-tighter">Lee</span>
            </span>
          </h1>
          <p class="sm:mt-5 sm:text-3xl leading-relaxed max-w-2xl mix-blend-luminosity brightness-200 text-base text-gray-700 tracking-tight mt-4">
            Product Designer &amp; Frontend Engineer crafting clear, performant interfaces for ambitious teams. I blend systems thinking, accessibility, and motion to ship useful, beautiful work.
          </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-white bg-gray-900 hover:bg-gray-800 border border-gray-900">
              <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 class="">View Work</span>
            </a>
            <a href="mailto:hello@jordan.design" class="inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium tracking-tight text-gray-900 bg-white hover:bg-gray-50 border border-gray-200 shadow-sm">
              <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@jordan.design</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-black/5 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-gray-400 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 class="">
                <p class="text-sm font-medium tracking-tight">Based in San Francisco</p>
                <p class="text-xs text-gray-500 mt-0.5">Open to remote work</p>
              </div>
            </div>
            <div class="flex items-start gap-3 border-t border-black/5 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="monitor" class="lucide lucide-monitor w-[18px] h-[18px] text-gray-400 mt-0.5"><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><line x1="8" x2="16" y1="21" y2="21" class=""></line><line x1="12" x2="12" y1="17" y2="21" class=""></line></svg>
              <div class="">
                <p class="text-sm font-medium tracking-tight">Product Design + Frontend</p>
                <p class="text-xs text-gray-500 mt-0.5">Design systems, web apps</p>
              </div>
            </div>
            <div class="flex gap-3 border-black/5 border-t pt-4 items-start">
              <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-gray-400 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-gray-500 mt-0.5">Starting mid‑September</p>
              </div>
            </div>
          </div>
        </div>