Dark SaaS Pricing Section with Two Plans

<section class="border-dashed bg-[#05080A] border-white/10 border-b pt-24 pb-24"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; section:nth-of-type(4)">
  <div class="max-w-6xl mx-auto px-6">
    <div class="mb-16 relative">
      <div class="absolute -top-12 -left-12 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl" aria-hidden="true"></div>

      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-8 z-10 relative gap-x-8 gap-y-8">
        <div class="max-w-2xl">
          <div class="flex items-center gap-3 mb-4">
            <span class="uppercase text-xs font-semibold text-[#c6f91f] tracking-widest font-geist">
                    04. Pricing
                  </span>
          </div>

          <h2
            class="text-4xl md:text-5xl lg:text-6xl text-white font-light tracking-tighter mb-4 font-geist leading-[1.1] reveal-on-scroll">
            Transparent
            <span class="">pricing</span>
            .
          </h2>

          <p class="text-lg font-geist max-w-md text-white/70 reveal-on-scroll" style="">
            Start small and scale as you grow. No hidden fees.
          </p>
        </div>

        <div class="flex items-center gap-3 bg-white/5 p-1 rounded-lg border border-white/5">
          <button class="px-4 py-1.5 text-xs font-medium text-black bg-[#c6f91f] rounded font-geist reveal-on-scroll">
                  Monthly
                </button>
          <button class="px-4 py-1.5 text-xs font-medium text-slate-400 hover:text-white transition-colors font-geist reveal-on-scroll" style="">
                  Yearly
                </button>
        </div>
      </div>

      <div class="mt-12 h-[1px] w-full bg-gradient-to-r from-slate-800 via-slate-700 to-transparent" style=""></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
      <!-- Plan 1: Starter -->
      <div
        class="flex flex-col group hover:bg-white/[0.04] transition-colors duration-300 h-full border-white/10 border rounded-none p-10 relative reveal-on-scroll">
        <!-- Corner Accents (Hidden initially, show on hover) -->
        <div
          class="absolute -top-px -left-px w-4 h-4 border-t-2 border-l-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -top-px -right-px w-4 h-4 border-t-2 border-r-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -bottom-px -left-px w-4 h-4 border-b-2 border-l-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -bottom-px -right-px w-4 h-4 border-b-2 border-r-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>

        <div class="mb-8">
          <span class="inline-block px-3 py-1 text-xs font-medium text-slate-300 border border-white/10 rounded bg-white/5 group-hover:text-[#c6f91f] group-hover:border-[#c6f91f] group-hover:bg-[#c6f91f]/10 transition-colors duration-300 font-geist">
        Starter
      </span>
        </div>
        <div class="mb-2 flex items-baseline gap-1">
          <span class="text-5xl font-medium text-white tracking-tight font-geist">
        $49
      </span>
          <span class="text-lg text-white/70 font-geist">
        /month
      </span>
        </div>
        <p class="text-white/70 text-sm mb-8 font-geist font-light reveal-on-scroll">
          Perfect for individuals getting started.
        </p>
        <button class="w-full py-4 mb-10 rounded-lg border border-white/10 bg-transparent text-white group-hover:bg-[#c6f91f] group-hover:text-black group-hover:border-[#c6f91f] transition-all duration-300 text-sm font-medium font-geist reveal-on-scroll">
      Start Free Trial
    </button>
        <div class="mt-auto">
          <h4 class="text-white font-medium mb-6 font-geist text-sm">
            What's included
          </h4>
          <ul class="space-y-4">
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            2 AI Sales Agents
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            1,000 Leads per month
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            Basic CRM Sync
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            Email Support
          </span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Plan 2: Growth -->
      <div
        class="flex flex-col group hover:bg-white/[0.04] transition-colors duration-300 h-full border-white/10 border rounded-none p-10 relative reveal-on-scroll">
        <!-- Corner Accents (Hidden initially, show on hover) -->
        <div
          class="absolute -top-px -left-px w-4 h-4 border-t-2 border-l-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -top-px -right-px w-4 h-4 border-t-2 border-r-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -bottom-px -left-px w-4 h-4 border-b-2 border-l-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>
        <div
          class="absolute -bottom-px -right-px w-4 h-4 border-b-2 border-r-2 border-[#c6f91f] opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>

        <div class="mb-8">
          <span class="inline-block px-3 py-1 text-xs font-medium text-slate-300 border border-white/10 rounded bg-white/5 group-hover:text-[#c6f91f] group-hover:border-[#c6f91f] group-hover:bg-[#c6f91f]/10 transition-colors duration-300 font-geist">
        Growth
      </span>
        </div>
        <div class="mb-2 flex items-baseline gap-1">
          <span class="text-5xl font-medium text-white tracking-tight font-geist">
        $149
      </span>
          <span class="text-lg text-white/70 font-geist">
        /month
      </span>
        </div>
        <p class="text-white/70 text-sm mb-8 font-geist font-light reveal-on-scroll">
          For scaling teams that need more power.
        </p>
        <button class="w-full py-4 mb-10 rounded-lg border border-white/10 bg-transparent text-white group-hover:bg-[#c6f91f] group-hover:text-black group-hover:border-[#c6f91f] transition-all duration-300 text-sm font-medium font-geist reveal-on-scroll">
      Schedule a call
    </button>
        <div class="mt-auto">
          <h4 class="text-white font-medium mb-6 font-geist text-sm">
            What's included
          </h4>
          <ul class="space-y-4">
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            10 AI Sales Agents
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            10,000 Leads per month
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            Advanced CRM Integration
          </span>
            </li>
            <li class="flex items-start gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="text-white/70 flex-shrink-0">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
              <span class="text-white/70 text-sm font-light font-geist">
            Priority Support
          </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>