{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "description": "A pricing section.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing-01/page.tsx",
      "content": "import { PricingSection } from \"@/registry/blocks/pricing-01/components/pricing\"\n\nexport default function Page() {\n  return (\n    <div className=\"relative mx-auto max-w-7xl border-x border-y\">\n      <PricingSection />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/pricing/page.tsx"
    },
    {
      "path": "registry/blocks/pricing-01/components/pricing.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst pricing = {\n  title: \"Pricing that scales with you\",\n  description:\n    \"Whichever plan you pick, it's free until you love your docs. That's our promise.\",\n  pricingItems: [\n    {\n      name: \"Free\",\n      href: \"#\",\n      price: \"$0\",\n      period: \"month\",\n      yearlyPrice: \"$0\",\n      features: [\n        \"Custom domain\",\n        \"SEO-optimizations\",\n        \"Auto-generated API docs\",\n        \"Built-in components library\",\n      ],\n      description: \"Perfect for individual users\",\n      buttonText: \"Start Free\",\n      buttonColor: \"bg-accent text-primary\",\n      isPopular: false,\n    },\n    {\n      name: \"Startup\",\n      href: \"#\",\n      price: \"$12\",\n      period: \"month\",\n      yearlyPrice: \"$120\",\n      features: [\n        \"Custom domain\",\n        \"SEO-optimizations\",\n        \"Auto-generated API docs\",\n        \"Built-in components library\",\n        \"E-commerce integration\",\n        \"User authentication system\",\n        \"Multi-language support\",\n        \"Real-time collaboration tools\",\n      ],\n      description: \"Ideal for professionals and small teams\",\n      buttonText: \"Upgrade to Pro\",\n      buttonColor: \"bg-cyan-500 text-white\",\n      isPopular: true,\n    },\n    {\n      name: \"Enterprise\",\n      href: \"#\",\n      price: \"$24\",\n      period: \"month\",\n      yearlyPrice: \"$240\",\n      features: [\n        \"Custom domain\",\n        \"SEO-optimizations\",\n        \"Auto-generated API docs\",\n        \"Built-in components librarys\",\n        \"Real-time collaboration tools\",\n      ],\n      description: \"Best for large teams and enterprise-level organizations\",\n      buttonText: \"Contact Sales\",\n      buttonColor: \"bg-primary text-primary-foreground\",\n      isPopular: false,\n    },\n  ],\n}\n\ninterface TabsProps {\n  activeTab: \"yearly\" | \"monthly\"\n  setActiveTab: (tab: \"yearly\" | \"monthly\") => void\n  className?: string\n}\n\nfunction PricingTabs({ activeTab, setActiveTab, className }: TabsProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-muted relative flex h-9 w-fit cursor-pointer flex-row items-center rounded-full border p-0.5 backdrop-blur-sm\",\n        className\n      )}\n    >\n      {[\"monthly\", \"yearly\"].map((tab) => (\n        <button\n          key={tab}\n          onClick={() => setActiveTab(tab as \"yearly\" | \"monthly\")}\n          className={cn(\n            \"relative z-[1] flex h-8 cursor-pointer items-center justify-center px-2\",\n            {\n              \"z-0\": activeTab === tab,\n            }\n          )}\n        >\n          {activeTab === tab && (\n            <motion.div\n              layoutId=\"active-tab\"\n              className=\"border-border absolute inset-0 rounded-full border bg-white shadow-md dark:bg-[#3F3F46]\"\n              transition={{\n                duration: 0.2,\n                type: \"spring\",\n                stiffness: 300,\n                damping: 25,\n                velocity: 2,\n              }}\n            />\n          )}\n          <span\n            className={cn(\n              \"relative block shrink-0 text-sm font-medium duration-200\",\n              activeTab === tab ? \"text-primary\" : \"text-muted-foreground\"\n            )}\n          >\n            {tab.charAt(0).toUpperCase() + tab.slice(1)}\n            {tab === \"yearly\" && (\n              <span className=\"ml-2 w-[calc(100%+1rem)] rounded-full bg-cyan-500/15 px-1 py-0.5 text-xs font-semibold text-cyan-500\">\n                -20%\n              </span>\n            )}\n          </span>\n        </button>\n      ))}\n    </div>\n  )\n}\n\nexport function PricingSection() {\n  const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\n    \"monthly\"\n  )\n\n  // Update price animation\n  const PriceDisplay = ({\n    tier,\n  }: {\n    tier: (typeof pricing.pricingItems)[0]\n  }) => {\n    const price = billingCycle === \"yearly\" ? tier.yearlyPrice : tier.price\n\n    return (\n      <motion.span\n        key={price}\n        className=\"text-4xl font-semibold\"\n        initial={{\n          opacity: 0,\n          x: billingCycle === \"yearly\" ? -10 : 10,\n          filter: \"blur(5px)\",\n        }}\n        animate={{ opacity: 1, x: 0, filter: \"blur(0px)\" }}\n        transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}\n      >\n        {price}\n      </motion.span>\n    )\n  }\n\n  return (\n    <section\n      id=\"pricing\"\n      className=\"relative flex w-full flex-col items-center justify-center gap-10 pb-10\"\n    >\n      <div className=\"h-full w-full border-b p-10 md:p-14\">\n        <div className=\"mx-auto flex max-w-xl flex-col items-center justify-center gap-2\">\n          <h2 className=\"text-center text-3xl font-medium tracking-tighter text-balance md:text-4xl\">\n            {pricing.title}\n          </h2>\n          <p className=\"text-muted-foreground text-center font-medium text-balance\">\n            {pricing.description}\n          </p>\n        </div>\n      </div>\n      <div className=\"relative h-full w-full\">\n        <div className=\"absolute -top-14 left-1/2 -translate-x-1/2\">\n          <PricingTabs\n            activeTab={billingCycle}\n            setActiveTab={setBillingCycle}\n            className=\"mx-auto\"\n          />\n        </div>\n\n        <div className=\"mx-auto grid w-full max-w-6xl gap-4 px-6 min-[650px]:grid-cols-2 min-[900px]:grid-cols-3\">\n          {pricing.pricingItems.map((tier) => (\n            <div\n              key={tier.name}\n              className={cn(\n                \"relative grid h-fit grid-rows-[180px_auto_1fr] rounded-xl min-[650px]:h-full min-[900px]:h-fit\",\n                tier.isPopular\n                  ? \"bg-accent md:shadow-[0px_61px_24px_-10px_rgba(0,0,0,0.01),0px_34px_20px_-8px_rgba(0,0,0,0.05),0px_15px_15px_-6px_rgba(0,0,0,0.09),0px_4px_8px_-2px_rgba(0,0,0,0.10),0px_0px_0px_1px_rgba(0,0,0,0.08)]\"\n                  : \"border-border border bg-[#F3F4F6] dark:bg-[#F9FAFB]/[0.02]\"\n              )}\n            >\n              <div className=\"flex flex-col gap-4 p-4\">\n                <p className=\"text-sm\">\n                  {tier.name}\n                  {tier.isPopular && (\n                    <span className=\"ml-2 inline-flex h-6 w-fit items-center justify-center rounded-full bg-gradient-to-b from-cyan-500/50 from-[1.92%] to-cyan-500 to-[100%] px-2 text-sm text-white shadow-[0px_6px_6px_-3px_rgba(0,0,0,0.08),0px_3px_3px_-1.5px_rgba(0,0,0,0.08),0px_1px_1px_-0.5px_rgba(0,0,0,0.08),0px_0px_0px_1px_rgba(255,255,255,0.12)_inset,0px_1px_0px_0px_rgba(255,255,255,0.12)_inset]\">\n                      Popular\n                    </span>\n                  )}\n                </p>\n                <div className=\"mt-2 flex items-baseline\">\n                  <PriceDisplay tier={tier} />\n                  <span className=\"ml-2\">\n                    /{billingCycle === \"yearly\" ? \"year\" : \"month\"}\n                  </span>\n                </div>\n                <p className=\"mt-2 text-sm\">{tier.description}</p>\n              </div>\n\n              <div className=\"flex flex-col gap-2 p-4\">\n                <button\n                  className={`flex h-10 w-full cursor-pointer items-center justify-center rounded-full px-4 text-sm font-normal tracking-wide transition-all ease-out active:scale-95 ${\n                    tier.isPopular\n                      ? `${tier.buttonColor} shadow-[inset_0_1px_2px_rgba(255,255,255,0.25),0_3px_3px_-1.5px_rgba(16,24,40,0.06),0_1px_1px_rgba(16,24,40,0.08)]`\n                      : `${tier.buttonColor} shadow-[0px_1px_2px_0px_rgba(255,255,255,0.16)_inset,0px_3px_3px_-1.5px_rgba(16,24,40,0.24),0px_1px_1px_-0.5px_rgba(16,24,40,0.20)]`\n                  }`}\n                >\n                  {tier.buttonText}\n                </button>\n              </div>\n              <hr className=\"border-border dark:border-white/20\" />\n              <div className=\"p-4\">\n                {tier.name !== \"Basic\" && (\n                  <p className=\"mb-4 text-sm\">\n                    Everything in {tier.name === \"Pro\" ? \"Basic\" : \"Pro\"} +\n                  </p>\n                )}\n                <ul className=\"space-y-3\">\n                  {tier.features.map((feature) => (\n                    <li key={feature} className=\"flex items-center gap-2\">\n                      <div\n                        className={cn(\n                          \"border-primary/20 flex size-5 items-center justify-center rounded-full border\",\n                          tier.isPopular &&\n                            \"bg-muted-foreground/40 border-border\"\n                        )}\n                      >\n                        <div className=\"flex size-3 items-center justify-center\">\n                          <svg\n                            width=\"8\"\n                            height=\"7\"\n                            viewBox=\"0 0 8 7\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            className=\"block dark:hidden\"\n                          >\n                            <path\n                              d=\"M1.5 3.48828L3.375 5.36328L6.5 0.988281\"\n                              stroke=\"#101828\"\n                              strokeWidth=\"1.5\"\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                            />\n                          </svg>\n\n                          <svg\n                            width=\"8\"\n                            height=\"7\"\n                            viewBox=\"0 0 8 7\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            className=\"hidden dark:block\"\n                          >\n                            <path\n                              d=\"M1.5 3.48828L3.375 5.36328L6.5 0.988281\"\n                              stroke=\"#FAFAFA\"\n                              strokeWidth=\"1.5\"\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                            />\n                          </svg>\n                        </div>\n                      </div>\n                      <span className=\"text-sm\">{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}