{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subscription-details",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/pricing-section/subscription-details.tsx",
      "content": "'use client'\r\nimport React, { useRef, useState } from 'react'\r\nimport { Plus, Zap } from 'lucide-react'\r\nimport NumberFlow from '@number-flow/react'\r\nimport { cn } from '@/lib/utils'\r\nimport { Button } from '@repo/shadcn'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nconst PLANS = [\r\n  {\r\n    name: 'Starter',\r\n    price: 10,\r\n    description: 'Perfect for individuals and small projects',\r\n    features: [\r\n      '5 projects per month',\r\n      'Basic templates',\r\n      'Community support',\r\n      '1GB storage',\r\n      'Mobile app access',\r\n    ],\r\n  },\r\n  {\r\n    name: 'Professional',\r\n    price: 20,\r\n    description: 'Ideal for growing teams and businesses',\r\n    features: [\r\n      'Unlimited projects',\r\n      'Premium templates',\r\n      'Priority support',\r\n      '10GB storage',\r\n      'Advanced analytics',\r\n    ],\r\n    featured: true,\r\n  },\r\n  {\r\n    name: 'Business',\r\n    price: 40,\r\n    description: 'Complete solution for established businesses',\r\n    features: [\r\n      'Everything in Professional',\r\n      'Unlimited storage',\r\n      'Dedicated account manager',\r\n      'API access',\r\n      'SLA guarantee',\r\n      'Training sessions',\r\n    ],\r\n  },\r\n  {\r\n    name: 'Enterprise',\r\n    price: 60,\r\n    description: 'Tailored solutions for large organizations',\r\n    features: [\r\n      'Everything in Business',\r\n      'Custom development',\r\n      '24/7 phone support',\r\n      'Compliance certifications',\r\n      'Multi-region hosting',\r\n      'Custom contracts',\r\n    ],\r\n  },\r\n]\r\n\r\nexport const SubscriptionDetails = () => {\r\n  const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly')\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"py-24 md:px-16 px-10 font-dmSans min-h-screen bg-white text-black\"\r\n    >\r\n      <div className=\"container mx-auto\">\r\n        <div className=\"flex justify-between items-center mb-16\">\r\n          <TimelineAnimation\r\n            animationNum={1}\r\n            timelineRef={timelineRef}\r\n            as=\"h2\"\r\n            className=\"md:text-4xl text-2xl font-bold\"\r\n          >\r\n            Subscription\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"bg-neutral-100 p-1 rounded-full flex gap-1\"\r\n          >\r\n            <Button\r\n              onClick={() => setBilling('monthly')}\r\n              className={cn(\r\n                'px-4 py-1.5 text-sm font-medium rounded-full transition-all',\r\n                billing === 'monthly'\r\n                  ? 'bg-white shadow-sm text-black'\r\n                  : 'text-neutral-500 hover:text-neutral-900 bg-transparent border-none'\r\n              )}\r\n            >\r\n              Monthly\r\n            </Button>\r\n            <Button\r\n              onClick={() => setBilling('yearly')}\r\n              className={cn(\r\n                'px-4 py-1.5 text-sm font-medium rounded-full transition-all',\r\n                billing === 'yearly'\r\n                  ? 'bg-white shadow-sm text-black'\r\n                  : 'text-neutral-500 hover:text-neutral-900 bg-transparent border-none'\r\n              )}\r\n            >\r\n              Annual <span className=\"text-neutral-900\">-15%</span>\r\n            </Button>\r\n          </TimelineAnimation>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 xl:grid-cols-4 sm:grid-cols-2 gap-6\">\r\n          {PLANS.map((plan, idx) => {\r\n            const displayPrice =\r\n              billing === 'monthly' ? plan.price : Math.round(plan.price * 0.85)\r\n            return (\r\n              <TimelineAnimation\r\n                animationNum={idx + 3}\r\n                timelineRef={timelineRef}\r\n                key={idx}\r\n                className={cn(\r\n                  'xl:p-8 md:p-4 p-6 rounded-2xl relative border transition-all flex flex-col',\r\n                  plan.featured\r\n                    ? 'bg-black text-white shadow-2xl relative overflow-hidden border-none'\r\n                    : 'bg-neutral-100 border-neutral-300 border-2 border-dashed'\r\n                )}\r\n              >\r\n                {plan.featured && (\r\n                  <>\r\n                    <img\r\n                      src=\"https://images.unsplash.com/photo-1600619030925-569b3b964418?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n                      className=\"w-full h-full object-fill absolute -bottom-40 rotate-180 left-0\"\r\n                      alt=\"\"\r\n                    />\r\n                    <div className=\"absolute inset-0 bg-linear-to-br from-orange-500/20 via-pink-500/10 to-transparent blur-3xl opacity-60 pointer-events-none\" />\r\n                    <div className=\"absolute top-4 right-4 bg-white/10 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider z-20\">\r\n                      Most popular\r\n                    </div>\r\n                  </>\r\n                )}\r\n                <div className=\"relative z-10 flex-1 space-y-4 pb-10\">\r\n                  <span className=\"text-sm text-neutral-400 block\">\r\n                    {plan.name}\r\n                  </span>\r\n                  <span className=\"text-4xl font-bold block\">\r\n                    $<NumberFlow value={displayPrice} />\r\n                  </span>\r\n                  <p\r\n                    className={cn(\r\n                      'text-xl font-medium',\r\n                      plan.featured ? 'text-white' : 'text-neutral-800'\r\n                    )}\r\n                  >\r\n                    {plan.description}\r\n                  </p>\r\n                  <div className=\"space-y-4\">\r\n                    {plan.features.map((feature, i) => (\r\n                      <div key={i} className=\"flex items-center gap-3 text-sm\">\r\n                        <div\r\n                          className={cn(\r\n                            'size-2 rounded-full',\r\n                            plan.featured ? 'bg-white/40' : 'bg-neutral-200'\r\n                          )}\r\n                        />\r\n                        <span\r\n                          className={\r\n                            plan.featured\r\n                              ? 'text-neutral-200'\r\n                              : 'text-neutral-700'\r\n                          }\r\n                        >\r\n                          {feature}\r\n                        </span>\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n                <Button\r\n                  variant=\"outline\"\r\n                  className={cn(\r\n                    'relative z-10 gap-2 h-12 border-neutral-200 mt-auto transition-transform',\r\n                    plan.featured\r\n                      ? 'bg-white text-black hover:bg-neutral-100 border-none shadow-lg active:scale-95'\r\n                      : 'text-neutral-600 active:scale-95 hover:bg-white '\r\n                  )}\r\n                >\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    width=\"24\"\r\n                    height=\"24\"\r\n                    className=\"size-5 stroke-black fill-none\"\r\n                    stroke-width=\"2\"\r\n                  >\r\n                    <path d=\"M3.32352 13.0113C3.6739 10.009 4.18586 7.75784 4.66063 6.15851C5.04994 4.84711 5.24459 4.19141 6.04283 3.5957C6.84107 3 7.65697 3 9.28876 3H14.7113C16.3431 3 17.159 3 17.9572 3.5957C18.7554 4.19141 18.9501 4.84711 19.3394 6.15851C19.8142 7.75784 20.3261 10.009 20.6765 13.0113C21.0895 16.5497 21.2959 18.3189 20.1027 19.6594C18.9095 21 16.9758 21 13.1084 21H10.8916C7.02422 21 5.09052 21 3.89731 19.6594C2.70411 18.3189 2.91058 16.5497 3.32352 13.0113Z\" />\r\n                    <path d=\"M9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7\" />\r\n                  </svg>{' '}\r\n                  Subscribe\r\n                </Button>\r\n              </TimelineAnimation>\r\n            )\r\n          })}\r\n        </div>\r\n\r\n        <div className=\"mt-10\">\r\n          <div className=\"grid md:grid-cols-2 gap-x-20 gap-y-12\">\r\n            <div className=\"space-y-2\">\r\n              <TimelineAnimation\r\n                animationNum={7}\r\n                timelineRef={timelineRef}\r\n                as=\"h4\"\r\n                className=\"font-semibold text-neutral-900 text-pretty\"\r\n              >\r\n                How many interiors can I generate with a basic plan?\r\n              </TimelineAnimation>\r\n            </div>\r\n            <div className=\"relative\">\r\n              <TimelineAnimation animationNum={8} timelineRef={timelineRef}>\r\n                <p className=\"text-neutral-500 text-sm leading-relaxed mb-4 text-pretty\">\r\n                  Replace the couch: Current leather couch feels too\r\n                  lightweight.\r\n                </p>\r\n                <p className=\"text-neutral-500 text-sm leading-relaxed text-pretty\">\r\n                  Go for a deep brutalist frame in dark suede or stonewashed\r\n                  linen — think low, wide, grounded. See Mario Bellini\r\n                  Camaleonda, or a custom slab-style bench sofa in ecru mohair.\r\n                </p>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </div>\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"
}