{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-1",
  "description": "Animated announcement bar with call-to-action and close button.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/announcement/1/announcement.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\n\nexport const Announcement = () => {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleClose = React.useCallback(() => {\n    setIsVisible(false);\n  }, []);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") {\n        handleClose();\n      }\n    },\n    [handleClose]\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          animate={{ height: \"auto\", opacity: 1 }}\n          className=\"relative w-full overflow-hidden border-border border-b bg-foreground text-background\"\n          exit={{ height: 0, opacity: 0 }}\n          initial={{ height: 0, opacity: 0 }}\n          transition={{ duration: 0.3, ease: \"easeInOut\" }}\n        >\n          <div className=\"container mx-auto flex h-10 items-center justify-between px-4 sm:px-6\">\n            <div className=\"flex flex-1 items-center justify-center gap-x-3 text-center font-medium text-[13px] leading-none tracking-tight\">\n              <span className=\"hidden items-center rounded-full bg-background/20 px-2 py-0.5 text-[10px] text-background uppercase tracking-wider ring-1 ring-background/30 ring-inset sm:inline-flex\">\n                New\n              </span>\n              <p className=\"flex items-center gap-1.5 opacity-90 transition-opacity hover:opacity-100\">\n                <span>Unlock premium components with Freddy UI Pro.</span>\n                <a\n                  className=\"group inline-flex items-center font-bold text-primary-foreground hover:underline\"\n                  href=\"#\"\n                >\n                  Get Started\n                  <ArrowRight className=\"ml-1 h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5\" />\n                </a>\n              </p>\n            </div>\n\n            <button\n              aria-label=\"Close announcement\"\n              className=\"ml-auto inline-flex items-center justify-center rounded-md p-1 opacity-50 transition-all hover:bg-background/10 hover:opacity-100 focus:outline-hidden\"\n              onClick={handleClose}\n              onKeyDown={handleKeyDown}\n              type=\"button\"\n            >\n              <X className=\"h-3.5 w-3.5\" />\n            </button>\n          </div>\n\n          {/* Decorative gradient blur */}\n          <div className=\"-z-10 -translate-x-1/2 absolute top-0 left-1/2 h-full w-full bg-radial from-background/20 to-transparent\" />\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "50vh",
    "isPinned": true,
    "createdAt": "2024-03-27"
  },
  "categories": [
    "announcement"
  ],
  "type": "registry:block"
}