{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-2",
  "description": "High-fidelity Freddy UI header with integrated scrolling marquee announcement bar.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/announcement/2/marquee-header.tsx",
      "content": "\"use client\";\n\nimport {\n  ArrowRight,\n  ChevronDown,\n  Globe,\n  Layout,\n  Menu,\n  ShieldCheck,\n  Sparkles,\n  X,\n} from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\n\nconst MARQUEE_ITEMS = [\n  {\n    icon: Sparkles,\n    text: \"Freddy UI Pro is now available with 50+ premium blocks\",\n  },\n  {\n    icon: Layout,\n    text: \"New 'Announcement' category just dropped! Check it out\",\n  },\n  {\n    icon: ShieldCheck,\n    text: \"Built with Shadcn UI, Tailwind CSS and Framer Motion\",\n  },\n  { icon: Globe, text: \"Trusted by 5,000+ developers worldwide\" },\n];\n\nconst NAV_LINKS = [\n  { label: \"Components\", hasDropdown: true },\n  { label: \"Blocks\", hasDropdown: true },\n  { label: \"Showcase\", href: \"#\" },\n  { label: \"Templates\", hasDropdown: true },\n  { label: \"Docs\", href: \"#\" },\n];\n\nexport const MarqueeHeader = () => {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n    if (isMobileMenuOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isMobileMenuOpen]);\n\n  return (\n    <header className=\"sticky top-0 z-50 w-full border-border border-b bg-background/95 backdrop-blur-md\">\n      {/* Marquee Bar */}\n      <div className=\"relative flex h-9 items-center overflow-hidden border-border border-b bg-muted/30\">\n        <div className=\"flex animate-marquee whitespace-nowrap py-2 [--duration:40s] [--gap:2rem]\">\n          {[1, 2, 3, 4].map((i) => (\n            <div\n              className=\"flex shrink-0 items-center gap-8 px-4\"\n              key={`marquee-group-${i}`}\n            >\n              {MARQUEE_ITEMS.map((item, _idx) => (\n                <div\n                  className=\"flex items-center gap-2 font-medium text-[12px] text-muted-foreground transition-colors hover:text-foreground\"\n                  key={item.text}\n                >\n                  <item.icon className=\"h-3.5 w-3.5 text-primary/60\" />\n                  <span>{item.text}</span>\n                  <ArrowRight className=\"hidden h-3 w-3 opacity-30 group-hover:block\" />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n\n        {/* Fades for smooth entry/exit */}\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-linear-to-r from-background to-transparent\" />\n        <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-linear-to-l from-background to-transparent\" />\n      </div>\n\n      {/* Main Navigation */}\n      <nav className=\"container relative flex h-16 items-center justify-between px-4 sm:px-6\">\n        {/* Logo */}\n        <div className=\"flex shrink-0 items-center gap-2\">\n          <Logo className=\"h-7\" />\n        </div>\n\n        {/* Centered Desktop Menu */}\n        <div className=\"hidden items-center gap-8 md:flex\">\n          {NAV_LINKS.map((link) => (\n            <MenuLink\n              hasDropdown={link.hasDropdown}\n              key={link.label}\n              label={link.label}\n            />\n          ))}\n        </div>\n\n        {/* Right Actions */}\n        <div className=\"flex shrink-0 items-center gap-3\">\n          <button\n            className=\"hidden font-semibold text-muted-foreground text-sm transition-colors hover:text-foreground md:block\"\n            type=\"button\"\n          >\n            Log In\n          </button>\n          <Button className=\"hidden h-10 rounded-xl px-6 font-bold shadow-sm transition-all hover:scale-[1.02] active:scale-[0.98] md:flex\">\n            Get Freddy UI\n          </Button>\n\n          {/* Mobile Menu Toggle */}\n          <button\n            aria-label={isMobileMenuOpen ? \"Close menu\" : \"Open menu\"}\n            className=\"flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-muted/30 text-foreground md:hidden\"\n            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n            type=\"button\"\n          >\n            {isMobileMenuOpen ? (\n              <X className=\"h-5 w-5\" />\n            ) : (\n              <Menu className=\"h-5 w-5\" />\n            )}\n          </button>\n        </div>\n      </nav>\n\n      {/* Mobile Menu Portal */}\n      {mounted &&\n        isMobileMenuOpen &&\n        createPortal(\n          <AnimatePresence>\n            <motion.div\n              animate={{ opacity: 1, y: 0 }}\n              className=\"fixed inset-0 top-[calc(64px+36px)] z-40 bg-background/98 backdrop-blur-xl md:hidden\"\n              exit={{ opacity: 0, y: -10 }}\n              initial={{ opacity: 0, y: -10 }}\n            >\n              <div className=\"container flex flex-col gap-6 p-6\">\n                <div className=\"flex flex-col gap-4\">\n                  {NAV_LINKS.map((link) => (\n                    <button\n                      className=\"flex items-center justify-between font-semibold text-foreground text-lg\"\n                      key={link.label}\n                      type=\"button\"\n                    >\n                      {link.label}\n                      {link.hasDropdown && (\n                        <ChevronDown className=\"h-5 w-5 opacity-50\" />\n                      )}\n                    </button>\n                  ))}\n                </div>\n                <div className=\"mt-8 flex flex-col gap-3 border-border border-t pt-8\">\n                  <Button\n                    className=\"h-12 w-full rounded-xl font-bold text-lg\"\n                    variant=\"outline\"\n                  >\n                    Log In\n                  </Button>\n                  <Button className=\"h-12 w-full rounded-xl font-bold text-lg\">\n                    Get Freddy UI\n                  </Button>\n                </div>\n              </div>\n            </motion.div>\n          </AnimatePresence>,\n          document.body\n        )}\n    </header>\n  );\n};\n\ntype MenuLinkProps = {\n  label: string;\n  hasDropdown?: boolean;\n};\n\nconst MenuLink = ({ label, hasDropdown }: MenuLinkProps) => {\n  return (\n    <div className=\"group relative py-4\">\n      <button\n        className=\"flex items-center gap-1 font-medium text-[15px] text-muted-foreground transition-colors hover:text-foreground\"\n        type=\"button\"\n      >\n        {label}\n        {hasDropdown && (\n          <ChevronDown className=\"h-4 w-4 transition-transform group-hover:rotate-180\" />\n        )}\n      </button>\n\n      {/* Dropdown Content (Mock) */}\n      {hasDropdown && (\n        <div className=\"-translate-x-1/2 invisible absolute top-full left-1/2 w-48 pt-2 opacity-0 transition-all group-hover:visible group-hover:opacity-100\">\n          <div className=\"rounded-xl border border-border bg-background p-2 shadow-xl backdrop-blur-xl\">\n            {[1, 2, 3].map((item) => (\n              <button\n                className=\"w-full rounded-lg px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground\"\n                key={item}\n                type=\"button\"\n              >\n                {label} Module {item}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "50vh",
    "isPinned": true,
    "createdAt": "2026-03-28"
  },
  "categories": [
    "announcement",
    "header"
  ],
  "type": "registry:block"
}