{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-page",
  "title": "Pricing Page",
  "description": "A modern pricing page with multiple plan tiers, billing toggle, feature comparison, FAQ section, and call-to-action buttons.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.eindev.ir/r/glass-card.json",
    "https://ui.eindev.ir/r/glass-button.json",
    "https://ui.eindev.ir/r/glass-badge.json",
    "https://ui.eindev.ir/r/glass-switch.json"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/page.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Check, Sparkles, Zap, Building2, ArrowRight } from \"lucide-react\";\nimport {\n  GlassCard,\n  GlassCardContent,\n  GlassCardDescription,\n  GlassCardHeader,\n  GlassCardTitle,\n} from \"@/registry/liquid-glass/glass-card\";\nimport { GlassButton } from \"@/registry/liquid-glass/glass-button\";\nimport { GlassBadge } from \"@/registry/liquid-glass/glass-badge\";\nimport { GlassSwitch } from \"@/registry/liquid-glass/glass-switch\";\n\nconst plans = [\n  {\n    name: \"Starter\",\n    icon: Zap,\n    price: { monthly: 29, yearly: 24 },\n    description: \"Perfect for individuals and small projects\",\n    badge: null,\n    features: [\"Up to 5 projects\", \"2GB storage\", \"Basic analytics\", \"Single user\"],\n    cta: \"Get Started\",\n    highlighted: false,\n    gradient: \"from-blue-400 to-cyan-500\",\n  },\n  {\n    name: \"Professional\",\n    icon: Sparkles,\n    price: { monthly: 79, yearly: 66 },\n    description: \"Best for growing teams and businesses\",\n    badge: \"Most Popular\",\n    features: [\n      \"Unlimited projects\",\n      \"50GB storage\",\n      \"Advanced analytics\",\n      \"Up to 10 team members\",\n      \"Custom domain\",\n      \"API access\",\n      \"Integrations\",\n    ],\n    cta: \"Subscribe Now\",\n    highlighted: true,\n    gradient: \"from-purple-400 to-pink-500\",\n  },\n  {\n    name: \"Enterprise\",\n    icon: Building2,\n    price: { monthly: null, yearly: null },\n    description: \"For large organizations with custom needs\",\n    badge: \"Custom\",\n    features: [\n      \"Everything in Professional\",\n      \"Unlimited storage\",\n      \"24/7 phone support\",\n      \"On-premise deployment\",\n      \"Security compliance\",\n    ],\n    cta: \"Contact Sales\",\n    highlighted: false,\n    gradient: \"from-orange-400 to-red-500\",\n  },\n];\n\nexport default function PricingBlockPage() {\n  const [isYearly, setIsYearly] = useState(false);\n\n  return (\n    <div className=\"min-h-full py-4 flex items-center justify-center bg-linear-to-br from-slate-950 via-purple-900 to-slate-950 px-3\">\n      <div className=\"w-full max-w-4xl mx-auto space-y-12\">\n        {/* Header */}\n        <div className=\"text-center space-y-4\">\n          <GlassBadge variant=\"default\" className=\"mb-2\">\n            <Sparkles className=\"size-3 mr-1\" /> Simple Pricing\n          </GlassBadge>\n          <h1 className=\"text-3xl lg:text-4xl font-bold text-white\">Choose Your Perfect Plan</h1>\n          <p className=\"text-lg text-white/60 max-w-2xl mx-auto\">\n            Start free and scale as you grow. All plans include core features with no hidden fees.\n          </p>\n        </div>\n\n        {/* Billing Toggle */}\n        <div className=\"flex justify-center items-center gap-4\">\n          <span\n            className={`text-sm transition-colors ${!isYearly ? \"text-white\" : \"text-white/50\"}`}\n          >\n            Monthly\n          </span>\n          <GlassSwitch checked={isYearly} onCheckedChange={setIsYearly} />\n          <span\n            className={`text-sm transition-colors ${isYearly ? \"text-white\" : \"text-white/50\"}`}\n          >\n            Yearly\n            <GlassBadge variant=\"success\" className=\"ml-2 text-xs\">\n              Save 20%\n            </GlassBadge>\n          </span>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 items-start\">\n          {plans.map((plan) => {\n            const Icon = plan.icon;\n            const price = isYearly ? plan.price.yearly : plan.price.monthly;\n\n            return (\n              <div key={plan.name} className={`relative ${plan.highlighted ? \"md:-mt-4 md:mb-4\" : \"\"}`}>\n                {plan.highlighted && (\n                  <div className=\"absolute w-full -top-3 left-3/4 -translate-x-1/2 z-10\">\n                    <GlassBadge variant=\"success\" className=\"shadow-lg shadow-green-500/20\">\n                      <Sparkles className=\"size-3 mr-1\" /> {plan.badge}\n                    </GlassBadge>\n                  </div>\n                )}\n                <GlassCard\n                  className={`h-full transition-all duration-300 hover:scale-[1.02] ${\n                    plan.highlighted ? \"ring-2 ring-cyan-400/50 shadow-xl shadow-cyan-500/10\" : \"\"\n                  }`}\n                >\n                  <GlassCardHeader className=\"text-center pb-2\">\n                    <div\n                      className={`mx-auto p-3 rounded-xl bg-linear-to-br ${plan.gradient} w-fit mb-3`}\n                    >\n                      <Icon className=\"h-6 w-6 text-white\" />\n                    </div>\n                    <GlassCardTitle className=\"text-xl\">{plan.name}</GlassCardTitle>\n                    <GlassCardDescription>{plan.description}</GlassCardDescription>\n                  </GlassCardHeader>\n                  <GlassCardContent className=\"space-y-6\">\n                    {/* Price */}\n                    <div className=\"text-center py-4 border-y border-white/10\">\n                      {price !== null ? (\n                        <>\n                          <div className=\"flex items-baseline justify-center gap-1\">\n                            <span className=\"text-4xl font-bold text-white\">${price}</span>\n                            <span className=\"text-white/60\">/month</span>\n                          </div>\n                          {isYearly && (\n                            <p className=\"text-xs text-white/50 mt-1\">\n                              Billed ${price * 12} annually\n                            </p>\n                          )}\n                        </>\n                      ) : (\n                        <p className=\"text-2xl font-bold text-white\">Custom Pricing</p>\n                      )}\n                    </div>\n\n                    {/* Features */}\n                    <div className=\"space-y-3\">\n                      {plan.features.map((feature, featureIndex) => (\n                        <div key={featureIndex} className=\"flex items-start gap-3\">\n                          <div className=\"p-0.5 rounded-full bg-linear-to-br from-cyan-400 to-blue-500 shrink-0 mt-0.5\">\n                            <Check className=\"size-3 text-white\" />\n                          </div>\n                          <span className=\"text-sm text-white/80\">{feature}</span>\n                        </div>\n                      ))}\n                    </div>\n\n                    {/* CTA Button */}\n                    <GlassButton\n                      variant={plan.highlighted ? \"primary\" : \"outline\"}\n                      className=\"w-full justify-center py-5 group\"\n                    >\n                      {plan.cta}\n                      <ArrowRight className=\"h-4 w-4 ml-2 transition-transform group-hover:translate-x-1\" />\n                    </GlassButton>\n                  </GlassCardContent>\n                </GlassCard>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/pricing/page.tsx"
    }
  ],
  "type": "registry:block"
}