{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-single-plan",
  "title": "Single plan pricing",
  "description": "One all-inclusive plan card beside a benefit list and short reassurance answers.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "badge",
    "button",
    "https://velora.colorlib.com/r/avatar-circles.json",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/glowing-effect.json",
    "https://velora.colorlib.com/r/grid-pattern.json",
    "https://velora.colorlib.com/r/spotlight-card.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/pricing-single-plan.tsx",
      "content": "import {\n  ArrowRightIcon,\n  CheckIcon,\n  InfinityIcon,\n  LifeBuoyIcon,\n  ShieldCheckIcon,\n  UsersIcon,\n} from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { AvatarCircles } from \"@/components/velora/avatar-circles\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { GlowingEffect } from \"@/components/velora/glowing-effect\";\nimport { GridPattern } from \"@/components/velora/grid-pattern\";\nimport { SpotlightCard } from \"@/components/velora/spotlight-card\";\n\nconst PLAN = {\n  name: \"Acme Complete\",\n  price: 29,\n  unit: \"per seat / month\",\n  note: \"Billed yearly, or $35 month to month\",\n  included: [\n    \"Unlimited projects and docs\",\n    \"Roadmaps, releases and changelog\",\n    \"Automations and integrations\",\n    \"Guest access and client portals\",\n    \"SSO and granular permissions\",\n    \"Unlimited version history\",\n    \"Analytics and custom reports\",\n    \"Priority support, every day\",\n  ],\n};\n\nconst BENEFITS = [\n  {\n    icon: InfinityIcon,\n    title: \"No feature gates\",\n    description:\n      \"Every seat gets every feature from day one. No upsells hiding behind a tier.\",\n  },\n  {\n    icon: UsersIcon,\n    title: \"Pay for people, not usage\",\n    description:\n      \"Guests and viewers are free. You only pay for teammates who edit.\",\n  },\n  {\n    icon: ShieldCheckIcon,\n    title: \"Secure by default\",\n    description:\n      \"SOC 2 Type II, encryption at rest and in transit, EU or US data residency.\",\n  },\n  {\n    icon: LifeBuoyIcon,\n    title: \"Humans on support\",\n    description: \"Real engineers answer within four hours, including weekends.\",\n  },\n];\n\nconst REASSURANCES = [\n  {\n    question: \"Is there a free trial?\",\n    answer: \"Yes — 14 days with every feature, no card required.\",\n  },\n  {\n    question: \"Can I cancel at any time?\",\n    answer: \"Cancel in two clicks and we refund unused months on yearly plans.\",\n  },\n  {\n    question: \"Do you offer discounts?\",\n    answer: \"Non-profits, schools and early-stage startups get 50% off.\",\n  },\n];\n\nconst CUSTOMERS = [\n  \"Mara Lind\",\n  \"Theo Brandt\",\n  \"Ines Okafor\",\n  \"Kai Sato\",\n  \"Rhea Patel\",\n];\n\n/**\n * One all-inclusive plan: a spotlight card with the price and everything it\n * includes, beside the reasons to pick it and quick answers to the usual\n * objections.\n */\nexport function PricingSinglePlan() {\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <GridPattern\n        aria-hidden\n        className=\"absolute inset-0 -z-10 size-full stroke-foreground/[0.06] [mask-image:radial-gradient(ellipse_at_top_left,black,transparent_60%)]\"\n      />\n\n      <div className=\"mx-auto max-w-7xl\">\n        <BlurFade className=\"max-w-2xl\">\n          <p className=\"text-sm font-medium text-primary\">Pricing</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl\">\n            One plan. Everything included.\n          </h2>\n          <p className=\"mt-5 text-lg text-pretty text-muted-foreground\">\n            No tiers to compare and no add-ons to budget for. Pick the number of\n            seats, and your whole team gets the full product.\n          </p>\n        </BlurFade>\n\n        <div className=\"mt-16 grid gap-12 lg:grid-cols-12 lg:gap-16\">\n          <BlurFade delay={0.1} className=\"lg:col-span-6 xl:col-span-7\">\n            <div className=\"relative rounded-3xl\">\n              <SpotlightCard\n                radius={420}\n                className=\"rounded-3xl shadow-xl shadow-primary/5\"\n              >\n                <div\n                  aria-hidden\n                  className=\"pointer-events-none absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-primary/10 to-transparent\"\n                />\n                <div\n                  aria-hidden\n                  className=\"pointer-events-none absolute inset-x-10 top-0 h-px bg-gradient-to-r from-transparent via-brand-via to-transparent\"\n                />\n                <div className=\"relative p-8 sm:p-10\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-3\">\n                    <h3 className=\"text-xl font-semibold\">{PLAN.name}</h3>\n                    <Badge variant=\"secondary\">14-day free trial</Badge>\n                  </div>\n\n                  <p className=\"mt-8 flex flex-wrap items-baseline gap-x-2 gap-y-1\">\n                    <span className=\"bg-gradient-to-br from-foreground to-foreground/60 bg-clip-text text-6xl font-semibold tracking-tight text-transparent tabular-nums\">\n                      ${PLAN.price}\n                    </span>\n                    <span className=\"text-muted-foreground\">{PLAN.unit}</span>\n                  </p>\n                  <p className=\"mt-2 text-sm text-muted-foreground\">\n                    {PLAN.note}\n                  </p>\n\n                  <div className=\"mt-8 flex flex-col gap-3 sm:flex-row\">\n                    <Button\n                      asChild\n                      size=\"lg\"\n                      className=\"h-11 rounded-full px-6\"\n                    >\n                      <a href=\"#\">\n                        Start your free trial <ArrowRightIcon />\n                      </a>\n                    </Button>\n                    <Button\n                      asChild\n                      size=\"lg\"\n                      variant=\"outline\"\n                      className=\"h-11 rounded-full px-6\"\n                    >\n                      <a href=\"#\">Talk to sales</a>\n                    </Button>\n                  </div>\n\n                  <div className=\"mt-10 border-t pt-8\">\n                    <p className=\"text-sm font-medium\">\n                      Everything in the plan\n                    </p>\n                    <ul className=\"mt-5 grid gap-3 text-sm sm:grid-cols-2\">\n                      {PLAN.included.map((item) => (\n                        <li key={item} className=\"flex gap-3\">\n                          <span className=\"mt-0.5 grid size-4 shrink-0 place-items-center rounded-full bg-primary/15 text-primary\">\n                            <CheckIcon aria-hidden className=\"size-3\" />\n                          </span>\n                          {item}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n\n                  <div className=\"mt-10 flex flex-wrap items-center gap-4 rounded-2xl bg-muted/60 p-4\">\n                    <AvatarCircles people={CUSTOMERS} extra={99} aria-hidden />\n                    <p className=\"text-sm text-muted-foreground\">\n                      <span className=\"font-medium text-foreground\">\n                        12,000+ teams\n                      </span>{\" \"}\n                      switched to Acme this year.\n                    </p>\n                  </div>\n                </div>\n              </SpotlightCard>\n              <GlowingEffect proximity={96} spread={60} />\n            </div>\n          </BlurFade>\n\n          <div className=\"lg:col-span-6 xl:col-span-5\">\n            <BlurFade delay={0.2}>\n              <h3 className=\"text-lg font-semibold\">Why a single plan</h3>\n              <ul className=\"mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2\">\n                {BENEFITS.map(({ icon: Icon, title, description }) => (\n                  <li key={title}>\n                    <span className=\"grid size-10 place-items-center rounded-xl border bg-card shadow-xs\">\n                      <Icon aria-hidden className=\"size-5 text-primary\" />\n                    </span>\n                    <p className=\"mt-4 font-medium\">{title}</p>\n                    <p className=\"mt-1 text-sm text-pretty text-muted-foreground\">\n                      {description}\n                    </p>\n                  </li>\n                ))}\n              </ul>\n            </BlurFade>\n\n            <BlurFade delay={0.3} className=\"mt-12 border-t pt-10\">\n              <h3 className=\"text-lg font-semibold\">Good to know</h3>\n              <dl className=\"mt-6 space-y-6\">\n                {REASSURANCES.map(({ question, answer }) => (\n                  <div key={question}>\n                    <dt className=\"font-medium\">{question}</dt>\n                    <dd className=\"mt-1 text-sm text-pretty text-muted-foreground\">\n                      {answer}\n                    </dd>\n                  </div>\n                ))}\n              </dl>\n              <p className=\"mt-8 text-sm text-muted-foreground\">\n                More questions?{\" \"}\n                <a\n                  href=\"#\"\n                  className=\"font-medium text-foreground underline underline-offset-4 hover:text-primary\"\n                >\n                  Read the billing FAQ\n                </a>\n              </p>\n            </BlurFade>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/pricing-single-plan.tsx"
    }
  ],
  "categories": [
    "pricing-sections"
  ],
  "type": "registry:block"
}