61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T5286,'use client' import * as React from 'react' import { ArrowRight, Check, HardDrive, Headphones, KeyRound, ShieldCheck, Users, Zap } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { Slider } from '@/components/ui/slider' import { Switch } from '@/components/ui/switch' interface RequestTier { label: string requests: number cost: number } interface StorageTier { label: string gb: number cost: number } const REQUEST_TIERS: RequestTier[] = [ { label: '10K requests', requests: 10_000, cost: 0 }, { label: '50K requests', requests: 50_000, cost: 25 }, { label: '100K requests', requests: 100_000, cost: 60 }, { label: '250K requests', requests: 250_000, cost: 120 }, { label: '500K requests', requests: 500_000, cost: 220 }, { label: '1M requests', requests: 1_000_000, cost: 400 }, { label: '2.5M requests', requests: 2_500_000, cost: 750 }, { label: '5M requests', requests: 5_000_000, cost: 1200 }, ] const STORAGE_TIERS: StorageTier[] = [ { label: '100 GB', gb: 100, cost: 10 }, { label: '250 GB', gb: 250, cost: 25 }, { label: '500 GB', gb: 500, cost: 45 }, { label: '1 TB', gb: 1_000, cost: 80 }, { label: '2 TB', gb: 2_000, cost: 150 }, { label: '5 TB', gb: 5_000, cost: 320 }, { label: '10 TB', gb: 10_000, cost: 580 }, ] const SEAT_PRICE = 15 const SUPPORT_MANAGER_PRICE = 200 const CUSTOM_SLA_PRICE = 500 const SSO_PRICE = 100 const SEAT_MARKS = { 1: '1', 25: '25', 50: '50', 75: '75', 100: '100', } const REQUEST_MARKS = { 0: '10K', 2: '100K', 4: '500K', 7: '5M', } const STORAGE_MARKS = { 0: '100 GB', 2: '500 GB', 4: '2 TB', 6: '10 TB', } export function PricingCalculator({ className }: { className?: string }) { const [isAnnual, setIsAnnual] = React.useState(true) const [seats, setSeats] = React.useState(12) const [requestIndex, setRequestIndex] = React.useState(2) const [storageIndex, setStorageIndex] = React.useState(2) const [addonSupport, setAddonSupport] = React.useState(false) const [addonSla, setAddonSla] = React.useState(false) const [addonSso, setAddonSso] = React.useState(true) const currentRequestTier = REQUEST_TIERS[requestIndex] ?? REQUEST_TIERS[0] const currentStorageTier = STORAGE_TIERS[storageIndex] ?? STORAGE_TIERS[0] const seatTier = React.useMemo(() => { if (seats <= 5) return { label: 'Starter Team', variant: 'secondary' as const } if (seats <= 25) return { label: 'Growth Team', variant: 'outline' as const } return { label: 'Scale Team', variant: 'default' as const } }, [seats]) const recommendedPlan = React.useMemo(() => { if (addonSla || requestIndex >= 6 || storageIndex >= 5 || seats >= 30) { return { name: 'Enterprise', badge: 'Enterprise Plan', baseFee: 199, variant: 'default' as const } } if (seats >= 8 || requestIndex >= 3 || storageIndex >= 3 || addonSupport) { return { name: 'Growth', badge: 'Growth Plan', baseFee: 79, variant: 'default' as const } } return { name: 'Starter', badge: 'Starter Plan', baseFee: 29, variant: 'secondary' as const } }, [addonSla, requestIndex, storageIndex, seats, addonSupport]) const baseCost = recommendedPlan.baseFee const seatsCost = seats * SEAT_PRICE const requestsCost = currentRequestTier.cost const storageCost = currentStorageTier.cost const addonsCost = (addonSupport ? SUPPORT_MANAGER_PRICE : 0) + (addonSla ? CUSTOM_SLA_PRICE : 0) + (addonSso ? SSO_PRICE : 0) const activeAddonsCount = (addonSupport ? 1 : 0) + (addonSla ? 1 : 0) + (addonSso ? 1 : 0) const subtotalMonthly = baseCost + seatsCost + requestsCost + storageCost + addonsCost const discountMultiplier = isAnnual ? 0.8 : 1.0 const totalMonthly = Math.round(subtotalMonthly * discountMultiplier) const totalAnnual = totalMonthly * 12 const annualSavings = Math.round(subtotalMonthly * 0.2 * 12) return (

Pricing Calculator

Interactive Pricing Calculator

Calculate your exact monthly or annual investment based on usage.

Monthly Pay Annually Save 20%

Capacity & Scale Configure team seats, API request throughput, and dedicated storage.

Team Seats {seatTier.label}

{seats} seats (${seats * SEAT_PRICE}/mo)

`${val} seats`} onValueChange={(val) => setSeats(val[0])} />

Full workspace access, fine-grained permission controls, and audit log tracking for each member.

Monthly API Requests

{currentRequestTier.label} {' '} ({currentRequestTier.cost === 0 ? 'Included' : `+$${currentRequestTier.cost}/mo`})

REQUEST_TIERS[idx]?.label ?? ''} onValueChange={(val) => setRequestIndex(val[0])} />

Globally distributed edge endpoints, automatic rate limiting, and sub-50ms p99 latency SLA.

Dedicated Cloud Storage

{currentStorageTier.label} (+${currentStorageTier.cost}/mo)

STORAGE_TIERS[idx]?.label ?? ''} onValueChange={(val) => setStorageIndex(val[0])} />

Encrypted at rest (AES-256) with multi-region automated replication and daily disaster backups.

Enterprise Add-ons Enhance your infrastructure with enterprise compliance, reliability, and support.

Dedicated Support Manager +$200/mo

Direct Slack channel, named technical account manager & 1-hour response SLA.

Custom SLA Guarantee +$500/mo

99.99% uptime guarantee with financial commitments and priority disaster recovery.

Single Sign-On (SSO / SAML) +$100/mo

Okta, Azure AD, Google Workspace, and SAML 2.0 enterprise identity integration.

Estimated Investment {recommendedPlan.name === 'Enterprise' && } {recommendedPlan.badge}

${totalMonthly} / month

{isAnnual ? (

Billed annually (${totalAnnual.toLocaleString('en-US')}/yr) · {' '} Save ${annualSavings.toLocaleString('en-US')}/yr

) : (

Billed monthly · Switch to annual to save 20% (${annualSavings.toLocaleString('en-US')}/yr)

)}

Base platform ({recommendedPlan.name}) ${isAnnual ? Math.round(baseCost * 0.8) : baseCost}/mo

Team seats ({seats} × ${SEAT_PRICE}) ${isAnnual ? Math.round(seatsCost * 0.8) : seatsCost}/mo

API throughput ({currentRequestTier.label}) {requestsCost === 0 ? 'Included' : `$${isAnnual ? Math.round(requestsCost * 0.8) : requestsCost}/mo`}

Cloud storage ({currentStorageTier.label}) ${isAnnual ? Math.round(storageCost * 0.8) : storageCost}/mo

Add-ons ({activeAddonsCount} active) {addonsCost === 0 ? '$0/mo' : `$${isAnnual ? Math.round(addonsCost * 0.8) : addonsCost}/mo`}

{isAnnual && (

Annual discount applied 20% off

)}

14-day fully featured free trial
No credit card required upfront
Zero-downtime migration assistance

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/slider.json","https://uipkge.dev/r/react/switch.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/pricing-calculator/PricingCalculator.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/PricingCalculator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]