console/app/components/showcase/PricingPlan.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script setup lang="ts">
const variants = ['solid', 'outline', 'soft', 'subtle'] as const

const freePlanFeatures = [
  { title: '1 active agent', icon: 'i-material-symbols-check-circle-outline' },
  { title: '5 concurrent sessions', icon: 'i-material-symbols-check-circle-outline' },
  { title: '10k events / month', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Community support', icon: 'i-material-symbols-check-circle-outline' },
]

const proPlanFeatures = [
  { title: 'Unlimited agents', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Unlimited sessions', icon: 'i-material-symbols-check-circle-outline' },
  { title: '5M events / month', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Trace & replay tooling', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Lease auto-renewal', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Priority support', icon: 'i-material-symbols-check-circle-outline' },
]

const enterprisePlanFeatures = [
  { title: 'Custom runtime quotas', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Dedicated job scheduler', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Unlimited event volume', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'SSO & audit logs', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'SLA guarantee', icon: 'i-material-symbols-check-circle-outline' },
  { title: 'Dedicated support channel', icon: 'i-material-symbols-check-circle-outline' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 w-full">
        <UPricingPlan
          v-for="v in variants"
          :key="v"
          :variant="v"
          :title="v"
          description="Agent runtime plan."
          price="$49"
          billing-cycle="/month"
          :button="{ label: 'Get started', color: 'primary' }"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Highlighted & Scaled">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 w-full items-center">
        <UPricingPlan
          title="Free"
          description="Explore the ARCP runtime at no cost."
          price="$0"
          billing-cycle="/month"
          :features="freePlanFeatures"
          :button="{ label: 'Start free', color: 'neutral', variant: 'outline' }"
          terms="No credit card required"
        />

        <UPricingPlan
          title="Pro"
          description="Full access to the ARCP agent runtime."
          price="$49"
          billing-cycle="/month"
          billing-period="billed annually"
          :features="proPlanFeatures"
          :button="{ label: 'Upgrade to Pro', color: 'primary' }"
          badge="Most popular"
          terms="Cancel any time"
          highlight
          scale
        />

        <UPricingPlan
          title="Enterprise"
          description="Dedicated runtime infrastructure for teams."
          price="Custom"
          :features="enterprisePlanFeatures"
          :button="{ label: 'Contact sales', color: 'neutral', variant: 'outline' }"
          terms="Volume discounts available"
        />
      </div>
    </GallerySection>

    <GallerySection title="With Discount">
      <div class="max-w-sm w-full">
        <UPricingPlan
          title="Pro — Annual"
          description="Save 30% by committing to an annual ARCP runtime subscription."
          price="$69"
          discount="$49"
          billing-cycle="/month"
          billing-period="billed annually"
          tagline="Save $240 per year"
          :features="proPlanFeatures"
          :button="{ label: 'Claim discount', color: 'primary', icon: 'i-material-symbols-bolt-outline' }"
          terms="Locked in for 12 months"
          highlight
        />
      </div>
    </GallerySection>

    <GallerySection title="Horizontal Layout">
      <div class="w-full">
        <UPricingPlan
          orientation="horizontal"
          title="Enterprise Runtime"
          description="Purpose-built for high-throughput agent workloads. Deploy across multiple regions with dedicated scheduling, unlimited leases, and 24/7 runtime observability."
          price="Custom"
          billing-period="tailored to your workload"
          :features="enterprisePlanFeatures"
          :button="{ label: 'Talk to our team', color: 'primary', icon: 'i-material-symbols-support-agent-outline', block: true }"
          tagline="Designed for production-grade agent pipelines"
          terms="SLA and compliance documentation available on request"
          variant="subtle"
        />
      </div>
    </GallerySection>
  </div>
</template>