{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "growth-plans",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/pricing-section/growth-plans.tsx",
      "content": "'use client'\r\n\r\nimport React, { useState } from 'react'\r\n\r\nimport { Check } from 'lucide-react'\r\n\r\nimport { motion } from 'motion/react'\r\n\r\nimport NumberFlow from '@number-flow/react'\r\n\r\nimport { useId } from 'react'\r\n\r\n// import { Button } from '@repo/ui/shadcn'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nimport { Switch, Button } from '@repo/shadcn'\r\n\r\nconst PLANS = [\r\n  {\r\n    name: 'Basic Plan',\r\n\r\n    description: 'Ideal for small businesses',\r\n\r\n    monthly: 29,\r\n\r\n    yearly: 23,\r\n\r\n    features: [\r\n      'Unified dashboard',\r\n\r\n      'Finance management module',\r\n\r\n      'Inventory control',\r\n\r\n      'Basic reporting and analytics',\r\n\r\n      '10 user accounts',\r\n    ],\r\n\r\n    variant: 'outline' as const,\r\n  },\r\n\r\n  {\r\n    name: 'Business Plan',\r\n\r\n    description: 'For growing businesses',\r\n\r\n    monthly: 59,\r\n\r\n    yearly: 47,\r\n\r\n    features: [\r\n      'Everything in basic plan',\r\n\r\n      'HR & payroll module',\r\n\r\n      'Sales & CRM module',\r\n\r\n      'Workflow automation',\r\n\r\n      'Advanced analytics & reporting',\r\n    ],\r\n\r\n    variant: 'secondary' as const,\r\n\r\n    featured: true,\r\n  },\r\n\r\n  {\r\n    name: 'Premium Plan',\r\n\r\n    description: 'Ideal for enterprises seeking',\r\n\r\n    monthly: 99,\r\n\r\n    yearly: 79,\r\n\r\n    features: [\r\n      'Everything in business plan',\r\n\r\n      'Custom integrations',\r\n\r\n      'AI-Driven recommendations',\r\n\r\n      'Role based access control',\r\n\r\n      'Unlimited user accounts',\r\n    ],\r\n\r\n    variant: 'outline' as const,\r\n  },\r\n]\r\n\r\nexport const GrowthPlans = () => {\r\n  const [billing, setBilling] = useState<'monthly' | 'yearly'>('yearly')\r\n\r\n  const id = useId()\r\n\r\n  return (\r\n    <section className=\"py-24 bg-white font-dmSans text-black\">\r\n      <div className=\"max-w-6xl mx-auto px-6 text-center\">\r\n        <h2 className=\"text-4xl font-semibold tracking-tight mb-2 text-balance\">\r\n          Plans that grow your SASS.\r\n        </h2>\r\n\r\n        <p className=\"text-neutral-500 mb-5 text-pretty\">\r\n          Unlock potential with plans designed to fuel growth.\r\n        </p>\r\n\r\n        <div className=\"flex items-center justify-center gap-4 mb-16 bg-neutral-100 border border-neutral-200 w-fit p-3 mx-auto\">\r\n          <span\r\n            className={cn(\r\n              'text-sm transition-colors',\r\n\r\n              billing === 'monthly'\r\n                ? 'text-neutral-900 font-medium'\r\n                : 'text-neutral-400'\r\n            )}\r\n          >\r\n            Monthly\r\n          </span>\r\n\r\n          <Switch\r\n            id={id}\r\n            // @ts-ignore\r\n\r\n            checked={billing === 'yearly'}\r\n            className=\"bg-neutral-300\"\r\n            // @ts-ignore\r\n\r\n            onCheckedChange={(checked) =>\r\n              setBilling(checked ? 'yearly' : 'monthly')\r\n            }\r\n          />\r\n\r\n          <div className=\"flex items-center gap-2\">\r\n            <span\r\n              className={cn(\r\n                'text-sm transition-colors',\r\n\r\n                billing === 'yearly'\r\n                  ? 'text-neutral-900 font-medium'\r\n                  : 'text-neutral-400'\r\n              )}\r\n            >\r\n              Yearly\r\n            </span>\r\n\r\n            <span className=\"px-2 py-0.5 bg- text-[10px] font-bold rounded-full uppercase\">\r\n              Save 20%\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"grid lg:grid-cols-3 -gap-x-4 items-stretch\">\r\n          {PLANS.map((plan) => (\r\n            <div\r\n              key={plan.name}\r\n              className={cn(\r\n                'rounded-lg p-8 flex flex-col border transition-all',\r\n\r\n                plan.featured\r\n                  ? 'bg-neutral-950 text-white scale-105 shadow-2xl z-10 border-transparent'\r\n                  : 'bg-neutral-100 border border-neutral-200'\r\n              )}\r\n            >\r\n              <div className=\"text-left mb-8\">\r\n                <h4 className=\"font-bold text-lg\">{plan.name}</h4>\r\n\r\n                <p\r\n                  className={cn(\r\n                    'text-sm',\r\n\r\n                    plan.featured ? 'text-neutral-400' : 'text-neutral-400'\r\n                  )}\r\n                >\r\n                  {plan.description}\r\n                </p>\r\n              </div>\r\n\r\n              <div className=\"flex items-baseline gap-1 mb-8 text-left\">\r\n                <span\r\n                  className={cn(\r\n                    'text-2xl font-medium',\r\n\r\n                    plan.featured ? 'text-gre' : 'text-neutral-400'\r\n                  )}\r\n                >\r\n                  $\r\n                </span>\r\n\r\n                <span\r\n                  className={cn(\r\n                    'text-5xl font-bold ',\r\n\r\n                    plan.featured ? 'text-white' : 'text-neutral-900'\r\n                  )}\r\n                >\r\n                  <NumberFlow\r\n                    value={billing === 'monthly' ? plan.monthly : plan.yearly}\r\n                  />\r\n                </span>\r\n\r\n                <span className=\"text-neutral-400 text-sm\">/monthly</span>\r\n              </div>\r\n\r\n              <Button\r\n                variant={plan.variant}\r\n                className={cn(\r\n                  'w-full mb-10 rounded-lg h-14',\r\n\r\n                  plan.featured\r\n                    ? 'py-4 bg-neutral-800 border border-neutral-700'\r\n                    : 'bg-white border-neutral-200 hover:shadow-neutral-200 hover:shadow-lg hover:bg-white'\r\n                )}\r\n              >\r\n                Select Plan\r\n              </Button>\r\n\r\n              <div\r\n                className={cn(\r\n                  'space-y-4 pt-8 border-t text-left',\r\n\r\n                  plan.featured ? 'border-neutral-700' : 'border-neutral-200'\r\n                )}\r\n              >\r\n                {plan.features.map((f, i) => (\r\n                  <div\r\n                    key={i}\r\n                    className={cn(\r\n                      'flex items-center gap-3 text-sm',\r\n\r\n                      plan.featured ? 'text-neutral-300' : 'text-neutral-600'\r\n                    )}\r\n                  >\r\n                    <Check className=\"size-4 shrink-0\" />\r\n\r\n                    {f}\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}