{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-3",
  "title": "Pricing Exemple 3",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Pricing/pricing3.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport { Check, Server, Cloud } from \"lucide-react\";\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\ninterface PricingPlan {\r\n  title: string;\r\n  badge?: string;\r\n  description: string;\r\n  basePrice: string;\r\n  extraPrice?: string;\r\n  cta: string;\r\n  ctaVariant: \"default\" | \"highlight\";\r\n  cpuLabel: string;\r\n  cpuBold: string;\r\n  clusterLabel: string;\r\n  clusterBold: string;\r\n  featuresLabel: string;\r\n  features: string[];\r\n}\r\n\r\n// ─── Data ────────────────────────────────────────────────────────────────────\r\n\r\nconst plans: PricingPlan[] = [\r\n  {\r\n    title: \"Free\",\r\n    description: \"Ideal for individuals and small teams with limited needs.\",\r\n    basePrice: \"$0\",\r\n    cta: \"Get started\",\r\n    ctaVariant: \"default\",\r\n    cpuBold: \"10\",\r\n    cpuLabel: \"CPUs\",\r\n    clusterBold: \"2\",\r\n    clusterLabel: \"clusters\",\r\n    featuresLabel: \"Free includes:\",\r\n    features: [\r\n      \"Free Kubernetes cost monitoring\",\r\n      \"Actionable cost recommendations\",\r\n      \"Security report\",\r\n    ],\r\n  },\r\n  {\r\n    title: \"Growth\",\r\n    description: \"For teams that need more resources and features.\",\r\n    basePrice: \"$200\",\r\n    extraPrice: \"$5\",\r\n    cta: \"Get started\",\r\n    ctaVariant: \"default\",\r\n    cpuBold: \"500\",\r\n    cpuLabel: \"CPUs\",\r\n    clusterBold: \"4\",\r\n    clusterLabel: \"clusters\",\r\n    featuresLabel: \"Everything in Free, plus:\",\r\n    features: [\r\n      \"Intelligent up & down scaling\",\r\n      \"Stable & predictable cloud cost\",\r\n      \"Rebalancing\",\r\n    ],\r\n  },\r\n  {\r\n    title: \"Growth PRO\",\r\n    badge: \"Most popular\",\r\n    description:\r\n      \"For teams that need unlimited access and advanced functionality.\",\r\n    basePrice: \"$1000\",\r\n    extraPrice: \"$5\",\r\n    cta: \"Get started\",\r\n    ctaVariant: \"highlight\",\r\n    cpuBold: \"2000\",\r\n    cpuLabel: \"CPUs\",\r\n    clusterBold: \"Unlimited\",\r\n    clusterLabel: \"clusters\",\r\n    featuresLabel: \"Everything in Growth, plus:\",\r\n    features: [\"Dedicated onboarding\", \"Dedicated support (Weekdays)\"],\r\n  },\r\n  {\r\n    title: \"Enterprise\",\r\n    description: \"For large organizations that need enterprise-level support.\",\r\n    basePrice: \"$5000\",\r\n    extraPrice: \"$5\",\r\n    cta: \"Get started\",\r\n    ctaVariant: \"default\",\r\n    cpuBold: \"Unlimited\",\r\n    cpuLabel: \"CPUs\",\r\n    clusterBold: \"Unlimited\",\r\n    clusterLabel: \"clusters\",\r\n    featuresLabel: \"Everything in Growth PRO, plus:\",\r\n    features: [\r\n      \"Enterprise SSO\",\r\n      \"First class onboarding\",\r\n      \"Platinum support 24/7\",\r\n    ],\r\n  },\r\n];\r\n\r\n// ─── Price block ─────────────────────────────────────────────────────────────\r\n\r\nfunction PriceBlock({ amount, period }: { amount: string; period: string }) {\r\n  return (\r\n    <div className=\"flex items-start\">\r\n      <span className=\"text-[36px] font-medium tracking-[-0.04em] text-zinc-950 leading-none\">\r\n        {amount}\r\n      </span>\r\n\r\n      <div className=\"flex flex-col ml-1 mt-[2px]\">\r\n        <span className=\"text-[12px] leading-[1.1] text-zinc-500\">per</span>\r\n        <span className=\"text-[12px] leading-[1.1] text-zinc-500\">\r\n          {period}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n// ─── Card ────────────────────────────────────────────────────────────────────\r\n\r\nfunction PricingCard({ plan, isLast }: { plan: PricingPlan; isLast: boolean }) {\r\n  return (\r\n    <div\r\n      className={`\r\n        flex flex-col bg-white p-6\r\n        border-t border-b border-l border-zinc-200\r\n        ${isLast ? \"border-r border-zinc-200\" : \"\"}\r\n      `}\r\n    >\r\n      {/* Title + badge */}\r\n      <div className=\"flex items-center gap-2 mb-1\">\r\n        <h3 className=\"text-[15px] font-semibold text-zinc-900\">\r\n          {plan.title}\r\n        </h3>\r\n        {plan.badge && (\r\n          <span className=\"text-[10px] font-medium text-zinc-500 border border-zinc-300 rounded-full px-2 py-0.5 leading-none\">\r\n            {plan.badge}\r\n          </span>\r\n        )}\r\n      </div>\r\n\r\n      {/* Description */}\r\n      <p className=\"text-[13px] text-zinc-500 leading-snug mb-5 min-h-[40px]\">\r\n        {plan.description}\r\n      </p>\r\n\r\n      {/* Price row */}\r\n      <div className=\"flex items-center gap-2 mb-5\">\r\n        <PriceBlock amount={plan.basePrice} period=\"month\" />\r\n        {plan.extraPrice && (\r\n          <>\r\n            <span className=\"text-zinc-300 text-xl font-light leading-none mt-1\">\r\n              +\r\n            </span>\r\n            <PriceBlock amount={plan.extraPrice} period=\"CPU\" />\r\n          </>\r\n        )}\r\n      </div>\r\n\r\n      {/* CTA */}\r\n      <button\r\n        className={`\r\n          w-full rounded-lg py-2.5 text-sm font-semibold mb-5 transition-colors duration-200 cursor-pointer\r\n          ${\r\n            plan.ctaVariant === \"highlight\"\r\n              ? \"bg-emerald-500 hover:bg-emerald-600 text-white\"\r\n              : \"bg-zinc-950 hover:bg-zinc-800 text-white\"\r\n          }\r\n        `}\r\n      >\r\n        {plan.cta}\r\n      </button>\r\n\r\n      {/* Specs */}\r\n      <div className=\"flex flex-col gap-1.5 mb-5\">\r\n        <div className=\"flex items-center gap-2 text-[13px] text-zinc-500\">\r\n          <Server size={13} className=\"text-zinc-400 shrink-0\" />\r\n          <span>\r\n            Up to{\" \"}\r\n            <span className=\"font-bold text-zinc-900\">{plan.cpuBold}</span>{\" \"}\r\n            {plan.cpuLabel}\r\n          </span>\r\n        </div>\r\n        <div className=\"flex items-center gap-2 text-[13px] text-zinc-500\">\r\n          <Cloud size={13} className=\"text-zinc-400 shrink-0\" />\r\n          <span>\r\n            {plan.clusterBold === \"Unlimited\" ? (\r\n              <>\r\n                <span className=\"font-bold text-zinc-900\">Unlimited</span>{\" \"}\r\n                {plan.clusterLabel}\r\n              </>\r\n            ) : (\r\n              <>\r\n                Up to{\" \"}\r\n                <span className=\"font-bold text-zinc-900\">\r\n                  {plan.clusterBold}\r\n                </span>{\" \"}\r\n                {plan.clusterLabel}\r\n              </>\r\n            )}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Divider */}\r\n      <div className=\"h-px bg-zinc-100 mb-4\" />\r\n\r\n      {/* Features */}\r\n      <p className=\"text-[12px] font-bold text-zinc-900 mb-3\">\r\n        {plan.featuresLabel}\r\n      </p>\r\n      <ul className=\"flex flex-col gap-2\">\r\n        {plan.features.map((feat) => (\r\n          <li key={feat} className=\"flex items-start gap-2\">\r\n            <Check\r\n              size={12}\r\n              className=\"text-emerald-500 mt-0.5 shrink-0\"\r\n              strokeWidth={3}\r\n            />\r\n            <span className=\"text-[13px] text-zinc-600\">{feat}</span>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n    </div>\r\n  );\r\n}\r\n\r\n// ─── Main ────────────────────────────────────────────────────────────────────\r\n\r\nexport default function PricingSection2() {\r\n  return (\r\n    <section className=\"w-full py-20 px-4 font-sans\">\r\n      <div className=\"max-w-6xl mx-auto\">\r\n        {/* Header */}\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 20 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}\r\n          className=\"text-center mb-12\"\r\n        >\r\n          <h2 className=\"text-4xl md:text-5xl font-bold tracking-tight text-zinc-950 mb-3\">\r\n            Measurable <span className=\"text-emerald-500\">savings</span> from\r\n            day one\r\n          </h2>\r\n          <p className=\"text-[15px] text-zinc-500\">\r\n            Find new efficiencies and cut your cloud bill with all CAST AI\r\n            plans.\r\n          </p>\r\n        </motion.div>\r\n\r\n        {/* Cards — flush grid, no gap */}\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 24 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true, margin: \"-40px\" }}\r\n          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\r\n          className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\"\r\n        >\r\n          {plans.map((plan, i) => (\r\n            <PricingCard\r\n              key={plan.title}\r\n              plan={plan}\r\n              isLast={i === plans.length - 1}\r\n            />\r\n          ))}\r\n        </motion.div>\r\n\r\n        {/* Compare button */}\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 12 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{ duration: 0.4, delay: 0.2, ease: \"easeOut\" }}\r\n          className=\"flex justify-center mt-8\"\r\n        >\r\n          <button className=\"border border-zinc-300 bg-white text-zinc-700 text-[13px] font-medium px-6 py-2.5 rounded-full hover:border-zinc-400 hover:text-zinc-900 transition-colors duration-200 cursor-pointer\">\r\n            Compare all features\r\n          </button>\r\n        </motion.div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/pricing-ex-3.tsx"
    }
  ],
  "type": "registry:block"
}