{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-baseui",
  "type": "registry:page",
  "title": "Pricing Section",
  "description": "Animated pricing cards with hover effects and feature lists (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/pricing-section-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { motion, useInView, useReducedMotion } from \"framer-motion\";\nimport { Check } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nconst plans = [\n  {\n    name: \"Starter\",\n    price: \"$0\",\n    period: \"/month\",\n    description: \"Perfect for personal projects\",\n    features: [\n      \"10 Components\",\n      \"Community Support\",\n      \"Basic Animations\",\n      \"Documentation\",\n    ],\n    popular: false,\n  },\n  {\n    name: \"Pro\",\n    price: \"$29\",\n    period: \"/month\",\n    description: \"Best for growing businesses\",\n    features: [\n      \"50+ Components\",\n      \"Priority Support\",\n      \"Advanced Animations\",\n      \"Source Code\",\n      \"Custom Requests\",\n    ],\n    popular: true,\n  },\n  {\n    name: \"Enterprise\",\n    price: \"$99\",\n    period: \"/month\",\n    description: \"For large-scale applications\",\n    features: [\n      \"Unlimited Components\",\n      \"24/7 Support\",\n      \"Premium Animations\",\n      \"White-label\",\n      \"Dedicated Team\",\n    ],\n    popular: false,\n  },\n];\n\nexport function PricingSectionBaseui() {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true, margin: \"-100px\" });\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <section\n      ref={ref}\n      className=\"w-full px-4 py-12 sm:py-16 md:py-20 lg:py-24\"\n      aria-labelledby=\"pricing-heading\"\n    >\n      <div className=\"mx-auto max-w-6xl\">\n        <motion.div\n          initial={shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n          animate={shouldReduceMotion || isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}\n          className=\"mb-12 sm:mb-14 md:mb-16 text-center\"\n        >\n          <h2\n            id=\"pricing-heading\"\n            className=\"mb-3 sm:mb-4 text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight\"\n          >\n            Simple, transparent pricing\n          </h2>\n          <p className=\"text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4\">\n            Choose the plan that's right for you\n          </p>\n        </motion.div>\n\n        <div className=\"grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 md:gap-6\">\n          {plans.map((plan, index) => (\n            <motion.div\n              key={plan.name}\n              initial={shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n              animate={shouldReduceMotion || isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n              transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.4, delay: index * 0.1 }}\n              className=\"flex\"\n            >\n              <div\n                className={`relative flex h-full w-full flex-col overflow-hidden rounded-xl border transition-all duration-200 ${\n                  plan.popular\n                    ? \"border-foreground shadow-lg dark:border-foreground\"\n                    : \"border-border hover:border-foreground/50 hover:shadow-md\"\n                } bg-card text-card-foreground`}\n                aria-label={`${plan.name} plan${\n                  plan.popular ? \", most popular\" : \"\"\n                }`}\n              >\n                {plan.popular && (\n                  <div className=\"absolute right-3 top-3 sm:right-4 sm:top-4\">\n                    <span className=\"inline-flex items-center rounded-full border px-2.5 py-0.5 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-foreground text-background hover:bg-foreground/90 text-xs sm:text-sm\">\n                      Popular\n                    </span>\n                  </div>\n                )}\n\n                <div className=\"pb-6 pt-6 sm:pb-8 sm:pt-8 px-4 sm:px-6\">\n                  <h3 className=\"text-lg sm:text-xl font-medium\">\n                    {plan.name}\n                  </h3>\n                  <div className=\"mt-3 sm:mt-4 flex items-baseline gap-1\">\n                    <span className=\"text-3xl sm:text-4xl font-bold tracking-tight\">\n                      {plan.price}\n                    </span>\n                    <span className=\"text-sm sm:text-base text-muted-foreground\">\n                      {plan.period}\n                    </span>\n                  </div>\n                  <p className=\"mt-2 text-sm sm:text-base text-muted-foreground\">\n                    {plan.description}\n                  </p>\n                </div>\n\n                <div className=\"flex flex-1 flex-col justify-between gap-6 sm:gap-8 pb-6 sm:pb-8 px-4 sm:px-6\">\n                  <ul\n                    className=\"space-y-2.5 sm:space-y-3\"\n                    aria-label={`${plan.name} plan features`}\n                  >\n                    {plan.features.map((feature) => (\n                      <li\n                        key={feature}\n                        className=\"flex items-center gap-2 sm:gap-3 text-sm text-muted-foreground\"\n                      >\n                        <div\n                          className=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary\"\n                          aria-hidden=\"true\"\n                        >\n                          <Check className=\"h-3 w-3\" />\n                        </div>\n                        <span className=\"text-foreground\">{feature}</span>\n                      </li>\n                    ))}\n                  </ul>\n\n                  <Button\n                    className={`inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm 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 h-11 px-8 w-full ${\n                      plan.popular\n                        ? \"bg-foreground text-background hover:bg-foreground/90\"\n                        : \"bg-background text-foreground border border-input hover:bg-accent hover:text-accent-foreground\"\n                    }`}\n                    aria-label={`${\n                      plan.name === \"Enterprise\"\n                        ? \"Contact sales for\"\n                        : \"Get started with\"\n                    } ${plan.name} plan at ${plan.price} per month`}\n                  >\n                    {plan.name === \"Enterprise\"\n                      ? \"Contact Sales\"\n                      : \"Get Started\"}\n                  </Button>\n                </div>\n              </div>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/pricing-section-baseui.tsx"
    }
  ]
}