4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T1bf5,import { Check, Minus } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { Section, SectionHeader } from "@/registry/balick/ui/section" const header = { eyebrow: "Compare plans", title: "Every feature, side by side.", description: "Start free and upgrade when you need to. Every plan includes the core platform.", } const plans = [ { name: "Hobby", price: "$0", period: "forever", cta: { label: "Start for free", href: "#" } }, { name: "Pro", price: "$20", period: "per user / month", cta: { label: "Start free trial", href: "#" }, featured: true, }, { name: "Enterprise", price: "Custom", period: "billed yearly", cta: { label: "Contact sales", href: "#" } }, ] /** true: included, false: not included, string: included with this limit. */ type Value = boolean | string const groups: { name: string; features: { name: string; values: Value[] }[] }[] = [ { name: "Platform", features: [ { name: "Projects", values: ["3", "Unlimited", "Unlimited"] }, { name: "Preview deployments", values: [true, true, true] }, { name: "Custom domains", values: ["1", "50", "Unlimited"] }, { name: "Build minutes", values: ["100 / month", "6,000 / month", "Custom"] }, ], }, { name: "Collaboration", features: [ { name: "Team members", values: ["1", "Up to 20", "Unlimited"] }, { name: "Comments on previews", values: [false, true, true] }, { name: "Roles and permissions", values: [false, true, true] }, ], }, { name: "Security and support", features: [ { name: "SSO (SAML)", values: [false, false, true] }, { name: "Audit logs", values: [false, "30 days", "Unlimited"] }, { name: "Uptime SLA", values: [false, false, "99.99%"] }, { name: "Support", values: ["Community", "Email", "Dedicated"] }, ], }, ] function Cell({ value }: { value: Value }) { if (value === true) { return ( <> Included ) } if (value === false) { return ( <> Not included ) } return <>{value} } export function Pricing03({ id = "pricing" }: { id?: string }) { return (

{/* Small screens get one card per plan; the table needs room for every column. */}

{plans.map((plan, planIndex) => (

{plan.name} {plan.featured && ( Popular )}

{plan.price} {plan.period}

{groups.map((group) => (

{group.name}

{feature.name}

))}

{plans.map((plan) => ( ))} ))} {groups.map((group) => ( {group.features.map((feature) => ( {feature.values.map((value, index) => ( ))} ))} ))}

Plan comparison
{group.name}
{plans.map((plan) => (	{plan.name} {plan.featured && ( Popular )} {plan.price} {plan.period}
{feature.name}

) } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@balick","registryDependencies":["button","https://ui.balick.me/r/section.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/balick/blocks/pricing-03/pricing-03.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]