Pricing — Single Plan

Installation

Variants

Used by

Files installed (2)

• src/app/components/blocks/pricing-single-plan/pricing-single-plan.component.ts4.7 kB

  Copy

  // One-plan pricing section stating the price, what is included, what is explicitly
  // not, and the usage line at which a conversation becomes worthwhile.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, Check, LucideAngularModule, X } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  const included = [
    'Unlimited certified metric definitions',
    'Unlimited viewers and editors',
    'Row-level access from your identity provider',
    'Query budgets enforced per team',
    'Audit log export, 7-year retention',
    'SOC 2 report under NDA',
  ]
  
  // Naming exclusions is what makes a single plan credible. A list of only
  // inclusions invites the reader to assume the gap is hidden somewhere.
  const excluded = [
    'On-premise deployment behind your firewall',
    'Custom SLAs below 99.9%',
    'Professional services beyond the five-week rollout',
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-pricing-single-plan, [ui-pricing-single-plan]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="pricing-single-plan" [class]="rootClass">
        <div class="mx-auto max-w-3xl px-6 py-20 lg:py-28">
          <div class="text-center">
            <span ui-badge variant="secondary">Pricing</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">One plan, one number</h2>
            <p class="text-muted-foreground mt-3 text-lg">
              No seat maths and no feature gates. The only thing that scales is query volume.
            </p>
          </div>
  
          <div ui-card class="mt-10">
            <div ui-card-content class="p-8">
              <div class="flex flex-wrap items-baseline gap-3">
                <span class="font-display text-4xl font-bold tracking-tight">£1,400</span>
                <span class="text-muted-foreground">per month, billed annually</span>
              </div>
              <p class="text-muted-foreground mt-2 text-sm">
                Includes 2 million queries a month. Beyond that it is £0.0004 per query, capped by your own budgets.
              </p>
  
              <button ui-button size="lg" class="mt-6 w-full sm:w-auto">
                Start the 30-day trial
                <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
              </button>
  
              <ui-separator class="my-8" />
  
              <p class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Included</p>
              <ul class="mt-3 grid gap-2.5 sm:grid-cols-2">
                @for (item of included; track item) {
                  <li class="flex items-start gap-2.5 text-sm">
                    <lucide-icon [img]="Check" class="text-success mt-0.5 size-4 shrink-0" aria-hidden="true" />
                    <span>{{ item }}</span>
                  </li>
                }
              </ul>
  
              <ui-separator class="my-6" />
  
              <p class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Not included</p>
              <ul class="mt-3 space-y-2.5">
                @for (item of excluded; track item) {
                  <li class="flex items-start gap-2.5 text-sm">
                    <lucide-icon [img]="X" class="text-muted-foreground/50 mt-0.5 size-4 shrink-0" aria-hidden="true" />
                    <span class="text-muted-foreground">{{ item }}</span>
                  </li>
                }
              </ul>
  
              <ui-separator class="my-6" />
  
              <p class="text-muted-foreground text-sm leading-relaxed">
                Past roughly 20 million queries a month, or if any of the exclusions above are hard requirements, a
                conversation will get you a better answer than this page can.
              </p>
              <button ui-button variant="outline" class="mt-4">Talk to us instead</button>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiPricingSinglePlanComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly Check = Check
    protected readonly X = X
  
    readonly included = included
    readonly excluded = excluded
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/pricing-single-plan/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/pricing-single-plan.json