{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-marketing",
  "type": "registry:component",
  "title": "Changelog marketing",
  "description": "A marketing changelog with a gradient masked headline, a subscribe CTA and a timeline of versions with highlight dots and bullet lists that slide in.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "https://ui.minidev.pro/r/masked-gradient-headline.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/changelog-marketing.tsx",
      "type": "registry:ui",
      "target": "components/ui/changelog-marketing.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MaskedGradientHeadline } from \"@/components/ui/masked-gradient-headline\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\n\ntype Entry = { version: string; date: string; title: string; items: string[]; highlight?: boolean }\n\nfunction ChangelogMarketing({\n  entries = [\n    {\n      version: \"v0.6\",\n      date: \"Sep 14\",\n      title: \"Launch pages that feel expensive\",\n      highlight: true,\n      items: [\"Kinetic type + sticky story\", \"Magnetic CTA + wipe compare\", \"Launch + investor kits\"],\n    },\n    {\n      version: \"v0.5\",\n      date: \"Sep 14\",\n      title: \"Email, admin, page kits\",\n      items: [\"Transactional email\", \"Admin console density\", \"Careers / pricing / blog\"],\n    },\n    {\n      version: \"v0.4\",\n      date: \"Sep 14\",\n      title: \"Templates + AI studio\",\n      items: [\"SaaS landing\", \"Charts density\", \"Composer surfaces\"],\n    },\n  ],\n  className,\n}: {\n  entries?: Entry[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"changelog-marketing\" data-tier=\"premium\" className={cn(\"space-y-10\", className)}>\n      <div className=\"flex flex-wrap items-end justify-between gap-4\">\n        <div className=\"space-y-3\">\n          <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Changelog</p>\n          <MaskedGradientHeadline>What just shipped.</MaskedGradientHeadline>\n        </div>\n        <MagneticCta variant=\"outline\">Subscribe</MagneticCta>\n      </div>\n      <ol className=\"relative space-y-0 border-l border-border\">\n        {entries.map((e, i) => (\n          <motion.li\n            key={e.version}\n            initial={reduce ? false : { x: -8 }}\n            whileInView={{ x: 0 }}\n            viewport={{ once: true }}\n            transition={{ delay: i * 0.06 }}\n            className=\"relative ml-6 pb-10 last:pb-0\"\n          >\n            <span\n              className={cn(\n                \"absolute top-1.5 -left-[31px] size-3 rounded-full border-2 border-bg\",\n                e.highlight ? \"bg-accent\" : \"bg-fg-subtle\"\n              )}\n              aria-hidden\n            />\n            <div className={cn(\"rounded-xl border border-border bg-surface p-5\", e.highlight && \"border-accent/35\")}>\n              <div className=\"flex flex-wrap items-center gap-2 text-xs text-fg-muted\">\n                <span className=\"font-mono font-medium text-fg\">{e.version}</span>\n                <span>·</span>\n                <time>{e.date}</time>\n              </div>\n              <h3 className=\"mt-2 text-lg font-medium tracking-[-0.008em] text-fg\">{e.title}</h3>\n              <ul className=\"mt-3 space-y-1.5 text-sm text-fg-muted\">\n                {e.items.map((item) => (\n                  <li key={item}>• {item}</li>\n                ))}\n              </ul>\n            </div>\n          </motion.li>\n        ))}\n      </ol>\n    </div>\n  )\n}\nexport { ChangelogMarketing }\n"
    }
  ]
}