{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-4",
  "type": "registry:block",
  "description": "Animated dual pricing cards with motion effects, discount badges, and trust indicator.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/4/pricing-section.tsx",
      "content": "\"use client\";\nimport { PlusIcon, ShieldCheckIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function PricingSection() {\n  return (\n    <section className=\"mx-auto w-full max-w-5xl space-y-5\" id=\"pricing\">\n      <motion.div\n        className=\"mx-auto max-w-xl space-y-5\"\n        initial={{ opacity: 0, y: 20 }}\n        transition={{ duration: 0.8, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}\n        viewport={{ once: true }}\n        whileInView={{ opacity: 1, y: 0 }}\n      >\n        <div className=\"flex justify-center\">\n          <div className=\"rounded-md border px-4 py-1 text-sm\">Pricing</div>\n        </div>\n        <h2 className=\"mt-5 text-center font-bold text-2xl tracking-tight md:text-3xl lg:text-4xl\">\n          Pricing Based on Your Success\n        </h2>\n        <p className=\"mt-5 text-center text-muted-foreground text-sm md:text-base\">\n          We offer a single price for all our services. We believe that pricing\n          is a critical component of any successful business.\n        </p>\n      </motion.div>\n\n      <motion.div\n        className=\"mx-auto w-full max-w-2xl space-y-2\"\n        initial={{ opacity: 0, y: 20 }}\n        transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}\n        viewport={{ once: true }}\n        whileInView={{ opacity: 1, y: 0 }}\n      >\n        <div className=\"relative grid border bg-background p-4 md:grid-cols-2\">\n          <PlusIcon\n            className=\"-top-[10.5px] -left-[10.5px] absolute size-5 text-foreground\"\n            strokeWidth={1}\n          />\n          <PlusIcon\n            className=\"-top-[10.5px] -right-[10.5px] absolute size-5 text-foreground\"\n            strokeWidth={1}\n          />\n          <PlusIcon\n            className=\"-bottom-[10.5px] -left-[10.5px] absolute size-5 text-foreground\"\n            strokeWidth={1}\n          />\n          <PlusIcon\n            className=\"-right-[10.5px] -bottom-[10.5px] absolute size-5 text-foreground\"\n            strokeWidth={1}\n          />\n\n          <div className=\"w-full px-4 pt-5 pb-4\">\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"font-semibold leading-none\">Monthly</h3>\n                <div className=\"flex items-center gap-x-1\">\n                  <span className=\"text-muted-foreground text-sm line-through\">\n                    $8.99\n                  </span>\n                  <Badge variant=\"secondary\">11% off</Badge>\n                </div>\n              </div>\n              <p className=\"text-muted-foreground text-sm\">\n                Best value for growing businesses!\n              </p>\n            </div>\n            <div className=\"mt-10 space-y-4\">\n              <div className=\"flex items-end gap-0.5 text-muted-foreground text-xl\">\n                <span>$</span>\n                <span className=\"-mb-0.5 font-extrabold text-4xl text-foreground tracking-tighter md:text-4xl\">\n                  7.99\n                </span>\n                <span>/month</span>\n              </div>\n              <Button asChild className=\"w-full\" variant=\"outline\">\n                <a href=\"#\">Start Your Journey</a>\n              </Button>\n            </div>\n          </div>\n          <div className=\"relative w-full rounded-md border bg-card p-4 shadow dark:bg-card/80\">\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"font-semibold leading-none\">Yearly</h3>\n                <div className=\"flex items-center gap-x-1\">\n                  <span className=\"text-muted-foreground text-sm line-through\">\n                    $8.99\n                  </span>\n                  <Badge>22% off</Badge>\n                </div>\n              </div>\n              <p className=\"text-muted-foreground text-sm\">\n                Unlock savings with an annual commitment!\n              </p>\n            </div>\n            <div className=\"mt-10 space-y-4\">\n              <div className=\"flex items-end text-muted-foreground text-xl\">\n                <span>$</span>\n                <span className=\"-mb-0.5 font-extrabold text-4xl text-foreground tracking-tighter md:text-4xl\">\n                  6.99\n                </span>\n                <span>/month</span>\n              </div>\n              <Button asChild className=\"w-full\">\n                <a href=\"#\">Get Started Now</a>\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-center gap-x-2 text-muted-foreground text-sm\">\n          <ShieldCheckIcon className=\"size-4\" />\n          <span>Access to all features with no hidden fees</span>\n        </div>\n      </motion.div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "70vh"
  },
  "categories": [
    "pricing"
  ]
}