Pricing & Plans

A pricing page with monthly/yearly toggle and three plan cards.

Preview

MonthlyYearly

Free

$0/mo
  • ✓ 1 project
  • ✓ 100 MB storage
  • ✓ Community support
  • ✗ Custom domain
  • ✗ Analytics

Pro

Popular
$24/mo
  • ✓ 10 projects
  • ✓ 10 GB storage
  • ✓ Priority support
  • ✓ Custom domain
  • ✗ Advanced analytics

Enterprise

$99/mo
  • ✓ Unlimited projects
  • ✓ 1 TB storage
  • ✓ Dedicated support
  • ✓ Custom domain
  • ✓ Advanced analytics
html
<div class="vstack gap-4 items-center">
  <div class="hstack gap-2">
    <span [class.font-semibold]="!yearly()">Monthly</span>
    <label class="switch">
      <input type="checkbox" [checked]="yearly()" (change)="yearly.set(!yearly())" />
      <span></span>
    </label>
    <span [class.font-semibold]="yearly()">Yearly</span>
    @if (yearly()) {
      <ng-oat-badge variant="success">Save 20%</ng-oat-badge>
    }
  </div>

  <div class="grid cols-3 w-100">
    <div class="card">
      <div class="vstack gap-3 text-center">
        <h4 class="mb-0">Free</h4>
        <div><span class="text-1 font-bold">$0</span><span class="text-light">/mo</span></div>
        <hr />
        <ul class="vstack gap-1 text-left unstyled">
          <li>✓ 1 project</li>
          <li>✓ 100 MB storage</li>
        </ul>
        <button class="btn outline w-100">Get Started</button>
      </div>
    </div>
    <!-- Pro & Enterprise follow same pattern -->
  </div>
</div>

SFC Source

typescript
import { Component, signal } from '@angular/core';
import { NgOatBadge } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-pricing',
  imports: [NgOatBadge],
  template: `
    <div class="vstack gap-4 items-center">
      <div class="hstack gap-2">
        <span [class.font-semibold]="!yearly()">Monthly</span>
        <label class="switch">
          <input type="checkbox" [checked]="yearly()" (change)="yearly.set(!yearly())" />
          <span></span>
        </label>
        <span [class.font-semibold]="yearly()">Yearly</span>
        @if (yearly()) {
          <ng-oat-badge variant="success">Save 20%</ng-oat-badge>
        }
      </div>

      <div class="grid cols-3 w-100">
        <div class="card">
          <div class="vstack gap-3 text-center">
            <h4 class="mb-0">Free</h4>
            <div>
              <span class="text-1 font-bold">\$0</span>
              <span class="text-light">/mo</span>
            </div>
            <hr />
            <ul class="vstack gap-1 text-left unstyled">
              <li>✓ 1 project</li>
              <li>✓ 100 MB storage</li>
              <li>✓ Community support</li>
              <li class="text-light">✗ Custom domain</li>
            </ul>
            <button class="btn outline w-100">Get Started</button>
          </div>
        </div>
        <div class="card">
          <div class="vstack gap-3 text-center">
            <div class="hstack gap-2 justify-center">
              <h4 class="mb-0">Pro</h4>
              <ng-oat-badge variant="secondary">Popular</ng-oat-badge>
            </div>
            <div>
              <span class="text-1 font-bold">${{ yearly() ? '19' : '24' }}</span>
              <span class="text-light">/mo</span>
            </div>
            <hr />
            <ul class="vstack gap-1 text-left unstyled">
              <li>✓ 10 projects</li>
              <li>✓ 10 GB storage</li>
              <li>✓ Priority support</li>
              <li>✓ Custom domain</li>
            </ul>
            <button class="btn w-100">Upgrade to Pro</button>
          </div>
        </div>
        <div class="card">
          <div class="vstack gap-3 text-center">
            <h4 class="mb-0">Enterprise</h4>
            <div>
              <span class="text-1 font-bold">${{ yearly() ? '79' : '99' }}</span>
              <span class="text-light">/mo</span>
            </div>
            <hr />
            <ul class="vstack gap-1 text-left unstyled">
              <li>✓ Unlimited projects</li>
              <li>✓ 1 TB storage</li>
              <li>✓ Dedicated support</li>
              <li>✓ Advanced analytics</li>
            </ul>
            <button class="btn outline w-100">Contact Sales</button>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class PricingComponent {
  yearly = signal(false);
}