{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-table-01","type":"registry:component","title":"Pricing Table 01","description":"A clean, modern pricing table with three tiers, popular plan highlighting, feature lists with included/excluded items, and customizable CTAs. Perfect for SaaS and subscription-based services.","dependencies":["lucide-react"],"registryDependencies":["button","card","badge"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/pricing/pricing-table-01.tsx","content":"\"use client\";\n\nimport { Check, X } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/ui/card\";\n\nexport interface PricingPlan {\n  name: string;\n  description: string;\n  price: string;\n  period: string;\n  features: string[];\n  notIncluded?: string[];\n  cta: string;\n  popular?: boolean;\n}\n\nexport interface PricingTable01Props {\n  className?: string;\n}\n\nconst plans: PricingPlan[] = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals and small projects\",\n    price: \"$9\",\n    period: \"month\",\n    features: [\n      \"Up to 5 projects\",\n      \"10GB storage\",\n      \"Basic analytics\",\n      \"Email support\",\n      \"SSL certificate\",\n    ],\n    notIncluded: [\n      \"Advanced analytics\",\n      \"Priority support\",\n      \"Custom integrations\",\n    ],\n    cta: \"Start Free Trial\",\n    popular: false,\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing businesses and teams\",\n    price: \"$29\",\n    period: \"month\",\n    features: [\n      \"Unlimited projects\",\n      \"100GB storage\",\n      \"Advanced analytics\",\n      \"Priority support\",\n      \"SSL certificate\",\n      \"Custom domain\",\n      \"Team collaboration\",\n    ],\n    notIncluded: [\"Custom integrations\"],\n    cta: \"Get Started\",\n    popular: true,\n  },\n  {\n    name: \"Enterprise\",\n    description: \"For large organizations with custom needs\",\n    price: \"$99\",\n    period: \"month\",\n    features: [\n      \"Unlimited everything\",\n      \"1TB storage\",\n      \"Advanced analytics\",\n      \"24/7 phone support\",\n      \"SSL certificate\",\n      \"Custom domain\",\n      \"Team collaboration\",\n      \"Custom integrations\",\n      \"SLA guarantee\",\n      \"Dedicated account manager\",\n    ],\n    notIncluded: [],\n    cta: \"Contact Sales\",\n    popular: false,\n  },\n];\n\nconst content = {\n  title: \"Simple, transparent pricing\",\n  subtitle:\n    \"Choose the perfect plan for your needs. Always know what you'll pay.\",\n  showBottomCta: true,\n  bottomCtaText:\n    \"All plans include a 14-day free trial. No credit card required.\",\n};\n\nconst sectionPadding = \"py-12 sm:py-16 lg:py-20\";\n\nexport function PricingTable01({ className }: PricingTable01Props) {\n  const handlePlanSelect = (plan: PricingPlan) => {\n    console.log(\"Plan selected:\", plan);\n  };\n\n  const handleFeatureComparisonClick = () => {\n    console.log(\"Feature comparison clicked\");\n  };\n\n  const handleTalkToSalesClick = () => {\n    console.log(\"Talk to sales clicked\");\n  };\n\n  return (\n    <section className={cn(sectionPadding, className)}>\n      <div className=\"container px-4 sm:px-6 lg:px-8\">\n        {/* Header */}\n        <div className=\"text-center mb-12 lg:mb-16\">\n          <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-4\">\n            {content.title}\n          </h2>\n          <p className=\"text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto\">\n            {content.subtitle}\n          </p>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 max-w-7xl mx-auto\">\n          {plans.map((plan) => (\n            <Card\n              key={plan.name}\n              className={`relative flex flex-col ${\n                plan.popular\n                  ? \"border-primary shadow-lg scale-105 lg:scale-110\"\n                  : \"border-border\"\n              }`}\n            >\n              {plan.popular && (\n                <Badge className=\"absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground\">\n                  Most Popular\n                </Badge>\n              )}\n\n              <CardHeader className=\"text-center pb-6\">\n                <CardTitle className=\"text-xl font-semibold\">\n                  {plan.name}\n                </CardTitle>\n                <CardDescription className=\"text-sm text-muted-foreground mt-2\">\n                  {plan.description}\n                </CardDescription>\n                <div className=\"mt-4\">\n                  <span className=\"text-4xl sm:text-5xl font-bold\">\n                    {plan.price}\n                  </span>\n                  <span className=\"text-muted-foreground ml-1\">\n                    /{plan.period}\n                  </span>\n                </div>\n              </CardHeader>\n\n              <CardContent className=\"flex-1\">\n                <ul className=\"space-y-3\">\n                  {plan.features.map((feature) => (\n                    <li key={feature} className=\"flex items-start space-x-3\">\n                      <Check className=\"h-4 w-4 text-green-500 mt-0.5 flex-shrink-0\" />\n                      <span className=\"text-sm\">{feature}</span>\n                    </li>\n                  ))}\n                  {plan.notIncluded?.map((feature) => (\n                    <li key={feature} className=\"flex items-start space-x-3\">\n                      <X className=\"h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0\" />\n                      <span className=\"text-sm text-muted-foreground\">\n                        {feature}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              </CardContent>\n\n              <CardFooter>\n                <Button\n                  className={`w-full ${\n                    plan.popular\n                      ? \"bg-primary hover:bg-primary/90\"\n                      : \"bg-secondary hover:bg-secondary/80\"\n                  }`}\n                  variant={plan.popular ? \"default\" : \"secondary\"}\n                  onClick={() => handlePlanSelect(plan)}\n                >\n                  {plan.cta}\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n\n        {/* Bottom CTA */}\n        {content.showBottomCta && (\n          <div className=\"text-center mt-12 lg:mt-16\">\n            <p className=\"text-muted-foreground mb-4\">\n              {content.bottomCtaText}\n            </p>\n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center\">\n              <Button variant=\"outline\" onClick={handleFeatureComparisonClick}>\n                View Feature Comparison\n              </Button>\n              <Button variant=\"ghost\" onClick={handleTalkToSalesClick}>\n                Talk to Sales\n              </Button>\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}