{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-04",
  "title": "Pricing 04",
  "description": "Three-column pricing section with a highlighted popular plan featuring a dark gradient background, monthly/yearly billing toggle with a green indicator, and custom price display. Use it for SaaS products that want to visually differentiate the recommended plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "tabs"
  ],
  "files": [
    {
      "path": "src/registry/blocks/pricing-04/pricing.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\ninterface Plan {\n  name: string;\n  prices: {\n    monthly: { amount: string; suffix: string };\n    yearly: { amount: string; suffix: string };\n  };\n  description: string;\n  features: string[];\n  popular?: boolean;\n  cta: { text: string; url: string; disabled?: boolean };\n}\n\ninterface Pricing04Props {\n  title?: string;\n  plans?: Plan[];\n  className?: string;\n}\n\nconst Pricing04 = ({\n  title = \"Choose your plan\",\n  plans = [\n    {\n      name: \"Free\",\n      prices: {\n        monthly: { amount: \"0\", suffix: \"USD / month\" },\n        yearly: { amount: \"0\", suffix: \"USD / year\" },\n      },\n      description: \"Perfect for hobbyists, students, or early-stage creators.\",\n      features: [\n        \"Access to a basic asset library\",\n        \"15-second video animation\",\n        \"Generate up to 10 scenes/month\",\n        \"Watermarked exports\",\n        \"Try basic AI prompts\",\n      ],\n      cta: { text: \"You're on Creator\", url: \"#\", disabled: true },\n    },\n    {\n      name: \"Creator\",\n      prices: {\n        monthly: { amount: \"20\", suffix: \"USD / month\" },\n        yearly: { amount: \"16\", suffix: \"USD / month\" },\n      },\n      description:\n        \"For indie creators, and startups who need high-quality output.\",\n      features: [\n        \"Everything in Free\",\n        \"Unlimited 3D scene generation\",\n        \"Premium asset library access\",\n        \"Animations up to 30 seconds\",\n        \"20+ Video AI models\",\n      ],\n      popular: true,\n      cta: { text: \"Current Plan\", url: \"#\" },\n    },\n    {\n      name: \"Studio\",\n      prices: {\n        monthly: { amount: \"40\", suffix: \"USD / month\" },\n        yearly: { amount: \"32\", suffix: \"USD / month\" },\n      },\n      description: \"For teams and studios that need power, speed.\",\n      features: [\n        \"Everything in Creator\",\n        \"Unlimited 3D scene generation\",\n        \"Full access to premium asset library\",\n        \"Animations up to 60 seconds\",\n        \"Unlimited Video AI models\",\n      ],\n      cta: { text: \"Get Studio\", url: \"#\" },\n    },\n  ],\n  className,\n}: Pricing04Props) => {\n  const [billing, setBilling] = useState<\"monthly\" | \"yearly\">(\"monthly\");\n\n  return (\n    <section\n      className={cn(\n        \"relative w-full overflow-hidden py-16 md:py-24\",\n        className,\n      )}\n    >\n      <div className=\"container mx-auto px-4\">\n        <div className=\"flex flex-col items-center gap-6 text-center\">\n          <h2 className=\"text-4xl font-medium tracking-tight md:text-5xl\">\n            {title}\n          </h2>\n\n          <Tabs\n            value={billing}\n            onValueChange={(v) => setBilling(v as \"monthly\" | \"yearly\")}\n          >\n            <TabsList className=\"h-9 gap-1 bg-muted p-1\">\n              <TabsTrigger\n                value=\"monthly\"\n                className=\"rounded-sm px-4 text-sm data-[state=active]:bg-background data-[state=active]:shadow-sm\"\n              >\n                Monthly\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"yearly\"\n                className=\"flex items-center gap-1.5 rounded-sm px-4 text-sm data-[state=active]:bg-background data-[state=active]:shadow-sm\"\n              >\n                Yearly\n                <span\n                  className={cn(\n                    \"size-1.5 rounded-full transition-colors\",\n                    billing === \"yearly\"\n                      ? \"bg-green-500\"\n                      : \"bg-muted-foreground/40\",\n                  )}\n                />\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </div>\n\n        <div className=\"mt-10 flex flex-col items-stretch justify-center gap-4 lg:flex-row\">\n          {plans.map((plan) => {\n            const price =\n              billing === \"yearly\" ? plan.prices.yearly : plan.prices.monthly;\n\n            return (\n              <Card\n                key={plan.name}\n                className=\"flex w-full max-w-sm flex-col gap-0 overflow-hidden rounded-2xl p-0 shadow-none\"\n              >\n                {/* Banner — gradient sombre uniquement pour la carte popular, même hauteur pour toutes */}\n                <div\n                  className=\"relative flex h-18 items-center overflow-hidden rounded-t-xl bg-muted px-6 pb-6\"\n                  style={\n                    plan.popular\n                      ? {\n                          background:\n                            \"radial-gradient(ellipse at 65% 0%, #3a3a4a 0%, #1a1a24 45%, #111118 100%)\",\n                        }\n                      : undefined\n                  }\n                >\n                  {plan.popular && (\n                    <div\n                      className=\"pointer-events-none absolute inset-0\"\n                      style={{\n                        backgroundImage:\n                          \"radial-gradient(circle at 75% 15%, #6366f1 0%, transparent 55%)\",\n                        opacity: 0.2,\n                      }}\n                    />\n                  )}\n                  <h3\n                    className={cn(\n                      \"relative text-lg font-semibold\",\n                      plan.popular ? \"text-white\" : \"text-foreground\",\n                    )}\n                  >\n                    {plan.name}\n                  </h3>\n                </div>\n\n                {/* Body — identique pour les trois cartes */}\n                <div className=\"z-1 -mt-6 flex flex-col gap-4 rounded-2xl border-t bg-background p-6\">\n                  <p className=\"line-clamp-2 min-h-[2.5rem] text-sm leading-snug text-muted-foreground\">\n                    {plan.description}\n                  </p>\n\n                  <div className=\"flex flex-col gap-4 py-4\">\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"self-start pt-0.5 text-base font-medium text-foreground\">\n                        $\n                      </span>\n                      <span className=\"text-5xl leading-none font-semibold tracking-tight text-foreground\">\n                        {price.amount}\n                      </span>\n                      <span className=\"self-end pb-0.5 text-xs text-muted-foreground\">\n                        {price.suffix}\n                      </span>\n                    </div>\n\n                    <Button\n                      variant={plan.cta.disabled ? \"outline\" : \"default\"}\n                      disabled={plan.cta.disabled}\n                      className={cn(\n                        \"w-full\",\n                        !plan.cta.disabled &&\n                          \"bg-foreground text-background hover:bg-foreground/90\",\n                        plan.cta.disabled && \"cursor-default opacity-60\",\n                      )}\n                      asChild={!plan.cta.disabled}\n                    >\n                      {plan.cta.disabled ? (\n                        <span>{plan.cta.text}</span>\n                      ) : (\n                        <a href={plan.cta.url}>{plan.cta.text}</a>\n                      )}\n                    </Button>\n                  </div>\n                  <ul className=\"flex flex-col gap-2.5\">\n                    {plan.features.map((feature) => (\n                      <li\n                        key={feature}\n                        className=\"flex items-center gap-2.5 text-sm text-muted-foreground\"\n                      >\n                        <Check className=\"size-3.5 shrink-0 text-foreground\" />\n                        {feature}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              </Card>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Pricing04;\n",
      "type": "registry:component",
      "target": "components/pricing-04.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/pricing-04.webp",
    "imageDark": "/r/previews/pricing-04-dark.webp",
    "prose": {
      "about": "Pricing 04 is a three-column pricing section where the popular plan stands out with a dark radial-gradient background. A pill-shaped billing toggle with a green dot indicator switches between monthly and yearly pricing. Each card shows a large price display with a dollar-sign prefix, a short description, a CTA button, and a feature list with checkmarks. The popular card uses white-tinted button and text styles to stay readable on the dark background.",
      "whenToUse": [
        "SaaS products with a clear recommended plan that should draw the user's eye immediately",
        "Pricing pages targeting creators or indie makers where a visually bold middle tier drives upgrades",
        "Products that offer a yearly discount and want to hint at it with a subtle green badge on the yearly tab",
        "Situations where you want each plan to feel distinct without using colored borders or badges"
      ],
      "notes": "Keep plan descriptions to one or two lines so all three cards stay the same height. The dark gradient on the popular card is purely CSS — no image assets required."
    }
  },
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}