Pricing Components

{
  "component": "pricing",
  "variant": "cards",
  "data": {
    "heading": "Pricing Cards",
    "subheading": "Classic three-column pricing layout",
    "plans": [
      {
        "name": "Starter",
        "price": { "monthly": 29, "annual": 290 },
        "description": "Perfect for small projects",
        "features": ["Up to 5 items", "Standard finishes", "Email support", "7-day turnaround"],
        "cta": { "text": "Get Started", "url": "#" },
        "highlighted": false
      },
      {
        "name": "Professional",
        "price": { "monthly": 79, "annual": 790 },
        "description": "For growing businesses",
        "features": ["Up to 25 items", "Premium finishes", "Priority support", "3-day turnaround", "Free collection"],
        "cta": { "text": "Start Free Trial", "url": "#" },
        "highlighted": true,
        "badge": "Most Popular"
      },
      {
        "name": "Enterprise",
        "price": { "monthly": 199, "annual": 1990 },
        "description": "For large organizations",
        "features": ["Unlimited items", "All finishes", "24/7 support", "Same-day available", "Dedicated account manager", "Custom SLA"],
        "cta": { "text": "Contact Sales", "url": "#" },
        "highlighted": false
      }
    ]
  }
}

<section class="pricing py-5">
  <div class="container">
    <!-- Pricing cards -->
  </div>
</section>

{
  "component": "pricing",
  "variant": "toggle",
  "data": {
    "heading": "With Billing Toggle",
    "subheading": "Switch between monthly and annual billing",
    "showToggle": true,
    "plans": [
      { "name": "Basic", "price": { "monthly": 19, "annual": 190 }, "features": ["Core features", "Email support"], "cta": { "text": "Select", "url": "#" } },
      { "name": "Pro", "price": { "monthly": 49, "annual": 490 }, "features": ["All Basic features", "Priority support", "Advanced features"], "cta": { "text": "Select", "url": "#" }, "highlighted": true, "badge": "Best Value" },
      { "name": "Team", "price": { "monthly": 99, "annual": 990 }, "features": ["All Pro features", "Team management", "Analytics"], "cta": { "text": "Select", "url": "#" } }
    ],
    "bg": "light"
  }
}

<section class="pricing bg-light py-5">
  <div class="container">
    <!-- Pricing with billing toggle -->
  </div>
</section>

{
  "component": "pricing",
  "variant": "table",
  "data": {
    "heading": "Comparison Table",
    "subheading": "Feature-by-feature comparison",
    "plans": [
      { "name": "Free", "price": 0, "features": ["Basic features", "Community support"], "cta": { "text": "Get Started", "url": "#" } },
      { "name": "Pro", "price": 29, "features": ["Basic features", "Community support", "Priority support", "Advanced analytics"], "cta": { "text": "Upgrade", "url": "#" }, "highlighted": true },
      { "name": "Enterprise", "price": 99, "features": ["Basic features", "Community support", "Priority support", "Advanced analytics", "Custom integrations", "SLA guarantee"], "cta": { "text": "Contact Us", "url": "#" } }
    ]
  }
}

<section class="pricing py-5">
  <div class="container">
    <!-- Pricing comparison table -->
  </div>
</section>