{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-overview",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/pricing-section/pricing-overview.tsx",
      "content": "'use client'\r\nimport React, { useId, useState, useRef } from 'react'\r\nimport { Calendar, Check } from 'lucide-react'\r\nimport { motion } from 'motion/react'\r\nimport NumberFlow from '@number-flow/react'\r\nimport { Button, Switch } from '@repo/shadcn'\r\nimport { cn } from '@/lib/utils'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nexport const PricingOverview = () => {\r\n  const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly')\r\n  const id = useId()\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  // Calculate prices based on billing cycle (20% discount for yearly)\r\n  const landingPagePrice = billing === 'monthly' ? 1699 : 1500\r\n  const productDesignPrice = billing === 'monthly' ? 3099 : 2300\r\n  const partnershipPrice = billing === 'monthly' ? 4099 : 3100\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"py-20 px-6 max-w-5xl mx-auto font-dmSans\"\r\n    >\r\n      <div className=\"text-left mb-12\">\r\n        <TimelineAnimation\r\n          animationNum={1}\r\n          timelineRef={timelineRef}\r\n          as=\"h1\"\r\n          className=\"text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4\"\r\n        >\r\n          Flexible plans for every business\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          animationNum={2}\r\n          timelineRef={timelineRef}\r\n          as=\"p\"\r\n          className=\"text-neutral-500 text-pretty max-w-lg leading-relaxed\"\r\n        >\r\n          Your product design partner. Unlock instant, world-class design with a\r\n          simple monthly fee.\r\n        </TimelineAnimation>\r\n      </div>\r\n\r\n      <TimelineAnimation\r\n        animationNum={3}\r\n        timelineRef={timelineRef}\r\n        className=\"flex flex-col items-start gap-6 mb-6\"\r\n      >\r\n        <TimelineAnimation\r\n          animationNum={4}\r\n          timelineRef={timelineRef}\r\n          className=\"flex items-center gap-4\"\r\n        >\r\n          <span\r\n            className={cn(\r\n              'text-md transition-colors',\r\n              billing === 'monthly'\r\n                ? 'text-neutral-900 font-bold'\r\n                : 'text-neutral-400'\r\n            )}\r\n          >\r\n            Monthly\r\n          </span>\r\n          <Switch\r\n            id={id}\r\n            // @ts-ignore\r\n            checked={billing === 'yearly'}\r\n            className=\"bg-neutral-300 rounded-full\"\r\n            thumbsClassName=\"rounded-full\"\r\n            // @ts-ignore\r\n            onCheckedChange={(checked) =>\r\n              setBilling(checked ? 'yearly' : 'monthly')\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                billing === 'yearly'\r\n                  ? 'text-neutral-900 font-bold'\r\n                  : 'text-neutral-400'\r\n              )}\r\n            >\r\n              Yearly\r\n            </span>\r\n            <span className=\"px-2 py-0.5 bg-[#C7FF33] text-[9px] font-bold rounded-full uppercase tracking-tighter\">\r\n              Save 20%\r\n            </span>\r\n          </div>\r\n        </TimelineAnimation>\r\n      </TimelineAnimation>\r\n\r\n      <TimelineAnimation\r\n        animationNum={4}\r\n        timelineRef={timelineRef}\r\n        className=\"grid md:grid-cols-2 gap-6\"\r\n      >\r\n        {/* Landing Page Card */}\r\n        <TimelineAnimation\r\n          animationNum={5}\r\n          timelineRef={timelineRef}\r\n          className=\"bg-gray-100 border border-neutral-200 rounded-xl p-2 flex flex-col hover:shadow-md transition-shadow\"\r\n        >\r\n          <div className=\"bg-white p-1.5 rounded-lg\">\r\n            <div className=\"p-4 bg-neutral-100 border border-zinc-100 rounded-lg space-y-2\">\r\n              <h3 className=\"text-3xl font-bold mb-2\">Landing Page</h3>\r\n              <p className=\"text-neutral-500 text-sm font-medium\">\r\n                Get a high quality landing page for your product.\r\n              </p>\r\n              <div className=\"flex items-baseline gap-1\">\r\n                <span className=\"text-3xl font-bold flex items-center\">\r\n                  $\r\n                  <NumberFlow\r\n                    value={landingPagePrice}\r\n                    format={{ useGrouping: false }}\r\n                  />\r\n                </span>\r\n                <span className=\"text-neutral-400 text-sm\">\r\n                  /{billing === 'monthly' ? 'fixed' : 'fixed (yearly rate)'}\r\n                </span>\r\n              </div>\r\n              <TimelineAnimation animationNum={6} timelineRef={timelineRef}>\r\n                <Button className=\"w-full gap-2 mt-2 text-lg\" size=\"lg\">\r\n                  Book a call <Calendar className=\"size-4\" />\r\n                </Button>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"grid grid-cols-2 gap-y-4 p-4\">\r\n            {[\r\n              'Design concepts',\r\n              'Tailored solution',\r\n              'Responsive design',\r\n              'Revisions',\r\n              'Up to 4 subpages',\r\n              'Post-launch support',\r\n            ].map((item, i) => (\r\n              <div\r\n                key={i}\r\n                className=\"flex items-center gap-2 text-md text-neutral-600 font-medium\"\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                  fill=\"#000000\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.5\"\r\n                >\r\n                  <path d=\"M18.9905 19H19M18.9905 19C18.3678 19.6175 17.2393 19.4637 16.4479 19.4637C15.4765 19.4637 15.0087 19.6537 14.3154 20.347C13.7251 20.9374 12.9337 22 12 22C11.0663 22 10.2749 20.9374 9.68457 20.347C8.99128 19.6537 8.52349 19.4637 7.55206 19.4637C6.76068 19.4637 5.63218 19.6175 5.00949 19C4.38181 18.3776 4.53628 17.2444 4.53628 16.4479C4.53628 15.4414 4.31616 14.9786 3.59938 14.2618C2.53314 13.1956 2.00002 12.6624 2 12C2.00001 11.3375 2.53312 10.8044 3.59935 9.73817C4.2392 9.09832 4.53628 8.46428 4.53628 7.55206C4.53628 6.76065 4.38249 5.63214 5 5.00944C5.62243 4.38178 6.7556 4.53626 7.55208 4.53626C8.46427 4.53626 9.09832 4.2392 9.73815 3.59937C10.8044 2.53312 11.3375 2 12 2C12.6625 2 13.1956 2.53312 14.2618 3.59937C14.9015 4.23907 15.5355 4.53626 16.4479 4.53626C17.2393 4.53626 18.3679 4.38247 18.9906 5C19.6182 5.62243 19.4637 6.75559 19.4637 7.55206C19.4637 8.55858 19.6839 9.02137 20.4006 9.73817C21.4669 10.8044 22 11.3375 22 12C22 12.6624 21.4669 13.1956 20.4006 14.2618C19.6838 14.9786 19.4637 15.4414 19.4637 16.4479C19.4637 17.2444 19.6182 18.3776 18.9905 19Z\" />\r\n                  <path d=\"M9 12.8929C9 12.8929 10.2 13.5447 10.8 14.5C10.8 14.5 12.6 10.75 15 9.5\" />\r\n                </svg>\r\n                {item}\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </TimelineAnimation>\r\n\r\n        {/* Product Design Card */}\r\n        <TimelineAnimation\r\n          animationNum={7}\r\n          timelineRef={timelineRef}\r\n          className=\"bg-gray-100 border border-neutral-200 rounded-xl p-2 flex flex-col hover:shadow-md transition-shadow\"\r\n        >\r\n          <div className=\"bg-white p-1.5 rounded-lg\">\r\n            <div className=\"p-4 bg-neutral-100 border border-zinc-100 rounded-lg relative overflow-hidden space-y-2\">\r\n              <div className=\"absolute top-0 right-0 size-32 bg-red-500/40 blur-3xl -mr-16 -mt-16 group-hover:bg-[#FF7777]/20 transition-colors\" />\r\n              <h3 className=\"text-3xl font-bold mb-2\">Product design</h3>\r\n              <p className=\"text-neutral-500 text-sm\">\r\n                Let's bring your idea to life.\r\n              </p>\r\n              <div className=\"flex items-baseline gap-1\">\r\n                <span className=\"text-3xl font-bold flex items-center\">\r\n                  $\r\n                  <NumberFlow\r\n                    value={productDesignPrice}\r\n                    format={{ useGrouping: false }}\r\n                  />\r\n                </span>\r\n                <span className=\"text-neutral-400 text-sm\">\r\n                  /{billing === 'monthly' ? 'fixed' : 'fixed (yearly rate)'}\r\n                </span>\r\n              </div>\r\n              <TimelineAnimation animationNum={8} timelineRef={timelineRef}>\r\n                <Button className=\"w-full mt-2 gap-2 text-lg\" size=\"lg\">\r\n                  Book a call <Calendar className=\"size-4\" />\r\n                </Button>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"grid grid-cols-2 gap-y-4 p-4\">\r\n            {[\r\n              'Brainstorming',\r\n              'Tailored solution',\r\n              'UX-based strategy',\r\n              'Design concepts',\r\n              'Revisions',\r\n              'Support',\r\n              'On-time delivery',\r\n              'Scaleable',\r\n              'Async communication',\r\n            ].map((item, i) => (\r\n              <div\r\n                key={i}\r\n                className=\"flex items-center gap-2 text-md font-medium text-neutral-600\"\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                  fill=\"#000000\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.5\"\r\n                >\r\n                  <path d=\"M18.9905 19H19M18.9905 19C18.3678 19.6175 17.2393 19.4637 16.4479 19.4637C15.4765 19.4637 15.0087 19.6537 14.3154 20.347C13.7251 20.9374 12.9337 22 12 22C11.0663 22 10.2749 20.9374 9.68457 20.347C8.99128 19.6537 8.52349 19.4637 7.55206 19.4637C6.76068 19.4637 5.63218 19.6175 5.00949 19C4.38181 18.3776 4.53628 17.2444 4.53628 16.4479C4.53628 15.4414 4.31616 14.9786 3.59938 14.2618C2.53314 13.1956 2.00002 12.6624 2 12C2.00001 11.3375 2.53312 10.8044 3.59935 9.73817C4.2392 9.09832 4.53628 8.46428 4.53628 7.55206C4.53628 6.76065 4.38249 5.63214 5 5.00944C5.62243 4.38178 6.7556 4.53626 7.55208 4.53626C8.46427 4.53626 9.09832 4.2392 9.73815 3.59937C10.8044 2.53312 11.3375 2 12 2C12.6625 2 13.1956 2.53312 14.2618 3.59937C14.9015 4.23907 15.5355 4.53626 16.4479 4.53626C17.2393 4.53626 18.3679 4.38247 18.9906 5C19.6182 5.62243 19.4637 6.75559 19.4637 7.55206C19.4637 8.55858 19.6839 9.02137 20.4006 9.73817C21.4669 10.8044 22 11.3375 22 12C22 12.6624 21.4669 13.1956 20.4006 14.2618C19.6838 14.9786 19.4637 15.4414 19.4637 16.4479C19.4637 17.2444 19.6182 18.3776 18.9905 19Z\" />\r\n                  <path d=\"M9 12.8929C9 12.8929 10.2 13.5447 10.8 14.5C10.8 14.5 12.6 10.75 15 9.5\" />\r\n                </svg>\r\n                {item}\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </TimelineAnimation>\r\n      </TimelineAnimation>\r\n\r\n      {/* Partnership Card */}\r\n      <TimelineAnimation\r\n        animationNum={9}\r\n        timelineRef={timelineRef}\r\n        className=\"mt-6 bg-linear-to-b from-neutral-950 to-neutral-800 text-white rounded-3xl p-10 md:flex items-center gap-4 relative overflow-hidden\"\r\n      >\r\n        <div className=\"flex-1 space-y-3 relative z-10\">\r\n          <div className=\"flex items-center gap-2 text-lime-400 text-sm font-medium\">\r\n            <div className=\"size-2 rounded-full bg-lime-500 animate-pulse\" />\r\n            Limited availability\r\n          </div>\r\n          <h3 className=\"text-3xl font-bold\">Product Partnership</h3>\r\n          <p className=\"text-neutral-400 text-pretty\">\r\n            Get full-product team, according to your needs. No long-term\r\n            commitment.\r\n          </p>\r\n          <div className=\"flex items-baseline gap-1\">\r\n            <span className=\"text-4xl font-bold flex items-center\">\r\n              $\r\n              <NumberFlow\r\n                value={partnershipPrice}\r\n                format={{ useGrouping: false }}\r\n              />\r\n            </span>\r\n            <span className=\"text-neutral-500 text-sm\">\r\n              /{billing === 'monthly' ? 'month' : 'yearly'}\r\n            </span>\r\n          </div>\r\n          <TimelineAnimation animationNum={10} timelineRef={timelineRef}>\r\n            <Button\r\n              variant=\"outline\"\r\n              className=\"w-fit text-black bg-white hover:bg-neutral-100 gap-2 px-8 text-lg\"\r\n            >\r\n              Book a call <Calendar className=\"size-5\" />\r\n            </Button>\r\n          </TimelineAnimation>\r\n        </div>\r\n        <div className=\"flex-1 grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-2 relative z-10\">\r\n          {[\r\n            'Development lead',\r\n            'Flexible communication',\r\n            'No hire costs',\r\n            '1 workstream',\r\n            'Pause or resume anytime',\r\n            'Revisions',\r\n          ].map((item, i) => (\r\n            <TimelineAnimation\r\n              key={i}\r\n              animationNum={11 + i}\r\n              timelineRef={timelineRef}\r\n              className=\"flex items-center gap-3 text-sm text-neutral-300\"\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                fill=\"#000000\"\r\n                stroke=\"#fff\"\r\n                stroke-width=\"1.5\"\r\n              >\r\n                <path d=\"M18.9905 19H19M18.9905 19C18.3678 19.6175 17.2393 19.4637 16.4479 19.4637C15.4765 19.4637 15.0087 19.6537 14.3154 20.347C13.7251 20.9374 12.9337 22 12 22C11.0663 22 10.2749 20.9374 9.68457 20.347C8.99128 19.6537 8.52349 19.4637 7.55206 19.4637C6.76068 19.4637 5.63218 19.6175 5.00949 19C4.38181 18.3776 4.53628 17.2444 4.53628 16.4479C4.53628 15.4414 4.31616 14.9786 3.59938 14.2618C2.53314 13.1956 2.00002 12.6624 2 12C2.00001 11.3375 2.53312 10.8044 3.59935 9.73817C4.2392 9.09832 4.53628 8.46428 4.53628 7.55206C4.53628 6.76065 4.38249 5.63214 5 5.00944C5.62243 4.38178 6.7556 4.53626 7.55208 4.53626C8.46427 4.53626 9.09832 4.2392 9.73815 3.59937C10.8044 2.53312 11.3375 2 12 2C12.6625 2 13.1956 2.53312 14.2618 3.59937C14.9015 4.23907 15.5355 4.53626 16.4479 4.53626C17.2393 4.53626 18.3679 4.38247 18.9906 5C19.6182 5.62243 19.4637 6.75559 19.4637 7.55206C19.4637 8.55858 19.6839 9.02137 20.4006 9.73817C21.4669 10.8044 22 11.3375 22 12C22 12.6624 21.4669 13.1956 20.4006 14.2618C19.6838 14.9786 19.4637 15.4414 19.4637 16.4479C19.4637 17.2444 19.6182 18.3776 18.9905 19Z\" />\r\n                <path d=\"M9 12.8929C9 12.8929 10.2 13.5447 10.8 14.5C10.8 14.5 12.6 10.75 15 9.5\" />\r\n              </svg>\r\n              {item}\r\n            </TimelineAnimation>\r\n          ))}\r\n        </div>\r\n      </TimelineAnimation>\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"
}