{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-7","type":"registry:block","title":"Pricing 7","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/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 { Button } from \"@/components/ui/button\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { ArrowUpRightIcon, CheckIcon } from 'lucide-react'\n\nconst animVariant: Variants = {\n  initial: { opacity: 0, y: 14, filter: \"blur(2px)\" },\n  animate: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", damping: 22, stiffness: 320 },\n  },\n  exit: {\n    opacity: 0,\n    y: -10,\n    filter: \"blur(2px)\",\n    transition: { duration: 0.15 },\n  },\n}\n\ntype PricingTier = {\n  value: string\n  label: string\n  price: number\n  description: string\n  features: string[]\n}\n\nconst tiers: PricingTier[] = [\n  {\n    value: \"starter\",\n    label: \"Starter\",\n    price: 29,\n    description:\n      \"For solo founders validating ideas and building initial traction.\",\n    features: [\n      \"Up to 3 projects\",\n      \"Basic analytics\",\n      \"Email support\",\n      \"5 GB storage\",\n      \"Community access\",\n    ],\n  },\n  {\n    value: \"growth\",\n    label: \"Growth\",\n    price: 79,\n    description: \"For small teams scaling their product with advanced tooling.\",\n    features: [\n      \"Unlimited projects\",\n      \"Advanced analytics & funnels\",\n      \"Priority support (8h SLA)\",\n      \"50 GB storage\",\n      \"Custom integrations\",\n      \"Team collaboration\",\n      \"API access\",\n    ],\n  },\n  {\n    value: \"scale\",\n    label: \"Scale\",\n    price: 199,\n    description:\n      \"For established teams needing enterprise-grade infrastructure.\",\n    features: [\n      \"Everything in Growth\",\n      \"Dedicated account manager\",\n      \"500 GB storage\",\n      \"SSO & SAML\",\n      \"Audit logs\",\n      \"Custom SLA\",\n      \"Unlimited API calls\",\n      \"On-premise deployment\",\n    ],\n  },\n]\n\nexport function Pricing() {\n  const [selected, setSelected] = useState(\"growth\")\n\n  const currentTier = tiers.find((t) => t.value === selected) ?? tiers[1]\n\n  return (\n    <section aria-label=\"Pricing\" className=\"mx-auto w-full max-w-3xl\">\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=\"secondary\" className=\"w-fit\">\n            Pricing\n          </Badge>\n          <h2 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl\">\n            Select your growth stage\n          </h2>\n          <p className=\"max-w-2xl text-lg text-muted-foreground\">\n            Pick a plan that matches where you are today. Upgrade seamlessly as\n            your product and team evolve.\n          </p>\n        </div>\n\n        <div className=\"flex justify-center\">\n          <ToggleGroup\n            value={[selected]}\n            onValueChange={(val) => {\n              if (val[0]) setSelected(val[0])\n            }}\n            spacing={1}\n            className=\"h-auto rounded-full bg-muted p-1\"\n          >\n            {tiers.map((tier) => (\n              <ToggleGroupItem\n                key={tier.value}\n                value={tier.value}\n                className=\"min-w-28 rounded-full border-0 px-6 py-2 text-muted-foreground data-pressed:bg-card data-pressed:text-foreground\"\n              >\n                {tier.label}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        <div className=\"w-full max-w-2xl\">\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              key={currentTier.value}\n              variants={animVariant}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              className=\"rounded-4xl bg-muted p-1\"\n            >\n              <div className=\"grid grid-cols-1 items-start gap-6 rounded-3xl bg-card p-8 shadow-elevated-lg md:grid-cols-[1.25fr_auto_1fr]\">\n                <div className=\"flex flex-col gap-6 md:order-3\">\n                  <div className=\"flex flex-col gap-2\">\n                    <h3 className=\"text-xl font-medium text-foreground\">\n                      {currentTier.label} plan\n                    </h3>\n                    <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                      {currentTier.description}\n                    </p>\n                  </div>\n\n                  <div className=\"flex flex-col gap-1\">\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"text-6xl font-semibold tracking-tight text-foreground tabular-nums\">\n                        ${currentTier.price}\n                      </span>\n                      <span className=\"text-lg text-muted-foreground\">\n                        /month\n                      </span>\n                    </div>\n                    <p className=\"text-sm text-muted-foreground\">\n                      billed monthly\n                    </p>\n                  </div>\n\n                  <FancyButton size=\"lg\" className=\"w-full\">\n                    Start free trial\n                    <ArrowUpRightIcon />\n                  </FancyButton>\n                </div>\n\n                <div className=\"hidden w-px self-stretch bg-border/50 md:order-2 md:block\" />\n\n                <div className=\"flex flex-col gap-4 md:order-1\">\n                  <ul className=\"flex flex-col gap-3\">\n                    {currentTier.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-sm text-muted-foreground\">\n                          {feature}\n                        </span>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              </div>\n            </motion.div>\n          </AnimatePresence>\n        </div>\n\n        <div className=\"flex flex-col items-center gap-2 text-center\">\n          <p className=\"text-base text-muted-foreground\">\n            Not sure which plan is right? We&apos;re happy to help.\n          </p>\n          <Button variant=\"link\" className=\"gap-1 p-0 text-primary\">\n            Talk to our team\n            <ArrowUpRightIcon  className=\"size-3.5\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}","target":"components/pricing.tsx"}]}