{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-pricings-pricing-6",
  "title": "Pricing 6",
  "description": "Tabbed individuals/teams pricing grid with coloured card backdrops, Avatar orbs, grain texture overlays, and feature checklists.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "button",
    "@odysseyui/components-primitives-avatar"
  ],
  "files": [
    {
      "path": "registry/components/pricings/pricing-6/index.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { Tick02Icon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\nimport Avatar from '@/components/odyssey/components/primitives/avatar';\n\ntype Palette6 = 'blue' | 'purple' | 'amber' | 'teal' | 'rose' | 'slate';\n\nexport type Plan6 = {\n  id: string;\n  name: string;\n  description: string;\n  palette: Palette6;\n  price: string;\n  originalPrice: string;\n  priceNote?: string;\n  ctaLabel: string;\n  ctaHref: string;\n  featuredLabel?: string;\n  features: string[];\n  footerNote?: string;\n  footerDesc?: string;\n  ctaDark?: boolean;\n};\n\nconst CARD_PALETTES: Record<\n  Palette6,\n  {\n    base: string;\n    blobA: string;\n    blobB: string;\n    avatarColor:\n      | 'blue'\n      | 'orange'\n      | 'red'\n      | 'green'\n      | 'purple'\n      | 'yellow'\n      | 'cyan'\n      | 'pink'\n      | 'indigo'\n      | 'lime'\n      | 'turquoise'\n      | 'violet';\n  }\n> = {\n  blue: {\n    base: 'bg-sky-50 dark:bg-blue-950',\n    blobA: 'bg-blue-500 dark:bg-blue-500',\n    blobB: 'bg-sky-200 dark:bg-sky-600',\n    avatarColor: 'blue',\n  },\n  purple: {\n    base: 'bg-violet-50 dark:bg-violet-950',\n    blobA: 'bg-violet-500 dark:bg-violet-500',\n    blobB: 'bg-fuchsia-200 dark:bg-fuchsia-600',\n    avatarColor: 'purple',\n  },\n  amber: {\n    base: 'bg-amber-50 dark:bg-amber-950',\n    blobA: 'bg-amber-500 dark:bg-amber-500',\n    blobB: 'bg-yellow-200 dark:bg-yellow-600',\n    avatarColor: 'yellow',\n  },\n  teal: {\n    base: 'bg-teal-50 dark:bg-teal-950',\n    blobA: 'bg-teal-500 dark:bg-teal-500',\n    blobB: 'bg-emerald-200 dark:bg-emerald-600',\n    avatarColor: 'turquoise',\n  },\n  rose: {\n    base: 'bg-rose-50 dark:bg-rose-950',\n    blobA: 'bg-rose-500 dark:bg-rose-500',\n    blobB: 'bg-pink-200 dark:bg-pink-600',\n    avatarColor: 'red',\n  },\n  slate: {\n    base: 'bg-slate-100 dark:bg-slate-900',\n    blobA: 'bg-slate-400 dark:bg-slate-500',\n    blobB: 'bg-zinc-200 dark:bg-zinc-600',\n    avatarColor: 'blue',\n  },\n};\n\nconst INDIVIDUALS_PLANS: Plan6[] = [\n  {\n    id: 'web-hero',\n    name: 'Web Hero',\n    description: 'Get access to React library components and features',\n    palette: 'blue',\n    originalPrice: '$299',\n    price: '$149',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Get Web edition',\n    ctaHref: '/checkout/web',\n    features: [\n      'Pro React components',\n      'Premium templates',\n      'Advanced AI (Skills and MCPs)',\n      'Premium design systems',\n      'Advanced theme builder',\n      'Private Discord channel',\n      'Prioritized issues',\n      'Priority support',\n    ],\n    footerNote: 'Optional renewal at $99/yr',\n    footerDesc:\n      'Get another year of updates or keep using without renewing. No pressure.',\n  },\n  {\n    id: 'mobile-hero',\n    name: 'Mobile Hero',\n    description: 'Get access to React Native library components and features',\n    palette: 'purple',\n    originalPrice: '$299',\n    price: '$149',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Get Mobile edition',\n    ctaHref: '/checkout/mobile',\n    features: [\n      'Pro React Native components',\n      'Premium templates',\n      'Advanced AI (Skills and MCPs)',\n      'Premium design systems',\n      'Advanced theme builder',\n      'Private Discord channel',\n      'Prioritized issues',\n      'Priority support',\n    ],\n    footerNote: 'Optional renewal at $99/yr',\n    footerDesc:\n      'Get another year of updates or keep using without renewing. No pressure.',\n  },\n  {\n    id: 'super-hero',\n    name: 'Super Hero',\n    description: 'The full system. React and React Native, together',\n    palette: 'amber',\n    originalPrice: '$399',\n    price: '$199',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Get Super edition',\n    ctaHref: '/checkout/super',\n    featuredLabel: 'Save $99 with bundle',\n    ctaDark: true,\n    features: [\n      'All Pro components (React + React Native)',\n      'Premium templates',\n      'Advanced AI (Skills and MCPs)',\n      'Premium design systems',\n      'Advanced theme builder',\n      'Private Discord channels',\n      'Prioritized issues',\n      'Priority support',\n    ],\n    footerNote: 'Optional renewal at $129/yr',\n    footerDesc:\n      'Get another year of updates or keep using without renewing. No pressure.',\n  },\n];\n\nconst TEAMS_PLANS: Plan6[] = [\n  {\n    id: 'team-starter',\n    name: 'Team Starter',\n    description: 'Shared components and collaboration tools for small teams',\n    palette: 'teal',\n    originalPrice: '$599',\n    price: '$299',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Get Team Starter',\n    ctaHref: '/checkout/team-starter',\n    features: [\n      'Up to 5 seats',\n      'Shared component library',\n      'Team Discord channel',\n      'Priority support',\n      'Premium templates',\n      'Advanced AI (Skills and MCPs)',\n      'Prioritized issues',\n      'Quarterly updates',\n    ],\n    footerNote: 'Optional renewal at $149/yr',\n    footerDesc:\n      \"Keep your team's access or keep using without renewing. No pressure.\",\n  },\n  {\n    id: 'team-pro',\n    name: 'Team Pro',\n    description: 'Everything your team needs to ship faster, together',\n    palette: 'rose',\n    originalPrice: '$999',\n    price: '$499',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Get Team Pro',\n    ctaHref: '/checkout/team-pro',\n    featuredLabel: 'Most popular for teams',\n    features: [\n      'Up to 15 seats',\n      'Shared component library',\n      'Dedicated Discord channel',\n      'Priority support',\n      'Advanced AI (Skills and MCPs)',\n      'Premium design systems',\n      'Prioritized issues',\n      'Monthly updates',\n    ],\n    footerNote: 'Optional renewal at $249/yr',\n    footerDesc:\n      \"Keep your team's access or keep using without renewing. No pressure.\",\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise',\n    description: 'Custom licensing and white-glove support for large orgs',\n    palette: 'slate',\n    originalPrice: '$2499',\n    price: '$1299',\n    priceNote: 'One-time payment',\n    ctaLabel: 'Contact sales',\n    ctaHref: '/contact',\n    ctaDark: true,\n    features: [\n      'Unlimited seats',\n      'Custom component library',\n      'Dedicated support manager',\n      'SLA guarantee',\n      'Custom AI integrations',\n      'White-label option',\n      'Prioritized issues',\n      'Weekly syncs',\n    ],\n    footerNote: 'Custom renewal terms',\n    footerDesc:\n      'We work with your procurement and legal teams to define renewal terms.',\n  },\n];\n\ntype TabKey = 'individuals' | 'teams';\n\nfunction PlanCard({ plan }: { plan: Plan6 }) {\n  const pal = CARD_PALETTES[plan.palette];\n\n  return (\n    <div className=\"flex flex-col rounded-2xl border bg-card p-1\">\n      <div\n        className={cn(\n          'relative overflow-hidden rounded-xl border border-black/6 p-5 dark:border-white/10',\n          pal.base,\n        )}\n      >\n        <div\n          className={cn(\n            'pointer-events-none absolute -top-12 -right-12 size-52 rounded-full opacity-55 blur-3xl dark:opacity-70',\n            pal.blobA,\n          )}\n        />\n        <div\n          className={cn(\n            'pointer-events-none absolute top-1/3 -left-8 size-60 rounded-full opacity-25 blur-3xl dark:opacity-35',\n            pal.blobB,\n          )}\n        />\n\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 h-full w-full opacity-[0.4] mix-blend-overlay dark:opacity-[0.1]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <filter id={`grain-${plan.id}`}>\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency=\"0.68\"\n              numOctaves=\"3\"\n              stitchTiles=\"stitch\"\n            />\n            <feColorMatrix type=\"saturate\" values=\"0\" />\n          </filter>\n          <rect width=\"100%\" height=\"100%\" filter={`url(#grain-${plan.id})`} />\n        </svg>\n\n        <div className=\"relative z-10 flex flex-col gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <Avatar shape=\"squircle\" size=\"sm\" color={pal.avatarColor} />\n            {plan.featuredLabel && (\n              <span className=\"rounded-full bg-black/10 px-2.5 py-0.5 text-xs font-medium text-foreground/70 backdrop-blur-sm dark:bg-white/15 dark:text-foreground/70\">\n                {plan.featuredLabel}\n              </span>\n            )}\n          </div>\n\n          <div className=\"space-y-0.5\">\n            <h3 className=\"text-xl font-bold tracking-tight\">{plan.name}</h3>\n            <p className=\"text-sm text-foreground/60\">{plan.description}</p>\n          </div>\n\n          <div className=\"space-y-0.5\">\n            <div className=\"flex items-baseline gap-2\">\n              <span className=\"text-3xl font-bold tracking-tight\">\n                {plan.price}\n              </span>\n              <span className=\"text-base text-foreground/45 line-through\">\n                {plan.originalPrice}\n              </span>\n            </div>\n            {plan.priceNote && (\n              <p className=\"text-xs text-foreground/50\">{plan.priceNote}</p>\n            )}\n          </div>\n\n          <Button\n            className={cn(\n              'w-full rounded-full font-semibold',\n              plan.ctaDark\n                ? 'bg-foreground text-background hover:bg-foreground/85'\n                : 'bg-white/70 text-foreground backdrop-blur-sm hover:bg-white/90 dark:bg-white/15 dark:text-foreground dark:hover:bg-white/25',\n            )}\n            asChild\n          >\n            <Link href={plan.ctaHref}>{plan.ctaLabel}</Link>\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-5 px-1 pt-5\">\n        <ul className=\"space-y-2.5\">\n          {plan.features.map((f) => (\n            <li key={f} className=\"flex items-center gap-2 text-sm\">\n              <HugeiconsIcon\n                icon={Tick02Icon}\n                className=\"size-3.5 shrink-0 text-foreground/40\"\n                strokeWidth={2}\n              />\n              {f}\n            </li>\n          ))}\n        </ul>\n\n        {(plan.footerNote || plan.footerDesc) && (\n          <div className=\"space-y-0.5 border-t border-border p-2\">\n            {plan.footerNote && (\n              <p className=\"text-xs font-semibold\">{plan.footerNote}</p>\n            )}\n            {plan.footerDesc && (\n              <p className=\"text-xs text-muted-foreground\">{plan.footerDesc}</p>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default function Pricing6({\n  individualPlans = INDIVIDUALS_PLANS,\n  teamsPlans = TEAMS_PLANS,\n  individualsLabel = 'Individuals',\n  teamsLabel = 'Teams & Enterprise',\n  defaultTab = 'individuals',\n  title = 'Simple, transparent pricing',\n  subtitle = 'No hidden fees. Choose the plan that works for you.',\n}: {\n  individualPlans?: Plan6[];\n  teamsPlans?: Plan6[];\n  individualsLabel?: string;\n  teamsLabel?: string;\n  defaultTab?: TabKey;\n  title?: string;\n  subtitle?: string;\n}) {\n  const [activeTab, setActiveTab] = useState<TabKey>(defaultTab);\n\n  const plans = activeTab === 'individuals' ? individualPlans : teamsPlans;\n\n  return (\n    <div className=\"w-full space-y-8\">\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <h2 className=\"text-3xl font-bold tracking-tight\">{title}</h2>\n          <p className=\"text-sm text-muted-foreground\">{subtitle}</p>\n        </div>\n        <div className=\"flex items-center gap-0.5 rounded-full border border-border bg-muted p-1\">\n          {(\n            [\n              ['individuals', individualsLabel],\n              ['teams', teamsLabel],\n            ] as [TabKey, string][]\n          ).map(([key, label]) => (\n            <button\n              key={key}\n              type=\"button\"\n              onClick={() => setActiveTab(key)}\n              className={cn(\n                'rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200',\n                activeTab === key\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground',\n              )}\n            >\n              {label}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"grid gap-6 md:grid-cols-3\">\n        {plans.map((plan) => (\n          <PlanCard key={plan.id} plan={plan} />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/pricing-6.tsx"
    }
  ],
  "type": "registry:ui"
}