{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-13","type":"registry:block","title":"Pricing 13","description":"","dependencies":["lucide-react","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/toggle-group.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 {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { CheckIcon } from 'lucide-react'\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 ScreenRange = {\n  label: string\n  price: number\n}\n\nconst screenRanges: ScreenRange[] = [\n  { label: \"1 - 9\", price: 18 },\n  { label: \"10 - 19\", price: 16 },\n  { label: \"20 - 49\", price: 14 },\n  { label: \"50+\", price: 12 },\n]\n\nconst coreFeatures = [\n  \"Unlimited workspace seats\",\n  \"Hierarchical permission levels\",\n  \"Uncapped data sources & streams\",\n  \"Automated moderation & curation\",\n  \"Custom branding (Logo & typography)\",\n  \"Priority 24/7 technical support\",\n]\n\nexport function Pricing() {\n  const [activeRange, setActiveRange] = useState(0)\n\n  const activeRangeLabel = screenRanges[activeRange]!.label\n  const currentPrice = screenRanges[activeRange]!.price\n  const priceChars = String(currentPrice).split(\"\")\n\n  return (\n    <section\n      aria-label=\"Pricing\"\n      className=\"mx-auto flex w-full max-w-6xl flex-col gap-12 py-4\"\n    >\n      <div className=\"flex flex-col gap-8 md:flex-row md:items-end md:justify-between\">\n        <div className=\"flex flex-col gap-4\">\n          <h2 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl\">\n            Flexible pricing\n          </h2>\n          <p className=\"text-lg text-muted-foreground\">\n            Deploying a massive digital signage network with complex needs?{\" \"}\n            <a\n              href=\"#\"\n              className=\"font-medium text-foreground underline underline-offset-4 hover:no-underline\"\n            >\n              Inquire here\n            </a>\n          </p>\n        </div>\n\n        <div className=\"flex flex-col gap-3\">\n          <span className=\"text-right text-sm font-medium text-foreground\">\n            How many displays do you manage?\n          </span>\n          <ToggleGroup\n            value={[activeRangeLabel]}\n            onValueChange={(value) => {\n              if (!value[0]) return\n              const nextIndex = screenRanges.findIndex(\n                (range) => range.label === value[0]\n              )\n              if (nextIndex !== -1) setActiveRange(nextIndex)\n            }}\n            className=\"flex flex-nowrap gap-1 rounded-full bg-muted p-1\"\n            spacing={1}\n          >\n            {screenRanges.map((range, idx) => (\n              <ToggleGroupItem\n                key={range.label}\n                value={range.label}\n                className=\"h-auto shrink-0 rounded-full bg-transparent px-5 py-2.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all duration-200 hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground\"\n              >\n                {range.label}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-[1.5fr_1fr]\">\n        <div className=\"rounded-4xl bg-card p-8 shadow-elevated-lg md:p-10\">\n          <div className=\"grid grid-cols-1 gap-10 md:grid-cols-[1fr_auto_1.2fr]\">\n            <div className=\"flex flex-col gap-6\">\n              <Badge\n                variant=\"secondary\"\n                className=\"w-fit bg-muted/50 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase\"\n              >\n                Dynamic Content\n              </Badge>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                Elevate and automate your display network with rich,\n                auto-updating data feeds.\n              </p>\n              <div className=\"mt-2 flex flex-col gap-1\">\n                <div className=\"flex items-baseline text-6xl font-bold tracking-tight text-foreground\">\n                  <span>$</span>\n                  <div className=\"flex\">\n                    <AnimatePresence mode=\"popLayout\">\n                      {priceChars.map((char, idx) => (\n                        <motion.span\n                          key={`${currentPrice}-${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                </div>\n                <span className=\"text-sm font-medium text-muted-foreground\">\n                  / month per display\n                </span>\n              </div>\n              <FancyButton className=\"mt-4 w-fit rounded-full px-8 text-sm font-medium\">\n                Start free trial\n              </FancyButton>\n            </div>\n\n            <div className=\"hidden w-px bg-border/50 md:block\" />\n\n            <div className=\"flex flex-col justify-center\">\n              <ul className=\"flex flex-col gap-3\">\n                {coreFeatures.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-sm font-medium text-muted-foreground\">\n                      {feature}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col gap-8 rounded-4xl bg-card p-8 shadow-elevated-lg md:p-10\">\n          <Badge\n            variant=\"secondary\"\n            className=\"w-fit bg-muted/50 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase\"\n          >\n            Integrations - Addons\n          </Badge>\n\n          <div className=\"flex flex-col gap-8\">\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"text-sm font-bold text-foreground\">\n                Social Media:\n              </span>\n              <div className=\"flex flex-col\">\n                <span className=\"text-4xl font-bold tracking-tight text-foreground\">\n                  $5\n                </span>\n                <span className=\"mt-1 text-xs font-medium text-muted-foreground\">\n                  / display per month\n                </span>\n              </div>\n              <span className=\"mt-1 text-sm leading-snug text-muted-foreground\">\n                Supported platforms: LinkedIn, Instagram, X (Twitter), Facebook\n              </span>\n            </div>\n\n            <div className=\"h-px w-full bg-border/50\" />\n\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"text-sm font-bold text-foreground\">\n                Internal Comms:\n              </span>\n              <div className=\"flex flex-col\">\n                <span className=\"text-4xl font-bold tracking-tight text-foreground\">\n                  $3\n                </span>\n                <span className=\"mt-1 text-xs font-medium text-muted-foreground\">\n                  / display per month\n                </span>\n              </div>\n              <span className=\"mt-1 text-sm leading-snug text-muted-foreground\">\n                Supported platforms: Microsoft Teams, Slack, Discord, Viva\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}","target":"components/pricing.tsx"}]}