{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-09",
  "title": "Pricing 09",
  "description": "A simple pricing block",
  "files": [
    {
      "path": "src/registry/blocks/radix/pricing-09/components/pricing.tsx",
      "content": "import { Box, CircleCheck, Gem, type LucideIcon, Users } from \"lucide-react\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { BorderBeam } from \"./magicui/border-beam\";\n\ninterface PricingPlan {\n  name: string;\n  description: string;\n  price: number;\n  isRecommended: boolean;\n  icon: LucideIcon;\n  features: string[];\n}\n\nconst pricingPlans: PricingPlan[] = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals.\",\n    price: 29,\n    isRecommended: false,\n    icon: Box,\n    features: [\n      \"1 Project\",\n      \"Basic Components\",\n      \"Email Support\",\n      \"Access to Updates for 6 Months\",\n      \"Community Access\",\n    ],\n  },\n  {\n    name: \"Pro\",\n    description: \"Ideal for professionals.\",\n    price: 79,\n    isRecommended: true,\n    icon: Gem,\n    features: [\n      \"Unlimited Projects\",\n      \"Premium Components\",\n      \"Priority Support\",\n      \"Access to Updates for 1 Year\",\n      \"Code Snippets & Templates\",\n    ],\n  },\n  {\n    name: \"Team\",\n    description: \"Best for growing teams.\",\n    price: 199,\n    isRecommended: false,\n    icon: Users,\n    features: [\n      \"Everything in Pro\",\n      \"Team License (up to 5 users)\",\n      \"Collaboration Features\",\n      \"Extended Support\",\n      \"Lifetime Updates\",\n    ],\n  },\n];\n\nconst Pricing = () => {\n  return (\n    <section className=\"mx-auto max-w-6xl px-6 py-20\">\n      <h2 className=\"text-balance text-center font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem]\">\n        Pick your plan\n      </h2>\n      <p className=\"mt-2 text-balance text-center text-lg text-muted-foreground -tracking-[0.01em] sm:mt-4 sm:text-2xl\">\n        Flexible pricing designed to grow with you ready\n      </p>\n\n      <div className=\"mt-12 grid grid-cols-1 gap-x-6 gap-y-8 overflow-clip sm:mt-16 sm:grid-cols-2 md:grid-cols-3\">\n        {pricingPlans.map((plan) => (\n          <PlanCard key={plan.name} plan={plan} />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nconst PlanCard = ({ plan }: { plan: PricingPlan }) => {\n  return (\n    <div\n      className={cn(\n        \"relative flex flex-col rounded-xl border bg-muted/50 p-1 dark:bg-muted/75\",\n        {\n          \"shadow/5\": plan.isRecommended,\n        }\n      )}\n    >\n      {plan.isRecommended && <BorderBeam duration={8} size={150} />}\n\n      <div className=\"shadow/5 dark:shadow/45 relative overflow-hidden rounded-lg border bg-background px-6 pt-5 pb-4\">\n        {plan.isRecommended && (\n          <Badge className=\"absolute top-3 right-3 bg-primary/20 text-primary dark:bg-primary/30\">\n            Most Popular\n          </Badge>\n        )}\n        {plan.isRecommended && (\n          <>\n            {/* Circuit Board - Light Pattern */}\n            <div\n              className=\"pointer-events-none absolute inset-0 -top-px -left-2 z-0 not-dark:opacity-50\"\n              style={{\n                backgroundImage: `\n        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),\n        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),\n        radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px),\n        radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px)\n      `,\n                backgroundSize: \"40px 40px, 40px 40px, 40px 40px, 40px 40px\",\n              }}\n            />\n          </>\n        )}\n        <plan.icon className=\"mb-5 text-primary\" />\n        <div className=\"flex items-center gap-1\">\n          <h3 className=\"font-medium text-2xl tracking-tight\">{plan.name}</h3>\n        </div>\n        <p className=\"mt-1 mb-2 text-muted-foreground\">{plan.description}</p>\n      </div>\n\n      <div className=\"shadow/5 dark:shadow/45 mt-1 grow rounded-lg border bg-background px-6 pt-5 pb-10\">\n        <p className=\"mt-4 font-satoshi font-semibold text-4xl\">\n          ${plan.price}\n        </p>\n        <p className=\"mt-1 text-muted-foreground text-sm tracking-normal\">\n          one-time payment\n        </p>\n        <Button\n          className=\"my-6 w-full\"\n          size=\"lg\"\n          variant={plan.isRecommended ? \"default\" : \"outline\"}\n        >\n          Get Started\n        </Button>\n        <ul className=\"mt-4 space-y-2\">\n          {plan.features.map((feature) => (\n            <li className=\"flex items-center gap-2\" key={feature}>\n              <CircleCheck className=\"size-4 shrink-0 fill-primary/10 text-primary dark:fill-primary/15\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n\nexport default Pricing;\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/pricing-09/components/magicui/border-beam.tsx",
      "content": "\"use client\";\n\nimport { type MotionStyle, motion, type Transition } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface BorderBeamProps {\n  /**\n   * The size of the border beam.\n   */\n  size?: number;\n  /**\n   * The duration of the border beam.\n   */\n  duration?: number;\n  /**\n   * The delay of the border beam.\n   */\n  delay?: number;\n  /**\n   * The color of the border beam from.\n   */\n  colorFrom?: string;\n  /**\n   * The color of the border beam to.\n   */\n  colorTo?: string;\n  /**\n   * The motion transition of the border beam.\n   */\n  transition?: Transition;\n  /**\n   * The class name of the border beam.\n   */\n  className?: string;\n  /**\n   * The style of the border beam.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Whether to reverse the animation direction.\n   */\n  reverse?: boolean;\n  /**\n   * The initial offset position (0-100).\n   */\n  initialOffset?: number;\n  /**\n   * The border width of the beam.\n   */\n  borderWidth?: number;\n}\n\nexport const BorderBeam = ({\n  className,\n  size = 50,\n  delay = 0,\n  duration = 6,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  transition,\n  style,\n  reverse = false,\n  initialOffset = 0,\n  borderWidth = 1,\n}: BorderBeamProps) => {\n  return (\n    <div\n      className=\"border-(length:--border-beam-width) pointer-events-none absolute inset-0 rounded-[inherit] border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]\"\n      style={\n        {\n          \"--border-beam-width\": `${borderWidth}px`,\n        } as React.CSSProperties\n      }\n    >\n      <motion.div\n        animate={{\n          offsetDistance: reverse\n            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n            : [`${initialOffset}%`, `${100 + initialOffset}%`],\n        }}\n        className={cn(\n          \"absolute aspect-square\",\n          \"bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent\",\n          className\n        )}\n        initial={{ offsetDistance: `${initialOffset}%` }}\n        style={\n          {\n            width: size,\n            offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n            \"--color-from\": colorFrom,\n            \"--color-to\": colorTo,\n            ...style,\n          } as MotionStyle\n        }\n        transition={{\n          repeat: Number.POSITIVE_INFINITY,\n          ease: \"linear\",\n          duration,\n          delay: -delay,\n          ...transition,\n        }}\n      />\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}