{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-shadcnui",
  "type": "registry:page",
  "title": "Pricing Section",
  "description": "Animated pricing cards with hover effects and feature lists",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/pricing-section.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { motion, useInView } from \"framer-motion\";\nimport { Check } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\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 PricingSection() {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true, margin: \"-100px\" });\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={{ opacity: 0, y: 20 }}\n          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n          transition={{ 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-[var(--foreground)]/60 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={{ opacity: 0, y: 20 }}\n              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n              transition={{ duration: 0.4, delay: index * 0.1 }}\n              className=\"flex\"\n            >\n              <Card\n                className={cn(\n                  \"relative flex h-full w-full flex-col overflow-hidden 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                )}\n                role=\"article\"\n                aria-label={`${plan.name} plan${plan.popular ? ', most popular' : ''}`}\n              >\n                {plan.popular && (\n                  <div className=\"absolute right-3 top-3 sm:right-4 sm:top-4\">\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-foreground text-background hover:bg-foreground/90 font-medium text-xs sm:text-sm\"\n                      aria-label=\"Most popular plan\"\n                    >\n                      Popular\n                    </Badge>\n                  </div>\n                )}\n\n                <CardHeader className=\"pb-6 pt-6 sm:pb-8 sm:pt-8 px-4 sm:px-6\">\n                  <CardTitle className=\"text-lg sm:text-xl font-medium\">\n                    {plan.name}\n                  </CardTitle>\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                  <CardDescription className=\"mt-2 text-sm sm:text-base\">\n                    {plan.description}\n                  </CardDescription>\n                </CardHeader>\n\n                <CardContent 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                    role=\"list\"\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={cn(\n                      \"w-full font-medium transition-all text-sm sm:text-base\",\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                    variant={plan.popular ? \"default\" : \"outline\"}\n                    size=\"lg\"\n                    aria-label={`${plan.name === \"Enterprise\" ? \"Contact sales for\" : \"Get started with\"} ${plan.name} plan at ${plan.price} per month`}\n                  >\n                    {plan.name === \"Enterprise\" ? \"Contact Sales\" : \"Get Started\"}\n                  </Button>\n                </CardContent>\n              </Card>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/pricing-section-shadcnui.tsx"
    }
  ]
}