Pricing Enterprise Sla Card

blockpricing

Enterprise contract specification block detailing 99.999% SLA metrics, SOC2/HIPAA compliance, and dedicated VPC architecture.

Installation

$pnpm dlx uipkge-ng@latest add pricing-enterprise-sla-card

$npx uipkge-ng@latest add pricing-enterprise-sla-card

$yarn dlx uipkge-ng@latest add pricing-enterprise-sla-card

$bunx uipkge-ng@latest add pricing-enterprise-sla-card

Manifest:https://uipkge.dev/r/angular/pricing-enterprise-sla-card.jsonInstalls to:src/app/components/blocks/pricing-enterprise-sla-card/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

SlaGuarantee

interface SlaGuarantee {
  title: string
  metric: string
  description: string
  icon: string
}

ComplianceCert

interface ComplianceCert {
  id: string
  name: string
  status: string
  badgeVariant?: 'default' | 'outline' | 'secondary'
}

npm dependencies

lucide-angular

Includes

badge button

Used by

pricing

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

src/app/components/blocks/pricing-enterprise-sla-card/pricing-enterprise-sla-card.component.ts11 kB

// Enterprise contract specification block: 99.999% SLA metrics, SOC2/HIPAA compliance
// badges, and a private-deployment consultation card with a meeting-request action.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'
import { ArrowRight, Building2, Calendar, CheckCircle2, Lock, LucideAngularModule, Server } from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'

export interface SlaGuarantee {
  title: string
  metric: string
  description: string
  icon: string
}

export interface ComplianceCert {
  id: string
  name: string
  status: string
  badgeVariant?: 'default' | 'outline' | 'secondary'
}

const DEFAULT_GUARANTEES: SlaGuarantee[] = [
  {
    title: 'High-Availability SLA',
    metric: '99.999%',
    description: 'Financial penalty-backed monthly uptime commitment across multi-region clusters.',
    icon: 'ShieldCheck',
  },
  {
    title: 'P1 Incident Response',
    metric: '< 15 mins',
    description: 'Direct paging to designated Staff Infrastructure Commanders 24/7/365.',
    icon: 'Headphones',
  },
  {
    title: 'Global Edge TTFB',
    metric: '< 12ms',
    description: 'Sub-15ms Time-To-First-Byte guaranteed via Anycast network mesh.',
    icon: 'Zap',
  },
  {
    title: 'Custom Legal & DPA',
    metric: 'Bespoke',
    description: 'Dedicated legal counsel review, redline allowances, and customized BAAs.',
    icon: 'Scale',
  },
]

