{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-pricing-block-baseui",
  "type": "registry:block",
  "title": "Glassmorphism Pricing",
  "description": "Pricing cards with glassmorphism effects, hover animations, and feature lists (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/glassmorphism-pricing-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Check } from \"lucide-react\";\n\nexport function GlassmorphismPricingBlockBaseui() {\n  const plans = [\n    {\n      name: \"Starter\",\n      price: \"$29\",\n      description: \"Perfect for small teams\",\n      features: [\n        \"Up to 10 users\",\n        \"Basic analytics\",\n        \"Email support\",\n        \"1GB storage\",\n      ],\n      popular: false,\n    },\n    {\n      name: \"Pro\",\n      price: \"$99\",\n      description: \"For growing businesses\",\n      features: [\n        \"Unlimited users\",\n        \"Advanced analytics\",\n        \"Priority support\",\n        \"100GB storage\",\n        \"Custom integrations\",\n      ],\n      popular: true,\n    },\n    {\n      name: \"Enterprise\",\n      price: \"Custom\",\n      description: \"For large organizations\",\n      features: [\n        \"Unlimited everything\",\n        \"Dedicated support\",\n        \"Custom SLA\",\n        \"Unlimited storage\",\n        \"Advanced security\",\n      ],\n      popular: false,\n    },\n  ];\n\n  return (\n    <section className=\"px-6 py-32\">\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"mb-20 space-y-5 text-center\">\n          <h2 className=\"text-5xl font-bold tracking-tight md:text-6xl\">\n            Simple, transparent pricing\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl\">\n            Choose the plan that's right for your team\n          </p>\n        </div>\n\n        <div className=\"grid items-start gap-8 md:grid-cols-3\">\n          {plans.map((plan, index) => (\n            <div\n              key={index}\n              className={`rounded-lg border p-10 text-card-foreground backdrop-blur-xl transition-all duration-500 hover:-translate-y-1 ${\n                plan.popular\n                  ? \"border-border bg-background shadow-2xl md:scale-105\"\n                  : \"border-border/50 bg-background/50 hover:border-border\"\n              }`}\n            >\n              {plan.popular && (\n                <div className=\"mb-6 inline-block rounded-full bg-foreground px-3 py-1 text-xs font-semibold tracking-wide text-background\">\n                  MOST POPULAR\n                </div>\n              )}\n              <h3 className=\"mb-3 text-2xl font-bold tracking-tight\">\n                {plan.name}\n              </h3>\n              <div className=\"mb-6\">\n                <span className=\"text-5xl font-bold tracking-tight\">\n                  {plan.price}\n                </span>\n                {plan.price !== \"Custom\" && (\n                  <span className=\"text-lg text-muted-foreground\">/month</span>\n                )}\n              </div>\n              <p className=\"mb-8 text-base leading-relaxed text-muted-foreground\">\n                {plan.description}\n              </p>\n              <Button\n                className={`mb-8 inline-flex h-11 w-full items-center justify-center rounded-full text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${\n                  plan.popular\n                    ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n                    : \"border border-input bg-background hover:bg-foreground/5\"\n                }`}\n              >\n                Get Started\n              </Button>\n              <ul className=\"space-y-4\">\n                {plan.features.map((feature, i) => (\n                  <li key={i} className=\"flex items-center gap-3 text-sm\">\n                    <div className=\"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-foreground/[0.08]\">\n                      <Check className=\"h-3 w-3 text-foreground\" />\n                    </div>\n                    <span className=\"text-foreground/80\">{feature}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-pricing-block-baseui.tsx"
    }
  ]
}