{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/full-width-divider"],"name":"pricing-2","description":"Grid layout pricing with full-width dividers and feature lists.","categories":["pricing"],"files":[{"path":"registry/blocks/pricing/2/pricing-section.tsx","type":"registry:component","content":"import { Button } from \"@/components/ui/button\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\ntype PricingPlan = {\n\tname: string;\n\tprice: string;\n\tperiod?: string;\n\tdescription: string;\n\thref?: string;\n\tfeaturesTitle: string;\n\tfeatures: string[];\n\tisPopular?: boolean;\n};\n\nconst pricingPlans: PricingPlan[] = [\n\t{\n\t\tname: \"STARTER\",\n\t\tprice: \"Free\",\n\t\tdescription: \"For early-stage startups\",\n\t\tfeaturesTitle: \"FREE, FOREVER:\",\n\t\tfeatures: [\n\t\t\t\"10 customers\",\n\t\t\t\"10 documents\",\n\t\t\t\"10 invoices\",\n\t\t\t\"Auto-updated taxes\",\n\t\t],\n\t\thref: \"#\",\n\t},\n\t{\n\t\tname: \"SCALE\",\n\t\tisPopular: true,\n\t\thref: \"#\",\n\t\tprice: \"$8\",\n\t\tperiod: \"month\",\n\t\tdescription: \"For fast-growing teams\",\n\t\tfeaturesTitle: \"EVERYTHING IN STARTER, PLUS:\",\n\t\tfeatures: [\n\t\t\t\"20 customers\",\n\t\t\t\"25 documents\",\n\t\t\t\"30 invoices\",\n\t\t\t\"Auto-updated taxes\",\n\t\t\t\"Cloud Sync\",\n\t\t],\n\t},\n];\n\nexport function PricingSection() {\n\treturn (\n\t\t<section className=\"mx-auto min-h-screen max-w-5xl place-content-center border-x py-4\">\n\t\t\t<div className=\"relative\">\n\t\t\t\t<FullWidthDivider position=\"top\" />\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\n\t\t\t\t<div className=\"grid grid-cols-1 gap-px bg-border md:grid-cols-2 lg:grid-cols-4\">\n\t\t\t\t\t<div className=\"flex flex-col bg-background p-8 md:col-span-2\">\n\t\t\t\t\t\t<p className=\"mb-6 text-muted-foreground text-sm uppercase tracking-wider\">\n\t\t\t\t\t\t\tPRICING\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<h1 className=\"font-bold text-3xl leading-tight md:text-5xl\">\n\t\t\t\t\t\t\tPricing that doesn't suck\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{pricingPlans.map((plan) => (\n\t\t\t\t\t\t<PricingCard key={plan.name} plan={plan} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction PricingCard({ plan }: { plan: PricingPlan }) {\n\treturn (\n\t\t<div className=\"flex flex-col bg-background *:px-4 *:py-6\">\n\t\t\t<div className=\"border-b\">\n\t\t\t\t<p className=\"mb-6 text-muted-foreground text-sm uppercase tracking-wider\">\n\t\t\t\t\t{plan.name}\n\t\t\t\t</p>\n\t\t\t\t<div className=\"mb-2 flex items-baseline gap-2\">\n\t\t\t\t\t<h2 className=\"font-bold text-4xl\">{plan.price}</h2>\n\t\t\t\t\t{plan.period && (\n\t\t\t\t\t\t<span className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t/ {plan.period}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<p className=\"mb-8 line-clamp-1 text-muted-foreground\">\n\t\t\t\t\t{plan.description}\n\t\t\t\t</p>\n\n\t\t\t\t<Button\n\t\t\t\t\tasChild\n\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\tvariant={plan.isPopular ? \"default\" : \"outline\"}\n\t\t\t\t>\n\t\t\t\t\t<a href={plan.href}>Get started</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\n\t\t\t<div className=\"space-y-3 text-muted-foreground text-sm\">\n\t\t\t\t<p className=\"mb-6 text-xs uppercase\">{plan.featuresTitle}</p>\n\n\t\t\t\t{plan.features.map((feature) => (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName=\"flex items-center gap-2 text-foreground/80\"\n\t\t\t\t\t\tkey={feature}\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\thugeicons=\"Tick02Icon\"\n\t\t\t\t\t\t\tlucide=\"CheckIcon\"\n\t\t\t\t\t\t\tphosphor=\"CheckIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiCheckLine\"\n\t\t\t\t\t\t\ttabler=\"IconCheck\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{feature}\n\t\t\t\t\t</p>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"}]}