const DEFAULT_CERTS: ComplianceCert[] = [
  { id: 'soc2', name: 'SOC 2 Type II Certified', status: 'Continuous Audit' },
  { id: 'hipaa', name: 'HIPAA Compliant BAA', status: 'Available' },
  { id: 'iso27001', name: 'ISO/IEC 27001:2022', status: 'Certified' },
  { id: 'gdpr', name: 'GDPR & CCPA Verified', status: 'Compliant' },
  { id: 'fedramp', name: 'FedRAMP In-Process', status: 'High Baseline' },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-pricing-enterprise-sla-card, [ui-pricing-enterprise-sla-card]',
  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],
  template: `
    <section data-slot="pricing-enterprise-sla-card" [class]="rootClass">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="mx-auto max-w-3xl space-y-4 text-center">
          <a
            href="#enterprise-contract"
            class="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
          >
            <lucide-icon [img]="Building2" class="text-primary size-3.5" />
            <span>Enterprise Custom Contracting</span>
            <lucide-icon
              [img]="ArrowRight"
              class="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5"
            />
          </a>

          <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
            {{ title() }}
          </h2>

          <p class="text-muted-foreground text-base sm:text-lg">
            {{ description() }}
          </p>
        </div>

        <!-- Main Enterprise Showcase Container -->
        <div class="border-border bg-card mt-12 overflow-hidden rounded-2xl border shadow-sm">
          <div class="divide-border grid grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0">
            <!-- Left: SLA Guarantees & Contractual Commitments (7 Cols) -->
            <div class="space-y-8 p-8 lg:col-span-7">
              <div class="space-y-1">
                <div class="text-primary text-xs font-bold tracking-wider uppercase">Service Level Agreement</div>
                <h3 class="text-foreground text-xl font-bold">Penalty-Backed Contractual Metrics</h3>
                <p class="text-muted-foreground text-xs">
                  Every commitment is codified into your master service agreement with direct financial remedies.
                </p>
              </div>

              <!-- Guarantees 2x2 Grid -->
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @for (item of activeGuarantees(); track item.title) {
                  <div class="border-border bg-muted/20 space-y-2 rounded-xl border p-4">
                    <div class="flex items-center justify-between">
                      <span class="text-foreground text-xs font-bold">{{ item.title }}</span>
                      <span class="text-primary font-mono text-xs font-bold">{{ item.metric }}</span>
                    </div>
                    <p class="text-muted-foreground text-xs leading-relaxed">
                      {{ item.description }}
                    </p>
                  </div>
                }
              </div>

              <!-- Compliance & Governance Strip -->
              <div class="space-y-3 pt-2">
                <div class="text-muted-foreground flex items-center gap-2 text-xs font-bold tracking-wider uppercase">
                  <lucide-icon [img]="Lock" class="text-primary size-3.5" />
                  <span>Security & Regulatory Attestations</span>
                </div>
                <div class="flex flex-wrap gap-2">
                  @for (cert of activeCertifications(); track cert.id) {
                    <span
                      ui-badge
                      variant="outline"
                      class="border-border bg-background text-foreground gap-1.5 px-3 py-1 text-xs font-medium"
                    >
                      <lucide-icon [img]="CheckCircle2" class="text-success size-3" />
                      <span>{{ cert.name }}</span>
                      <span class="text-muted-foreground font-mono text-xs">({{ cert.status }})</span>
                    </span>
                  }
                </div>
              </div>
            </div>

            <!-- Right: Direct Enterprise Solution Consultation Card (5 Cols) -->
            <div class="bg-muted/30 flex flex-col justify-between space-y-6 p-8 lg:col-span-5">
              <div class="space-y-4">
                <div class="border-border flex items-center justify-between border-b pb-3">
                  <div class="flex items-center gap-2">
                    <lucide-icon [img]="Server" class="text-primary size-4" />
                    <span class="text-foreground text-sm font-semibold">Custom Private Deployment</span>
                  </div>
                  <span
                    ui-badge
                    variant="outline"
                    class="border-success/30 bg-success/10 text-success font-mono text-xs"
                  >
                    Tailored
                  </span>
                </div>

                <div class="space-y-2.5">
                  <div class="text-foreground text-xs font-bold">Included with Custom Tier:</div>
                  <ul class="text-muted-foreground space-y-2 text-xs">
                    <li class="flex items-center gap-2">
                      <lucide-icon [img]="CheckCircle2" class="text-success size-3.5 shrink-0" />
                      <span>Dedicated AWS / GCP VPC peering or self-hosted air-gap</span>
                    </li>
                    <li class="flex items-center gap-2">
                      <lucide-icon [img]="CheckCircle2" class="text-success size-3.5 shrink-0" />
                      <span>Custom SAML 2.0 / Okta / Azure AD SCIM provisioning</span>
                    </li>
                    <li class="flex items-center gap-2">
                      <lucide-icon [img]="CheckCircle2" class="text-success size-3.5 shrink-0" />
                      <span>Dedicated Solution Architect & design system migration team</span>
                    </li>
                    <li class="flex items-center gap-2">
                      <lucide-icon [img]="CheckCircle2" class="text-success size-3.5 shrink-0" />
                      <span>Invoiced payment via ACH, Wire Transfer, or AWS Marketplace</span>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Action Block -->
              <div class="border-border space-y-3 border-t pt-4">
                <button ui-button class="w-full gap-2 shadow-xs" size="lg" (click)="requestMeeting()">
                  <lucide-icon [img]="Calendar" class="size-4" />
                  <span>{{
                    isMeetingRequested() ? 'Direct Routing to Architect...' : 'Book Enterprise Technical Review'
                  }}</span>
                </button>
                <div class="text-muted-foreground text-center text-xs">
                  Average executive response time: <strong>under 20 minutes</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
})
export class UiPricingEnterpriseSlaCardComponent {
  protected readonly ArrowRight = ArrowRight
  protected readonly Building2 = Building2
  protected readonly Calendar = Calendar
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Lock = Lock
  protected readonly Server = Server

  @Input('title') set titleInput(v: string) {
    if (v !== undefined) this.titleSignal.set(v)
  }
  @Input('description') set descriptionInput(v: string) {
    if (v !== undefined) this.descriptionSignal.set(v)
  }
  @Input('guarantees') set guaranteesInput(v: SlaGuarantee[] | undefined) {
    this.guaranteesSignal.set(v)
  }
  @Input('certifications') set certificationsInput(v: ComplianceCert[] | undefined) {
    this.certificationsSignal.set(v)
  }
  @Input('class') className?: string

  private readonly titleSignal = signal('Mission-critical infrastructure with contractual legal guarantees.')
  private readonly descriptionSignal = signal(
    'Tailored enterprise licensing, custom security reviews, isolated VPC deployments, and white-glove migration engineering.',
  )
  private readonly guaranteesSignal = signal<SlaGuarantee[] | undefined>(undefined)
  private readonly certificationsSignal = signal<ComplianceCert[] | undefined>(undefined)

  readonly title = computed(() => this.titleSignal())
  readonly description = computed(() => this.descriptionSignal())
  readonly activeGuarantees = computed(() => this.guaranteesSignal() ?? DEFAULT_GUARANTEES)
  readonly activeCertifications = computed(() => this.certificationsSignal() ?? DEFAULT_CERTS)

  readonly isMeetingRequested = signal(false)
  private meetingTimer: ReturnType<typeof setTimeout> | undefined

  constructor() {
    inject(DestroyRef).onDestroy(() => clearTimeout(this.meetingTimer))
  }

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)
  }

  requestMeeting(): void {
    this.isMeetingRequested.set(true)
    clearTimeout(this.meetingTimer)
    this.meetingTimer = setTimeout(() => {
      this.isMeetingRequested.set(false)
    }, 3000)
  }
}

src/app/components/blocks/pricing-enterprise-sla-card/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/pricing-enterprise-sla-card.json

Change language