{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-table-04","type":"registry:component","title":"Pricing Table 04","description":"Sale-focused pricing table with promotional badges, original/sale price display, and customizable bottom features section. Perfect for product launches, seasonal sales, software licenses, and online courses. Features flexible pricing periods, promotional badges, and trust-building bottom features.","dependencies":["lucide-react"],"registryDependencies":["button","card","badge"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/pricing/pricing-table-04.tsx","content":"\"use client\";\n\nimport { Check, CreditCard, Gift, type LucideIcon, Star } 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 PricingProduct04 {\n  name: string;\n  description: string;\n  originalPrice: number;\n  salePrice: number;\n  period: string;\n  features: string[];\n  badge?: string | null;\n  onSale?: boolean;\n}\n\nexport interface BottomFeature {\n  icon: LucideIcon;\n  iconColor: string;\n  iconBgColor: string;\n  title: string;\n  description: string;\n}\n\nexport interface PricingTable04Props {\n  className?: string;\n}\n\nconst products: PricingProduct04[] = [\n  {\n    name: \"Free\",\n    description: \"Basic features at no cost\",\n    originalPrice: 0,\n    salePrice: 0,\n    period: \"forever\",\n    features: [\n      \"Core functionality\",\n      \"Limited storage\",\n      \"Basic support\",\n      \"Ads included\",\n    ],\n    badge: null,\n    onSale: false,\n  },\n  {\n    name: \"Premium\",\n    description: \"Unlock all features\",\n    originalPrice: 9.99,\n    salePrice: 4.99,\n    period: \"month\",\n    features: [\n      \"All premium features\",\n      \"Unlimited storage\",\n      \"Priority support\",\n      \"No ads\",\n      \"Offline access\",\n      \"Advanced customization\",\n    ],\n    badge: \"50% Off\",\n    onSale: true,\n  },\n  {\n    name: \"Lifetime\",\n    description: \"Pay once, use forever\",\n    originalPrice: 199,\n    salePrice: 99,\n    period: \"lifetime\",\n    features: [\n      \"Everything in Premium\",\n      \"Lifetime updates\",\n      \"VIP support\",\n      \"Beta access\",\n      \"Exclusive content\",\n    ],\n    badge: \"Limited Time\",\n    onSale: true,\n  },\n];\n\nconst bottomFeatures: BottomFeature[] = [\n  {\n    icon: Check,\n    iconColor: \"text-green-600\",\n    iconBgColor: \"bg-green-100 dark:bg-green-900/20\",\n    title: \"30-Day Money Back\",\n    description: \"Full refund if not satisfied\",\n  },\n  {\n    icon: CreditCard,\n    iconColor: \"text-blue-600\",\n    iconBgColor: \"bg-blue-100 dark:bg-blue-900/20\",\n    title: \"Secure Payment\",\n    description: \"256-bit SSL encryption\",\n  },\n  {\n    icon: Star,\n    iconColor: \"text-purple-600\",\n    iconBgColor: \"bg-purple-100 dark:bg-purple-900/20\",\n    title: \"24/7 Support\",\n    description: \"Always here to help\",\n  },\n];\n\nconst content = {\n  title: \"Choose your perfect plan\",\n  subtitle:\n    \"Flexible pricing options for every need. From individuals to enterprises.\",\n  headerBadgeText: \"Limited Time Offer - Up to 50% Off\",\n  headerBadgeIcon: Gift,\n  showBottomFeatures: true,\n  showBottomCta: true,\n  bottomCtaPrimary: \"Compare All Features\",\n  bottomCtaSecondary: \"Contact Sales Team\",\n};\n\nconst sectionPadding = \"py-12 sm:py-16 lg:py-20\";\n\nexport function PricingTable04({ className }: PricingTable04Props) {\n  const HeaderBadgeIcon = content.headerBadgeIcon;\n\n  const handleProductSelect = (product: PricingProduct04) => {\n    console.log(\"Product selected:\", product);\n  };\n\n  const handleCompareClick = () => {\n    console.log(\"Compare clicked\");\n  };\n\n  const handleContactSalesClick = () => {\n    console.log(\"Contact sales clicked\");\n  };\n\n  const getBadgeVariant = (badge: string | null) => {\n    if (!badge) return \"secondary\";\n    if (badge.includes(\"Popular\") || badge.includes(\"Best\")) return \"default\";\n    if (badge.includes(\"New\") || badge.includes(\"Limited\"))\n      return \"destructive\";\n    return \"secondary\";\n  };\n\n  const isHighlighted = (product: PricingProduct04) => {\n    return (\n      product.badge === \"Popular\" ||\n      product.badge === \"Best Value\" ||\n      product.badge === \"Recommended\"\n    );\n  };\n\n  const formatPrice = (product: PricingProduct04) => {\n    const displayPrice = product.salePrice;\n    const originalPrice = product.originalPrice;\n\n    if (product.onSale && originalPrice !== displayPrice) {\n      return (\n        <div className=\"space-y-1\">\n          <div className=\"text-lg text-muted-foreground line-through\">\n            ${originalPrice}\n          </div>\n          <div>\n            <span className=\"text-4xl sm:text-5xl font-bold text-primary\">\n              ${displayPrice}\n            </span>\n            {product.period !== \"one-time\" &&\n              product.period !== \"forever\" &&\n              product.period !== \"lifetime\" && (\n                <span className=\"text-muted-foreground ml-1\">\n                  /{product.period}\n                </span>\n              )}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div>\n        <span className=\"text-4xl sm:text-5xl font-bold\">\n          {displayPrice === 0 ? \"Free\" : `$${displayPrice}`}\n        </span>\n        {product.period !== \"one-time\" &&\n          product.period !== \"forever\" &&\n          product.period !== \"lifetime\" &&\n          displayPrice !== 0 && (\n            <span className=\"text-muted-foreground ml-1\">\n              /{product.period}\n            </span>\n          )}\n      </div>\n    );\n  };\n\n  const getPeriodDescription = (period: string) => {\n    if (period === \"one-time\") return \"One-time payment\";\n    if (period === \"lifetime\") return \"Lifetime access\";\n    return null;\n  };\n\n  const getButtonText = (product: PricingProduct04) => {\n    return product.salePrice === 0 ? \"Get Started Free\" : \"Choose Plan\";\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          {content.headerBadgeText && (\n            <div className=\"flex justify-center mb-4\">\n              <Badge variant=\"secondary\" className=\"text-sm px-3 py-1\">\n                <HeaderBadgeIcon className=\"h-4 w-4 mr-1\" />\n                {content.headerBadgeText}\n              </Badge>\n            </div>\n          )}\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        {/* Product Cards */}\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8\">\n          {products.map((product) => (\n            <Card\n              key={product.name}\n              className={`relative flex flex-col ${\n                isHighlighted(product)\n                  ? \"border-primary shadow-lg scale-105\"\n                  : \"border-border\"\n              }`}\n            >\n              {product.badge && (\n                <Badge\n                  className=\"absolute -top-3 left-1/2 -translate-x-1/2\"\n                  variant={getBadgeVariant(product.badge)}\n                >\n                  {product.badge}\n                </Badge>\n              )}\n\n              <CardHeader className=\"text-center pb-6\">\n                <CardTitle className=\"text-xl font-semibold\">\n                  {product.name}\n                </CardTitle>\n                <CardDescription className=\"text-sm text-muted-foreground mt-2\">\n                  {product.description}\n                </CardDescription>\n                <div className=\"mt-4\">\n                  {formatPrice(product)}\n                  {getPeriodDescription(product.period) && (\n                    <div className=\"text-sm text-muted-foreground mt-1\">\n                      {getPeriodDescription(product.period)}\n                    </div>\n                  )}\n                </div>\n              </CardHeader>\n\n              <CardContent className=\"flex-1\">\n                <ul className=\"space-y-3\">\n                  {product.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                </ul>\n              </CardContent>\n\n              <CardFooter>\n                <Button\n                  className={`w-full ${\n                    isHighlighted(product)\n                      ? \"bg-primary hover:bg-primary/90\"\n                      : \"bg-secondary hover:bg-secondary/80\"\n                  }`}\n                  variant={isHighlighted(product) ? \"default\" : \"secondary\"}\n                  onClick={() => handleProductSelect(product)}\n                >\n                  {getButtonText(product)}\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n\n        {/* Bottom Features */}\n        {content.showBottomFeatures && (\n          <div className=\"mt-12 lg:mt-16 text-center\">\n            <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto mb-8\">\n              {bottomFeatures.map((feature, index) => {\n                const Icon = feature.icon;\n                return (\n                  <div\n                    key={index}\n                    className=\"flex flex-col items-center space-y-2\"\n                  >\n                    <div className={`p-2 rounded-lg ${feature.iconBgColor}`}>\n                      <Icon className={`h-5 w-5 ${feature.iconColor}`} />\n                    </div>\n                    <h3 className=\"font-semibold\">{feature.title}</h3>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {feature.description}\n                    </p>\n                  </div>\n                );\n              })}\n            </div>\n\n            {content.showBottomCta && (\n              <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center\">\n                <Button\n                  variant=\"outline\"\n                  size=\"lg\"\n                  onClick={handleCompareClick}\n                >\n                  {content.bottomCtaPrimary}\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"lg\"\n                  onClick={handleContactSalesClick}\n                >\n                  {content.bottomCtaSecondary}\n                </Button>\n              </div>\n            )}\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"}]}