{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-10","type":"registry:block","title":"Pricing 10","description":"","dependencies":["lucide-react","motion"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/badge.json","https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json","https://www.diarmuradi.com/r/styles/base-nova/separator.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 { AnimatePresence, motion, type Variants } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { ArrowUpRightIcon, CheckIcon } from 'lucide-react'\n\nconst animVariant: Variants = {\n  initial: { opacity: 0, y: 24, scale: 0.7 },\n  animate: (i: number) => ({\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: {\n      delay: i * 0.04,\n      type: \"spring\",\n      damping: 12,\n      stiffness: 400,\n      mass: 0.8,\n    },\n  }),\n  exit: {\n    opacity: 0,\n    y: -16,\n    scale: 0.85,\n    transition: { duration: 0.12 },\n  },\n}\n\ntype PriceTier = {\n  maxVolume: number\n  label: string\n  price: number\n}\n\nconst priceTiers: PriceTier[] = [\n  { maxVolume: 10000, label: \"10K\", price: 49 },\n  { maxVolume: 50000, label: \"50K\", price: 149 },\n  { maxVolume: 200000, label: \"200K\", price: 399 },\n  { maxVolume: 500000, label: \"500K\", price: 699 },\n  { maxVolume: 1000000, label: \"1M\", price: 899 },\n]\n\nconst features = [\n  \"Unlimited API endpoints\",\n  \"Real-time event streaming\",\n  \"Global edge deployment\",\n  \"Custom rate limiting\",\n  \"Advanced error tracking\",\n  \"Dedicated support channel\",\n]\n\nfunction formatVolume(v: number): string {\n  if (v >= 1000000) return (v / 1000000).toFixed(0) + \"M\"\n  if (v >= 1000) return (v / 1000).toFixed(0) + \"K\"\n  return v.toString()\n}\n\nfunction getTierForVolume(volume: number): PriceTier {\n  for (const tier of priceTiers) {\n    if (volume <= tier.maxVolume) return tier\n  }\n  return priceTiers[priceTiers.length - 1]!\n}\n\nexport function Pricing() {\n  const [volume, setVolume] = useState(50000)\n\n  const currentTier = getTierForVolume(volume)\n  const priceChars = currentTier.price.toString().split(\"\")\n\n  return (\n    <section aria-label=\"Pricing\" className=\"mx-auto w-full max-w-5xl\">\n      <div className=\"flex flex-col items-center gap-8\">\n        <div className=\"flex flex-col items-center gap-4 text-center\">\n          <Badge variant=\"outline\" className=\"w-fit\">\n            Volume pricing\n          </Badge>\n          <h2 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl\">\n            Scale without limits\n          </h2>\n          <p className=\"max-w-2xl text-lg text-muted-foreground\">\n            Pricing that adapts to your traffic. Slide to estimate your monthly\n            cost based on API requests.\n          </p>\n        </div>\n\n        <div className=\"grid w-full grid-cols-1 gap-4 lg:grid-cols-2\">\n          <div className=\"flex flex-col gap-8 rounded-4xl bg-muted p-8\">\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"text-lg font-medium text-foreground\">\n                  Monthly API requests\n                </h3>\n                <Badge variant=\"secondary\">{currentTier.label}</Badge>\n              </div>\n              <Slider\n                value={[volume]}\n                onValueChange={(val) =>\n                  setVolume(Array.isArray(val) ? (val[0] ?? 0) : val)\n                }\n                min={1000}\n                max={1000000}\n                step={1000}\n                className=\"w-full cursor-grab active:cursor-grabbing **:data-[slot=slider-thumb]:h-6.5 **:data-[slot=slider-thumb]:w-3 **:data-[slot=slider-thumb]:border-[3px] **: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 **:data-[slot=slider-track]:bg-input/60\"\n              />\n              <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n                <span>1K</span>\n                <span className=\"text-sm font-medium text-foreground\">\n                  {formatVolume(volume)} requests/mo\n                </span>\n                <span>1M</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col items-center gap-3 text-center\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-7xl font-semibold tracking-tight text-foreground\">\n                  $\n                </span>\n                <AnimatePresence mode=\"popLayout\">\n                  {priceChars.map((char, idx) => (\n                    <motion.span\n                      key={`${currentTier.price}-${char}-${idx}`}\n                      variants={animVariant}\n                      initial=\"initial\"\n                      animate=\"animate\"\n                      exit=\"exit\"\n                      custom={idx}\n                      className=\"inline-block text-7xl font-semibold tracking-tight text-foreground\"\n                    >\n                      {char}\n                    </motion.span>\n                  ))}\n                </AnimatePresence>\n                <span key=\"period\" className=\"text-xl text-muted-foreground\">\n                  /month\n                </span>\n              </div>\n            </div>\n\n            <FancyButton size=\"lg\" className=\"w-full\">\n              Start free trial\n              <ArrowUpRightIcon />\n            </FancyButton>\n          </div>\n\n          <div className=\"flex flex-col gap-6 rounded-4xl bg-card p-8 shadow-elevated-lg\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"text-xl font-medium text-foreground\">\n                Every plan includes\n              </h3>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                No matter your volume, you get full access to our complete\n                platform with enterprise-grade reliability.\n              </p>\n            </div>\n\n            <ul className=\"flex flex-col gap-4\">\n              {features.map((feature) => (\n                <li key={feature} className=\"flex items-start gap-3\">\n                  <div className=\"mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary\">\n                    <CheckIcon  className=\"size-3 text-primary-foreground\" />\n                  </div>\n                  <span className=\"text-base text-muted-foreground\">\n                    {feature}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}","target":"components/pricing.tsx"}]}