{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-12","type":"registry:block","title":"Pricing 12","description":"","dependencies":["cn","motion"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/badge.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json","https://www.diarmuradi.com/r/styles/base-nova/input-group.json","https://www.diarmuradi.com/r/styles/base-nova/slider.json"],"files":[{"path":"pricing.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"cn\"\nimport { AnimatePresence, motion, type Variants } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/components/ui/input-group\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { FancyButton } from \"@/components/fancy-button\"\n\nconst animVariant: Variants = {\n  hidden: { opacity: 0, y: 10, filter: \"blur(4px)\", scale: 0.98 },\n  visible: (i: number) => ({\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    scale: 1,\n    transition: {\n      delay: i * 0.03,\n      type: \"spring\",\n      damping: 22,\n      stiffness: 280,\n    },\n  }),\n  exit: {\n    opacity: 0,\n    y: -10,\n    filter: \"blur(4px)\",\n    scale: 0.98,\n    transition: { duration: 0.14 },\n  },\n}\n\ntype SliderPatternProps = {\n  value: number\n  setValue: (val: number) => void\n}\n\nexport function Pricing() {\n  const [weeklyReports, setWeeklyReports] = useState(10)\n  const [costPerReport, setCostPerReport] = useState(150)\n\n  const monthlyReports = weeklyReports * 4\n  const monthlyValueSaved = monthlyReports * costPerReport\n  const platformCost = 299\n  const totalRoi = Math.max(0, monthlyValueSaved - platformCost)\n\n  const roiChars = String(totalRoi).split(\"\")\n\n  return (\n    <section\n      aria-label=\"Pricing\"\n      className=\"mx-auto flex w-full max-w-5xl flex-col gap-10\"\n    >\n      <div className=\"flex flex-col items-start gap-4\">\n        <Badge variant=\"secondary\" className=\"h-7 px-3 text-primary\">\n          Calculate your ROI\n        </Badge>\n        <h2 className=\"max-w-xl text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl\">\n          See what you save\n        </h2>\n      </div>\n\n      <div className=\"flex w-full flex-col gap-2 rounded-4xl bg-card p-1 shadow-elevated-lg lg:flex-row\">\n        <div className=\"flex flex-1 flex-col gap-12 p-8 lg:p-10\">\n          <div className=\"flex flex-col gap-10\">\n            <p className=\"text-lg leading-relaxed text-muted-foreground\">\n              How many complex data reports is your team compiling manually\n              every single week?\n            </p>\n\n            <div className=\"flex flex-col gap-8\">\n              <div className=\"flex items-center justify-center gap-2 text-5xl font-bold tracking-tight text-foreground\">\n                <span>{weeklyReports}</span>\n                <span>reports</span>\n              </div>\n              <SliderPattern\n                value={weeklyReports}\n                setValue={setWeeklyReports}\n              />\n            </div>\n          </div>\n\n          <div className=\"h-px w-full bg-border/50\" />\n\n          <div className=\"flex flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between\">\n            <p className=\"text-base font-medium text-foreground\">\n              Average cost to produce one report?\n            </p>\n            <InputGroup className=\"h-11 w-fit\">\n              <InputGroupAddon>\n                <InputGroupText className=\"font-medium text-muted-foreground\">\n                  $\n                </InputGroupText>\n              </InputGroupAddon>\n              <InputGroupInput\n                type=\"number\"\n                value={costPerReport}\n                onChange={(e) => setCostPerReport(Number(e.target.value) || 0)}\n                min={0}\n                aria-label=\"Average cost per report\"\n                className=\"w-16 text-lg font-bold tracking-tight\"\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <InputGroupText className=\"text-sm font-medium text-muted-foreground\">\n                  /ea\n                </InputGroupText>\n              </InputGroupAddon>\n            </InputGroup>\n          </div>\n        </div>\n\n        <div className=\"flex w-full flex-col items-center justify-between gap-8 rounded-3xl bg-muted p-8 lg:w-105 lg:p-10\">\n          <div className=\"flex w-full flex-col items-center gap-2 text-center\">\n            <h3 className=\"font-medium tracking-tight text-foreground\">\n              Automated Monthly ROI\n            </h3>\n            <div className=\"mt-2 flex items-baseline gap-1 text-7xl font-bold tracking-tight text-foreground\">\n              <span>$</span>\n              <AnimatePresence mode=\"popLayout\">\n                {roiChars.map((char, idx) => (\n                  <motion.span\n                    key={`${totalRoi}-${idx}`}\n                    variants={animVariant}\n                    initial=\"hidden\"\n                    animate=\"visible\"\n                    exit=\"exit\"\n                    custom={idx}\n                    className=\"inline-block\"\n                  >\n                    {char}\n                  </motion.span>\n                ))}\n              </AnimatePresence>\n            </div>\n            <p className=\"mt-4 text-sm text-muted-foreground\">\n              Net savings with a DataSync enterprise plan\n            </p>\n            <FancyButton\n              size=\"lg\"\n              className=\"mt-6 w-full text-base font-medium\"\n            >\n              Start your free trial\n            </FancyButton>\n          </div>\n\n          <div className=\"flex w-full flex-col gap-3 text-sm\">\n            <p className=\"text-xs font-medium tracking-wider text-muted-foreground uppercase\">\n              Breakdown\n            </p>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">\n                Reports automated monthly\n              </span>\n              <span className=\"font-medium text-foreground\">\n                {monthlyReports}\n              </span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">Capital preserved</span>\n              <span className=\"font-medium text-foreground\">\n                ${monthlyValueSaved}\n              </span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground\">\n                DataSync platform fee\n              </span>\n              <span className=\"font-medium text-foreground\">\n                ${platformCost}\n              </span>\n            </div>\n            <div className=\"-mx-2 my-1 h-px bg-border/50\" />\n            <div className=\"flex items-center justify-between font-semibold\">\n              <span className=\"text-foreground\">Total monthly ROI</span>\n              <span className=\"text-foreground\">${totalRoi}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction SliderPattern({ value, setValue }: SliderPatternProps) {\n  const max = 20\n  const skipInterval = 5\n  const ticks = Array.from({ length: max + 1 }, (_, i) => i)\n\n  return (\n    <div className=\"mx-auto grid w-full gap-4\">\n      <Slider\n        value={[value]}\n        onValueChange={(val) =>\n          setValue(Array.isArray(val) ? (val[0] ?? 0) : val)\n        }\n        max={max}\n        min={0}\n        step={1}\n        className=\"cursor-grab active:cursor-grabbing **:data-[slot=slider-thumb]:h-6 **:data-[slot=slider-thumb]:w-6 **:data-[slot=slider-thumb]:border-4 **:data-[slot=slider-thumb]:border-solid **:data-[slot=slider-thumb]:border-card **:data-[slot=slider-thumb]:bg-primary **:data-[slot=slider-thumb]:ring-0 **:data-[slot=slider-thumb]:hover:ring-0 **:data-[slot=slider-thumb]:focus-visible:ring-0 **:data-[slot=slider-thumb]:active:ring-0 **:data-[slot=slider-track]:h-2.5 **:data-[slot=slider-track]:bg-input/60\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className=\"flex w-full items-center justify-between gap-1 px-3 text-xs font-medium text-muted-foreground\"\n      >\n        {ticks.map((tick) => (\n          <span\n            key={tick}\n            className=\"flex w-0 flex-col items-center justify-center gap-2\"\n          >\n            <span\n              className={cn(\n                \"w-px bg-muted-foreground/30\",\n                tick % skipInterval === 0 ? \"h-2\" : \"h-1\"\n              )}\n            />\n            <span\n              className={cn(\n                \"text-muted-foreground/70\",\n                tick % skipInterval !== 0 && \"opacity-0\"\n              )}\n            >\n              {tick}\n              {tick === max && \"+\"}\n            </span>\n          </span>\n        ))}\n      </span>\n    </div>\n  )\n}","target":"components/pricing.tsx"}]}