بخش‌های قیمت‌گذاری

<section class="bg-white py-24 dark:bg-gray-950 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-4xl text-center">
      <h2 class="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">Pricing</h2>
      <p class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Plans for every team</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-8 sm:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$0</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For individuals and small projects.</p>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$29</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For growing teams.</p>
        <a href="#" class="mt-8 block rounded-full bg-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$99</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For large organizations.</p>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
    </div>
  </div>
</section>

<section class="pricing-toggle-2 bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <div class="mt-6 flex items-center justify-center gap-3">
      <span class="pricing-label-monthly text-sm text-gray-500 dark:text-gray-400">Monthly</span>
      <button type="button" class="pricing-toggle-btn relative h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 aria-pressed="false" aria-label="Toggle annual" data-state="monthly">
        <span class="pricing-toggle-knob absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ease-out translate-x-0" />
      </button>
      <span class="text-sm font-medium text-gray-900 dark:text-white">Annual <span class="pricing-save-badge text-indigo-600 dark:text-indigo-400 opacity-0 transition-opacity duration-200">Save 20%</span></span>
    </div>
    <div class="mt-12 grid gap-8 sm:grid-cols-2">
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">
          <span class="pricing-monthly" data-monthly>$29</span><span class="pricing-annual hidden" data-annual>$279</span><span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span>
        </p>
        <a href="#" class="mt-6 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border-2 border-indigo-600 p-8 dark:border-indigo-500">
        <h3 class="font-semibold text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">
          <span class="pricing-monthly" data-monthly>$99</span><span class="pricing-annual hidden" data-annual>$950</span><span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span>
        </p>
        <a href="#" class="mt-6 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
      </div>
    </div>
  </div>
</section>
<script>
  (function () {
    const section = document.querySelector('.pricing-toggle-2');
    if (!section) return;
    const btn = section.querySelector('.pricing-toggle-btn');
    const knob = section.querySelector('.pricing-toggle-knob');
    const monthlyEls = section.querySelectorAll('.pricing-monthly');
    const annualEls = section.querySelectorAll('.pricing-annual');
    const saveBadge = section.querySelector('.pricing-save-badge');
    if (!btn || !knob) return;

    function setAnnual(annual) {
      const isAnnual = !!annual;
      btn.setAttribute('data-state', isAnnual ? 'annual' : 'monthly');
      btn.setAttribute('aria-pressed', String(isAnnual));
      if (knob) knob.style.transform = isAnnual ? 'translateX(1.25rem)' : 'translateX(0)';
      monthlyEls.forEach(function (el) { el.classList.toggle('hidden', isAnnual); });
      annualEls.forEach(function (el) { el.classList.toggle('hidden', !isAnnual); });
      if (saveBadge) saveBadge.classList.toggle('opacity-0', !isAnnual);
    }

    btn.addEventListener('click', function () {
      setAnnual(btn.getAttribute('data-state') !== 'annual');
    });
    setAnnual(false);
  })();
</script>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white">Compare plans</h2>
    <div class="mt-12 overflow-x-auto">
      <table class="w-full min-w-[600px] border-collapse text-right">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700">
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Feature</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Starter</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Pro</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Enterprise</th>
          </tr>
        </thead>
        <tbody class="text-gray-600 dark:text-gray-300">
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Users</td><td>1</td><td>10</td><td>Unlimited</td></tr>
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Storage</td><td>5 GB</td><td>50 GB</td><td>Unlimited</td></tr>
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Support</td><td>Email</td><td>Priority</td><td>24/7</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="bg-gray-50 dark:bg-gray-900/50 py-24">
  <div class="mx-auto max-w-lg px-6 text-center">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Simple pricing</h2>
    <div class="mt-8 rounded-2xl border-2 border-indigo-600 bg-white p-10 dark:border-indigo-500 dark:bg-gray-900">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Pro</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <p class="mt-4 text-gray-600 dark:text-gray-300">Everything you need to ship and scale.</p>
      <a href="#" class="mt-8 block rounded-full bg-indigo-600 py-3 text-center font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-8 lg:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$0</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ 5 projects</li>
          <li class="flex gap-2">✓ 1 GB storage</li>
          <li class="flex gap-2">✓ Email support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$29</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ Unlimited projects</li>
          <li class="flex gap-2">✓ 50 GB storage</li>
          <li class="flex gap-2">✓ Priority support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$99</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ Everything in Pro</li>
          <li class="flex gap-2">✓ Unlimited storage</li>
          <li class="flex gap-2">✓ 24/7 support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <div class="mt-8 space-y-6">
      <div class="flex items-center justify-between border-b border-gray-200 py-4 dark:border-gray-700">
        <div>
          <p class="font-medium text-gray-900 dark:text-white">Starter</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">For individuals</p>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$0</span>
          <a href="#" class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">Get started</a>
        </div>
      </div>
      <div class="flex items-center justify-between border-b border-gray-200 py-4 dark:border-gray-700">
        <div>
          <p class="font-medium text-gray-900 dark:text-white">Pro</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">For teams</p>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29</span>
          <a href="#" class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">Get started</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-300">Simple, transparent pricing. No hidden fees.</p>
    <div class="mt-12 flex justify-center">
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro — $29/mo</h3>
        <a href="#" class="mt-6 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
    </div>
    <div class="mt-16 border-t border-gray-200 pt-16 dark:border-gray-700">
      <h3 class="font-semibold text-gray-900 dark:text-white">Questions?</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">See our FAQ or contact support.</p>
    </div>
  </div>
