Responsive Pricing Section with Animated Plan Cards

<div
  class="border-gradient sm:p-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll rounded-3xl pt-6 pr-6 pb-6 pl-6 max-w-6xl">
  <div class="mb-12 relative">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-x-6 gap-y-6 items-start">
      <!-- Number + Eyebrow -->
      <div class="lg:col-span-2 flex items-center lg:justify-start justify-between">
        <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 ring-1 ring-white/10 bg-white/[0.03]">
                <span class="text-[11px] font-medium tracking-widest text-zinc-300">
                  03
                </span>
        <span class="h-3 w-px bg-white/10"></span>
        <span class="text-[11px] tracking-wide text-zinc-400">
                  Pricing
                </span>
        </span>
      </div>

      <!-- Title + Subtitle -->
      <div class="lg:col-span-7">
        <h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight leading-[0.95] text-zinc-100">
          Simple plans,
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400">
                  built for growth
                </span>
        </h2>
        <p class="mt-4 text-sm sm:text-base text-zinc-400 max-w-2xl">
          Choose a plan that fits your workflow — from individual creators
          to growing teams, you get every tool you need to design, build,
          and ship without limits.
        </p>
      </div>

      <!-- CTA Group -->
      <div class="lg:col-span-3 lg:justify-end flex flex-col sm:flex-row gap-2 sm:items-center">
        <!-- Primary CTA -->
        <a href="#plans"
          class="group inline-flex min-w-[180px] cursor-pointer overflow-hidden transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white text-base font-medium text-neutral-300 tracking-tight bg-white/5 h-[48px] border-white/15 border rounded-full pt-3 pr-6 pb-3 pl-6 relative items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
          <!-- Front Text -->
          <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md">
                  Start Free
                </span>
          <!-- Hover Text -->
          <span class="z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium opacity-0 absolute inset-0">
                  Start Free
                </span>
          <!-- Bottom Glow Line -->
          <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-white/70 to-transparent transition-all duration-[1000ms] opacity-70 blur-[2px]"></span>
          <!-- Glass Gradient Overlay -->
          <span aria-hidden="true" class="absolute inset-0 rounded-full pointer-events-none bg-gradient-to-t from-white/15 via-white/10 to-transparent"></span>
        </a>

        <!-- Secondary CTA -->
      </div>
    </div>

    <!-- Under-title micro row -->
  </div>

  <div class="overflow-hidden bg-zinc-800/50 ring-white/10 ring-1 rounded-3xl relative">
    <div
      class="absolute -right-20 -top-24 h-72 w-72 bg-gradient-to-tr from-blue-500/20 to-cyan-400/10 rounded-full blur-3xl pointer-events-none">
    </div>

    <div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
      <!-- Small headers -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex items-center gap-4 rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 px-4 py-3">
          <div class="w-10 h-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-300" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <polyline points="16 18 22 12 16 6" class=""></polyline>
              <polyline points="8 6 2 12 8 18" class=""></polyline>
            </svg>
          </div>
          <div class="">
            <p class="text-white text-base font-medium tracking-tight">
              Starter
            </p>
            <p class="text-neutral-400 text-sm">
              Perfect for solo developers &amp; freelancers
            </p>
          </div>
        </div>

        <div class="flex items-center gap-4 rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 px-4 py-3">
          <div class="w-10 h-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-300" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path>
            </svg>
          </div>
          <div class="">
            <p class="text-white text-base font-medium tracking-tight">
              Pro
            </p>
            <p class="text-neutral-400 text-sm">
              Built for growing teams &amp; agencies
            </p>
          </div>
        </div>
      </div>

      <!-- Pricing cards -->
      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Card: Starter -->
        <div
          class="relative rounded-2xl ring-1 ring-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950 px-5 py-6 sm:px-8 sm:py-8 overflow-hidden">
          <div class="pointer-events-none absolute inset-0 opacity-[0.18]"
            style="background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px); background-size: 18px 18px;">
          </div>

          <div class="relative">
            <div class="flex items-end gap-3">
              <p
                class="text-5xl sm:text-6xl font-semibold tracking-tight bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
                $49
              </p>
              <span class="text-[11px] uppercase text-neutral-400 mb-1">
                      /month
                    </span>
            </div>

            <p class="mt-4 text-sm sm:text-base text-neutral-300 max-w-[40ch]">
              Start transforming designs into code instantly with
              AI-powered generation.
            </p>

            <p class="mt-6 text-xs uppercase tracking-wide text-neutral-400">
              Early Adopter Pricing
            </p>

            <div class="mt-3">
              <button type="button" class="group relative inline-flex w-full h-12 sm:h-12 cursor-pointer overflow-hidden rounded-full items-center justify-center text-base font-medium text-white shadow-[inset_0_2px_8px_rgba(255,255,255,0.25),_inset_0_-3px_8px_rgba(0,0,0,0.35),_0_4px_10px_rgba(0,0,0,0.4)] transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px]" style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb);">
                      <!-- Front Text -->
                      <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-full group-hover:opacity-0">
                        Start Free Trial
                      </span>

                      <!-- Hover Text -->
                      <span class="absolute inset-0 flex items-center justify-center z-10 transition-all duration-500 ease-out translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
                        Start Free Trial
                      </span>

                      <!-- Glow Overlay -->
                      <span aria-hidden="true" class="absolute inset-0 rounded-full opacity-0 transition-opacity duration-700 group-hover:opacity-100 blur-[20px]" style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb); z-index: -1;"></span>
                    </button>
            </div>

            <ul class="mt-6 space-y-2 text-sm text-neutral-300">
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                50 design conversions per month
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                React, Vue &amp; HTML output
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                Responsive code generation
              </li>
            </ul>

            <div class="mt-6 h-px bg-white/10"></div>

            <ul class="mt-6 space-y-2 text-sm text-neutral-300">
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M9 12l2 2 4-4" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Figma &amp; Adobe XD integration
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M9 12l2 2 4-4" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Production-ready, clean code
              </li>
            </ul>
          </div>
        </div>

        <!-- Card: Pro -->
        <div
          class="relative rounded-2xl ring-1 ring-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950 px-5 py-6 sm:px-8 sm:py-8 overflow-hidden">
          <div class="pointer-events-none absolute inset-0 opacity-[0.18]"
            style="background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px); background-size: 18px 18px;">
          </div>

          <div class="relative">
            <div class="flex items-end gap-3">
              <p
                class="text-5xl sm:text-6xl font-semibold tracking-tight bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
                $149
              </p>
              <span class="text-[11px] uppercase text-neutral-400 mb-1">
                      /month
                    </span>
            </div>

            <p class="mt-4 text-sm sm:text-base text-neutral-300 max-w-[44ch]">
              Ship faster with unlimited conversions and advanced team
              collaboration features.
            </p>

            <p class="mt-6 text-xs uppercase tracking-wide text-neutral-400">
              Most Popular Plan
            </p>

            <div class="mt-3">
              <button class="group relative inline-flex items-center justify-center w-full h-12 sm:h-12 px-6 py-3 text-sm font-semibold tracking-tight cursor-pointer overflow-hidden rounded-full border border-white/15 bg-white/5 text-neutral-300 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white hover:bg-white/10">
                      <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md">
                        Start Free Trial
                      </span>
                      <span class="absolute inset-0 z-10 flex items-center justify-center font-medium opacity-0 transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none">
                        Start Free Trial
                      </span>
                      <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-white/70 to-transparent transition-all duration-[1000ms] opacity-70 blur-[2px]"></span>
                      <span aria-hidden="true" class="absolute inset-0 rounded-full pointer-events-none bg-gradient-to-t from-white/15 via-white/10 to-transparent"></span>
                    </button>
            </div>

            <ul class="mt-6 space-y-2 text-sm text-neutral-300">
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                Unlimited design conversions
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                Advanced component library
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 w-2 h-2 rounded-full ring-1 ring-white/30"></span>
                Real-time team collaboration
              </li>
            </ul>

            <div class="mt-6 h-px bg-white/10"></div>

            <ul class="mt-6 space-y-2 text-sm text-neutral-300">
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M9 12l2 2 4-4" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Priority support &amp; code reviews
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400 mt-0.5" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M9 12l2 2 4-4" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                API access &amp; custom integrations
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>