Quick Start Three-Step Section with CTA (Tailwind)

<div class="overflow-hidden sm:p-8 lg:p-12 sm:rounded-3xl sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 [animation:fadeSlideIn_1s_ease-out_0.1s_both] animate-on-scroll bg-neutral-900 max-w-7xl ring-white/10 ring-1 rounded-2xl mr-auto ml-auto pt-8 pr-8 pb-8 pl-8 relative">
      <div class="flex flex-col gap-6 sm:gap-8 mb-8 sm:mb-12">
        <div class="text-center">
          <p class="text-[10px] sm:text-[11px] uppercase tracking-[0.16em] sm:tracking-[0.18em] text-neutral-400 font-geist">Quick Start</p>
          <h2 class="mt-2 sm:mt-3 text-2xl sm:text-4xl lg:text-5xl text-white tracking-tight sm:tracking-tighter font-geist font-light" style="">Up and running in 60 seconds</h2>
        </div>
        <p class="text-sm sm:text-base lg:text-lg text-neutral-300 max-w-full sm:max-w-[42ch] text-center mx-auto font-geist">
          Three simple steps to create your first CLI tool with VibeCLI.
        </p>
      </div>

      <!-- Steps -->
      <div class="mb-12 sm:mb-16">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8">
          <div class="relative p-6 sm:p-8 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-3xl sm:text-4xl text-indigo-400 mb-3 font-geist font-light" style="">01</div>
            <h3 class="text-lg sm:text-xl font-medium text-white mb-3 font-geist" style="">Install</h3>
            <div class="bg-neutral-950/80 rounded-lg p-3 mb-3">
              <code class="text-xs sm:text-sm text-emerald-400 font-geist">npm install vibecli</code>
            </div>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Add VibeCLI to your project</p>
          </div>
          
          <div class="relative p-6 sm:p-8 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-3xl sm:text-4xl text-purple-400 mb-3 font-geist font-light" style="">02</div>
            <h3 class="text-lg sm:text-xl font-medium text-white mb-3 font-geist" style="">Create</h3>
            <div class="bg-neutral-950/80 rounded-lg p-3 mb-3">
              <code class="text-xs sm:text-sm text-emerald-400 font-geist">vibecli init</code>
            </div>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Generate your CLI scaffold</p>
          </div>
          
          <div class="relative p-6 sm:p-8 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-3xl sm:text-4xl text-pink-400 mb-3 font-geist font-light" style="">03</div>
            <h3 class="text-lg sm:text-xl font-medium text-white mb-3 font-geist" style="">Ship</h3>
            <div class="bg-neutral-950/80 rounded-lg p-3 mb-3">
              <code class="text-xs sm:text-sm text-emerald-400 font-geist">npm run build</code>
            </div>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Build and publish to npm</p>
          </div>
        </div>
      </div>

      <!-- CTA -->
      <div class="mt-12 sm:mt-16 pt-6 sm:pt-8 border-t border-white/10 text-center">
        <a href="/docs" class="inline-flex items-center gap-3 hover:bg-white/10 transition-colors text-sm text-white bg-white/5 h-12 ring-white/10 ring-1 rounded-full pr-2 pl-5 font-geist">
          Read Full Documentation
          <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-white text-neutral-900">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="stroke: currentColor; stroke-width: 1.8; fill: none;" class="">
              <path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </span>
        </a>
      </div>
    </div>