{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-8","type":"registry:block","title":"Pricing 8","description":"","dependencies":["lucide-react","motion"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/badge.json","https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/checkbox.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json","https://www.diarmuradi.com/r/styles/base-nova/separator.json"],"files":[{"path":"pricing.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport { AnimatePresence, motion, type Variants } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { ArrowUpRightIcon, CheckIcon } from 'lucide-react'\n\nconst animVariant: Variants = {\n  initial: { opacity: 0, y: 24, scale: 0.6 },\n  animate: (i: number) => ({\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: {\n      delay: i * 0.04,\n      type: \"spring\",\n      damping: 10,\n      stiffness: 400,\n      mass: 0.5,\n    },\n  }),\n  exit: {\n    opacity: 0,\n    y: -16,\n    scale: 0.8,\n    transition: { duration: 0.12 },\n  },\n}\n\ntype PricingPlan = {\n  label: string\n  description: string\n  monthlyPrice: number\n  yearlyPrice: number\n  features: string[]\n}\n\nconst plan: PricingPlan = {\n  label: \"Professional\",\n  description:\n    \"All-in-one platform for teams building, deploying, and scaling web applications.\",\n  monthlyPrice: 99,\n  yearlyPrice: 79,\n  features: [\n    \"Unlimited team members\",\n    \"Advanced CI/CD pipelines\",\n    \"Real-time error monitoring\",\n    \"Custom domain management\",\n    \"Edge network deployment\",\n    \"Priority support (2h SLA)\",\n  ],\n}\n\nexport function Pricing() {\n  const [annual, setAnnual] = useState(false)\n\n  const price = annual ? plan.yearlyPrice : plan.monthlyPrice\n  const priceChars = price.toString().split(\"\")\n\n  return (\n    <section aria-label=\"Pricing\" className=\"mx-auto w-full max-w-xl\">\n      <div className=\"flex flex-col items-center gap-8\">\n        <div className=\"flex flex-col items-center gap-4 text-center\">\n          <Badge variant=\"secondary\" className=\"w-fit\">\n            Transparent pricing\n          </Badge>\n          <h2 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl\">\n            Simple pricing\n          </h2>\n          <p className=\"max-w-xl text-lg text-muted-foreground\">\n            Everything you need in one powerful plan.\n          </p>\n\n          <div className=\"flex items-center gap-3\">\n            <Checkbox\n              id=\"annual\"\n              checked={annual}\n              onCheckedChange={(checked) => setAnnual(checked as boolean)}\n            />\n            <label\n              htmlFor=\"annual\"\n              className=\"text-sm font-medium text-foreground\"\n            >\n              Annual billing (save 20%)\n            </label>\n          </div>\n        </div>\n\n        <div className=\"w-full rounded-4xl bg-muted p-1\">\n          <div className=\"flex flex-col gap-8 rounded-3xl bg-card p-8 shadow-elevated-lg\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"text-xl font-medium text-foreground\">\n                {plan.label}\n              </h3>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                {plan.description}\n              </p>\n            </div>\n\n            <div className=\"flex items-baseline justify-center gap-1\">\n              <span className=\"text-7xl font-semibold tracking-tight text-foreground\">\n                $\n              </span>\n              <AnimatePresence mode=\"popLayout\">\n                {priceChars.map((char, idx) => (\n                  <motion.span\n                    key={`${price}-${char}-${idx}`}\n                    variants={animVariant}\n                    initial=\"initial\"\n                    animate=\"animate\"\n                    exit=\"exit\"\n                    custom={idx}\n                    className=\"inline-block origin-bottom text-7xl font-semibold tracking-tight text-foreground\"\n                  >\n                    {char}\n                  </motion.span>\n                ))}\n              </AnimatePresence>\n              <span key=\"period\" className=\"text-xl text-muted-foreground\">\n                /month\n              </span>\n            </div>\n\n            <FancyButton size=\"lg\" className=\"w-full\">\n              Start free trial\n              <ArrowUpRightIcon />\n            </FancyButton>\n\n            <Separator className=\"bg-border/50\" />\n\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              {plan.features.map((feature) => (\n                <div key={feature} className=\"flex items-start gap-3\">\n                  <div className=\"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-primary\">\n                    <CheckIcon  className=\"size-3 text-primary-foreground\" />\n                  </div>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {feature}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}","target":"components/pricing.tsx"}]}