Pricing

<section class="py-24">
  <div class="container">
    <div class="text-center mb-16">
      <h2 class="text-3xl font-bold">Simple, transparent pricing</h2>
      <p class="mt-4 text-muted-foreground">
        Choose the plan that's right for you.
      </p>
    </div>
    <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      <!-- Pricing card -->
      <div class="rounded-lg border p-8">
        <h3 class="font-semibold">Starter</h3>
        <div class="mt-4">
          <span class="text-4xl font-bold">$9</span>
          <span class="text-muted-foreground">/month</span>
        </div>
        <ul class="mt-6 space-y-3 text-sm">
          <li class="flex items-center gap-2">
            <span>✓</span> Feature one
          </li>
          <li class="flex items-center gap-2">
            <span>✓</span> Feature two
          </li>
        </ul>
        <button class="mt-8 w-full btn-secondary">
          Get Started
        </button>
      </div>
    </div>
  </div>
</section>