</section>

<section class="bg-gray-50 dark:bg-gray-900/50 py-24">
  <div class="mx-auto max-w-5xl px-6 lg:grid lg:grid-cols-2 lg:gap-12">
    <div class="rounded-2xl border border-gray-200 bg-white p-10 dark:border-gray-700 dark:bg-gray-900">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Monthly</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
      <a href="#" class="mt-8 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
    <div class="mt-8 rounded-2xl border-2 border-indigo-600 bg-white p-10 dark:mt-0 dark:border-indigo-500 dark:bg-gray-900">
      <span class="text-sm font-medium text-indigo-600 dark:text-indigo-400">Save 20%</span>
      <h3 class="mt-2 text-xl font-semibold text-gray-900 dark:text-white">Annual</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$279<span class="text-base font-normal text-gray-500 dark:text-gray-400">/yr</span></p>
      <a href="#" class="mt-8 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-md px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">One plan. Simple.</h2>
    <p class="mt-4 text-5xl font-bold text-gray-900 dark:text-white">$29<span class="text-2xl font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
    <p class="mt-6 text-gray-600 dark:text-gray-300">Everything included. No limits.</p>
    <a href="#" class="mt-8 inline-block w-full rounded-full bg-gray-900 py-3 font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-10 text-center dark:border-gray-700 dark:bg-gray-900">
      <span class="inline-block rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300">Most popular</span>
      <h2 class="mt-4 text-2xl font-bold text-gray-900 dark:text-white">Pro plan</h2>
      <p class="mt-2 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <a href="#" class="mt-8 inline-block rounded-full bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

<section class="bg-gray-900 dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-3xl font-bold text-white">Enterprise</h2>
    <p class="mt-4 text-lg text-gray-300">For large teams and organizations. Custom pricing.</p>
    <a href="#" class="mt-8 inline-block rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100">Contact sales</a>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-3xl px-6">
    <div class="grid gap-8 sm:grid-cols-2">
      <div class="rounded-xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Free</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$0</p>
        <a href="#" class="mt-6 block rounded-full border border-gray-900 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
      <div class="rounded-xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$29</p>
        <a href="#" class="mt-6 block rounded-full bg-gray-900 py-2 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
    </div>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-lg px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">One simple plan</h2>
    <div class="mt-10 rounded-2xl border-2 border-indigo-600 bg-white p-8 dark:border-indigo-500 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-xl">
      <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$49<span class="text-base font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <p class="mt-4 text-sm text-gray-600 dark:text-gray-300">Everything you need. No tiers, no surprises.</p>
      <a href="#" class="mt-6 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
    </div>
  </div>
</section>

<section class="bg-gray-50 dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-center text-2xl font-bold text-gray-900 dark:text-white">Choose your plan</h2>
    <div class="mt-12 grid gap-8 sm:grid-cols-2">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="font-semibold text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$19<span class="text-sm font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
        <a href="#" class="mt-4 block rounded-lg border border-gray-300 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200">Select</a>
      </div>
      <div class="rounded-xl border-2 border-indigo-600 bg-white p-6 dark:border-indigo-500 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$49<span class="text-sm font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
        <a href="#" class="mt-4 block rounded-lg bg-indigo-600 py-2 text-center text-sm font-medium text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Select</a>
      </div>
    </div>
  </div>
</section>