Responsive Hero Section with CTA Buttons

<section class="w-full max-w-3xl">
        <!-- Hero copy -->
        <h1 class="max-w-3xl sm:text-5xl md:text-6xl lg:text-7xl text-4xl tracking-tighter font-geist font-medium" style="">
Building digital experiences that drive results
</h1>

        <!-- Social proof -->
        

        <p class="max-w-2xl sm:text-lg text-base text-neutral-600 mt-4 font-geist">
          I craft digital experiences that engage users, drive conversions, and deliver measurable results.
        </p>

        <!-- CTAs -->
        <div class="flex flex-col gap-3 sm:flex-row sm:gap-4 mt-8">
          <a href="#contact" class="group inline-flex items-center justify-center gap-3 shadow-indigo-600/20 transition duration-150 ease-out hover:-translate-y-0.5 text-base font-medium text-white font-geist bg-gradient-to-tr from-indigo-600 to-blue-600 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-lg">
            Get started
            <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/20 ring-1 ring-white/30">
              <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" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </span>
          </a>
          <a href="#work" class="inline-flex items-center justify-center transition-colors hover:bg-neutral-100 text-base font-medium text-neutral-800 font-geist bg-neutral-100/60 border-neutral-200 border rounded-full pt-3 pr-6 pb-3 pl-6">
            My work
          </a>
        </div>


      </section>