Tailwind Pricing Plans Section with Billing Toggle

<section class="sm:px-6 lg:px-8 md:py-20 opacity-100 w-full max-w-7xl mr-auto ml-auto pt-14 pr-4 pb-14 pl-4">
  <!-- Eyebrow -->
  <div class="flex items-center justify-center scroll-fade visible">
    <span class="inline-flex items-center gap-2 text-[11px] uppercase tracking-wide border rounded-full px-3 py-1 text-slate-300/80 bg-white/5 border-white/10" style="">
        <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="badge" class="lucide lucide-badge h-3.5 w-3.5 text-cyan-300"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path></svg>
        Flexible Investment Plans
      </span>
  </div>

  <!-- Heading -->
  <div class="max-w-3xl text-center mx-auto mt-6 scroll-fade scroll-fade-delay visible">
    <h1 class="text-4xl md:text-6xl font-semibold tracking-tight text-slate-50" style="">
      Choose Your
      <span class="bg-clip-text italic font-['Playfair_Display'] bg-gradient-to-r from-slate-200 via-cyan-300 to-indigo-300" style="">Growth</span>
      Plan
    </h1>
    <p class="mt-4 text-base md:text-lg text-slate-400" style="">
      Scalable solutions designed to grow with your business ambitions
    </p>
  </div>

  <!-- Billing toggle -->
  <div class="flex mt-6 items-center justify-center scroll-fade scroll-fade-delay-2 visible">
    <div class="inline-flex items-center gap-2 rounded-xl border p-1 border-white/10 bg-white/5 relative">
      <div id="slider-indicator"
        class="absolute top-1 left-1 h-[calc(100%-8px)] bg-black/40 ring-1 ring-white/10 rounded-lg transition-all duration-300 ease-out"
        style="width: 87px; transform: translateX(0px);"></div>
      <button type="button" id="monthly-btn" class="px-4 py-2 text-xs sm:text-sm rounded-lg tracking-wide relative z-10 transition-colors duration-200 text-slate-200" style="">Monthly</button>
      <button type="button" id="yearly-btn" class="sm:text-sm hover:text-slate-200 relative z-10 transition-colors duration-200 text-xs text-slate-300 tracking-wide rounded-lg pt-2 pr-4 pb-2 pl-4" style="">Yearly</button>
      <span class="px-3 py-2 text-[11px] rounded-lg inline-flex items-center gap-1 bg-white/5 text-slate-300 relative z-10" style="">
          <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="percent" class="lucide lucide-percent h-3.5 w-3.5 text-cyan-300"><line x1="19" x2="5" y1="5" y2="19" class=""></line><circle cx="6.5" cy="6.5" r="2.5" class=""></circle><circle cx="17.5" cy="17.5" r="2.5" class=""></circle></svg>
          Save 20%
        </span>
    </div>
  </div>

  <!-- Pricing cards -->
  <div class="grid gap-8 lg:grid-cols-3 mt-12 mr-auto ml-auto max-w-7xl scroll-fade scroll-fade-delay-3 visible">
    <!-- Starter Plan -->
    <div
      class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-[0_0_30px_rgba(103,232,249,0.15)] hover:ring-1 hover:ring-cyan-300/20 bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]"
      style="backdrop-filter: blur(16px);">
      <div class="absolute inset-0 border-white/20 border rounded-[1.2em]"
        style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight" style="">Starter</h3>
          <p class="mt-2 text-sm text-neutral-400" style="">Perfect for small businesses and startups</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span id="starter-price" class="text-3xl tracking-tighter transition-all duration-200" style="">$0</span>
            <span class="text-sm text-neutral-400" style="">/month</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">5 automation workflows</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Basic AI analytics</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Email support</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Community access</span>
            </li>
          </ul>
          <button class="mt-8 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition" style="">
              Get Started Free
            </button>
        </div>
      </div>
    </div>

    <!-- Pro Plan -->
    <div
      class="card-top w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ring-1 ring-cyan-400/30 bg-gradient-to-br from-neutral-900/80 to-neutral-900/40 rounded-[1.2em] hover:shadow-[0_0_40px_rgba(103,232,249,0.25)] hover:ring-cyan-400/50"
      style="backdrop-filter: blur(16px);">
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight" style="">Professional</h3>
          <p class="mt-2 text-sm text-neutral-400" style="">For growing teams and advanced automation</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span id="pro-price" class="text-3xl tracking-tighter transition-all duration-200" style="">$299</span>
            <span class="text-sm text-neutral-400" style="">/month</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Unlimited workflows</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Advanced AI insights &amp; predictions</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Priority support &amp; onboarding</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Custom integrations</span>
            </li>
          </ul>
          <button class="w-full hover:brightness-95 transition text-sm font-semibold text-neutral-900 bg-gradient-to-br from-cyan-300 to-indigo-300 rounded-xl mt-8 pt-3 pr-4 pb-3 pl-4" style="">
              Start 14-Day Trial
            </button>
        </div>
      </div>
    </div>

    <!-- Enterprise Plan -->
    <div
      class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em] hover:shadow-[0_0_30px_rgba(103,232,249,0.15)] hover:ring-1 hover:ring-cyan-300/20"
      style="backdrop-filter: blur(16px);">
      <div class="absolute inset-0 border-white/20 border rounded-[1.2em]"
        style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight" style="">Enterprise</h3>
          <p class="mt-2 text-sm text-neutral-400" style="">Custom solutions for large organizations</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span id="enterprise-price" class="text-3xl tracking-tighter transition-all duration-200" style="">Custom</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">White-label solutions</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Dedicated infrastructure</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">24/7 dedicated support</span>
            </li>
            <li class="flex items-start gap-3">
              <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"
                class="mt-0.5 h-4 w-4 text-cyan-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="text-neutral-300" style="">Compliance &amp; security certifications</span>
            </li>
          </ul>
          <button class="mt-8 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition" style="">
              Contact Sales
            </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add-ons -->
  <div
    class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em] mt-12 mr-auto ml-auto max-w-7xl scroll-fade scroll-fade-delay visible"
    style="backdrop-filter: blur(16px);">
    <div class="absolute inset-0 border-white/20 border rounded-[1.2em]"
      style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
    <div class="relative max-w-7xl text-center mr-auto ml-auto pt-8 pr-8 pb-8 pl-8">
      <h3 class="text-lg font-semibold tracking-tight" style="">Need something more specific?</h3>
      <p class="mt-2 text-sm text-neutral-400" style="">Custom AI agent development: Starting at $5,000 • Premium
        integrations: $150/month per connection</p>
      <div class="mt-6 flex flex-wrap justify-center gap-4 text-xs text-neutral-500">
        <span class="flex items-center gap-2" style="">
            <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" class="h-3 w-3 text-cyan-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
            No setup fees
          </span>
        <span class="flex items-center gap-2" style="">
            <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" class="h-3 w-3 text-cyan-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
            Cancel anytime
          </span>
        <span class="flex items-center gap-2" style="">
            <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" class="h-3 w-3 text-cyan-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
            30-day money back
          </span>
      </div>
    </div>
  </div>
</section>